前端常见问题 - ES6

ES6的箭头函数作用

• 箭头函数使得表达式更简洁

  const square = n => n * n;
  const isEven = n => n % 2 === 0;

• 简化回调函数

  // 正常函数写法
  [1, 2, 3].map(function(x) {
      return x * x;
  })
  // 箭头函数写法
  [1, 2, 3].map(x => x * x);

• 改变this指向。箭头函数函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

  function foo() {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 100);
  }
  var id = 21;
  foo.call({ id: 42 });
  // id: 42

箭头函数的this指向的是谁

• 首先，this的绑定机制，也就是this的绑定规则，由于绑定机制较复杂，不详细说明，此处列举下this几种绑定规则的优先级：
  • new绑定 > 显式绑定 > 隐式绑定 > 默认绑定
• 其次，箭头函数并不会使用以上四条标准，而是根据当前的词法作用域来决定this，具体来说，就是箭头函数会继承外层函数调用的this绑定（无论this绑定的是什么）。

什么时候不适合使用箭头函数

• 箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在map、reduce、filter的回调函数定义中
• 当我们需要执行上下文的时候，就不适合使用箭头函数了，例如：定义对象方法、定义原型方法、定义构造函数、定义事件回调函数
• 不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内
• 箭头函数优势之一是简洁。在有多层函数嵌套的情况下，箭头函数的简洁性并没有很大的提升，反而影响了函数的作用范围的识别度，这种情况不建议使用箭头函数

vue的钩子函数可以用箭头函数形式么，用箭头函数的话，this绑定的是什么

• vue的钩子函数中不适合使用箭头函数
• 原因：会丢失this对当前组件实例的绑定，从而使得组件对应的一些方法或数据不可使用
• 此时this绑定到undefined

let和var的区别

常用es6特性

• let
• const
• global
• 解构赋值
• promise
• ...运算符
• 箭头函数

参考：

• ECMAScript 6 入门
• 少年，不要滥用箭头函数啊