前端面试题

166 阅读5分钟

箭头函数跟普通函数的区别

  • 箭头函数是匿名函数,不能作为构造函数,不能使用new
  • 箭头函数不能绑定arguments,取而代之用rest参数...解决
  • 箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值
  • 箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响
  • 箭头函数没有原型属性
  • 箭头函数不能当做Generator函数,不能使用yield关键字

小程序跟h5的区别

  • 运行环境不同:小程序是一种应用,运行的环境是微信(App);H5 是一种技术,依附的外壳是是浏览器
  • 开发成本不同:开发一个微信小程序,由于微信团队提供了开发者工具,并且规范了开发标准,则简单得多;
  • 获取系统级权限的不同:微信小程序相对于H5能获得更多的系统权限
  • 运行流畅度的不同:微信小程序,它的代码直接在微信上运行,省去了通过浏览器渲染的步骤

小程序 onload 与 onshow 的区别

onLoad页面加载时调用,可以获取参数,通过options;onShow页面显示时调用。 从二级页面返回该页面时,onLoad不会再次加载,而onshow会重新加载。

这点很重要:

  1. 如果加载列表页,二级页面对一级的列表页面内容有修改,则以及列表函数应该在onShow中加载,否则可以选择onLoad。
  2. 如果从一个页面携带参数跳转到另外一个页面,在另一个页面获取参数的方式:onLoad(options){ console.log(options.xxx) },这些参数都挂在在options.

vue的双向绑定跟小程序有什么区别别

大体相同,但小程序直接this.data的属性是不可以同步到视图的,必须调用this.setData()方法!

vue 原理:vue数据双向绑定通过‘数据劫持’ + 订阅发布模式实现

  1. 设置值

    • 在vue中,只需要在表单元素上加上v-model,然后再绑定data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是vue非常nice的一点;
    • 但是在小程序中,却没有这个功能。那怎么办呢?当表单内容发生变化时,会触发表单元素上绑定的方法,然后在该方法中,通过 this.setData({key:value})来将表单上的值赋值给 data中的对应值;
  2. 取值

    • 在vue中,通过this.reason取值;小程序中,通过this.data.reason取值。

JS

闭包的概念、优缺点

  • 闭包的概念:能够读取其他函数内部变量的函数。
  • 闭包用途:读取函数内部的变量,可以让变量的值始终保持在内存中
  • 优点:
    1. 避免全局变量的污染
    2. 希望一个变量长期存储在内存中(缓存变量)
  • 缺点:
    1. 内存泄露(消耗)
    2. 常驻内存,增加内存使用量

原型链

每个对象都有一个_proto_,当通过new出来的对象会创造一个指向prototype的属性,当prototype没有此属性,则去到_proto_寻找,如果_proto_都找不到,则抛出异常。 原型链通过new实现继承(只是其中一种方式)

跨域

  • 当协议,主机,和端口号有一个不同时,就是跨域
  • 受限制的场景有哪些呢
    1. Cookie,LocalStorage无法读取
    2. DOM和js对象无法读取,主要是iframe(可以说有iframe的对象无法读取)
    3. Ajax请求不能发送
  • 处理跨域问题:
    1. jsonp(这个只能后端处理)
    2. 通过nodejs的express的代理实现,webpack-dev-server已经有api
    3. 通过反向代理,例如nginx

CSS

CSS盒子模型

  • 有margin,padding,border和本身的宽高
  • W3C盒模型:width(宽度)=content(内容宽度)
  • 注意怪异盒子模型(主要是IE盒模型):width(宽度)=padding+border(边框)+content(内容宽度)

VUE

v-show 与 v-if 区别

  • 区别: v-show是css切换,v-if是完整的销毁和重新创建。
  • 使用:频繁切换时用v-show,运行时较少改变时用v-if

绑定 class 的数组用法

  • 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
  • 数组方法 v-bind:class="[class1, class2]"
  • 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"

vue钩子函数(生命周期)

  • 创建前后 beforeCreate/created

    在beforeCreate 阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象有了,el还没有。

  • 载入前后 beforeMount/mounted

    在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前未虚拟的DOM节点,data尚未替换。 在mounted阶段,vue实例挂载完成,data成功渲染。

  • 更新前后 beforeUpdate/updated

    当data变化时,会触发beforeUpdate和updated方法。这两个不常用,不推荐使用。

  • 销毁前后beforeDestory/destoryed

    beforeDestory是在vue实例销毁前触发,一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后,触发的destroyed。

webpack配置

  • 有入口,出口,规则的配置,平常用到比较多的是:babel,html-webpack,clean-webpack,defineplugin,css的相关loader, 配置webpack的development跟production环境通常会将development独立出来放到一个server.js上作为express的框架,里面可以使用绝大多数的nodejs api,而production是生产环境才需要,如果服务器不是nodejs服务器则使用productio

REACT

react钩子函数)

react有class(类声明)和函数式声明(钩子函数主要使用在此),useState,useEffect来代替class的this.state,和生命周期

  • 钩子函数的状态有4个阶段
    1. 初始化阶段 (componentWillMount() || componentDidMount())
    2. 更新阶段 (componentWillUpdate() || componentDidUpdate())
    3. 卸载阶段 (componentWillUnmount())
    4. 异常处理阶段 (componentWillCatch())