es6使用箭头函数需要注意的问题

this问题

箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域，谁定义的函数，this指向谁

箭头函数要实现类似纯函数的效果，必须剔除外部状态。所以箭头函数不具备普通函数里常见的 this、arguments 等，当然也就不能用 call()、apply()、bind() 去改变 this 的指向

对于箭头函数来说，并没有自己的 this ，它的 this 将始终指向让它生效的对象，即它的外部调用者：

const obj1 = {
    arrowFunc: () => { console.log(this) },
    normalFunc: function () { console.log(this) }
}

// obj1.arrowFunc 在全局对象 window 下生效，指向 window
obj1.arrowFunc() // window
// 普通方式声明的函数 this 指向持有这个函数的对象，即 obj1
obj1.normalFunc() // obj1

　　

const obj2 = {
    arrowFunc: function () {
      setTimeout(() => { console.log(this) }, 0)
    },
    normalFunc: function () {
      setTimeout(function () { console.log(this) }, 0)
    }
}

// arrowFunc 中的箭头函数在 obj2 下生效，指向 obj2
obj2.arrowFunc() // obj2
// normalFunc 中的匿名函数的 this 始终指向 window
obj2.normalFunc() // window

　　

arguments 关键字

在函数中，可以通过 arguments 关键字来获取到当前函数中传入的参数，但是在箭头函数中是没有这个关键字的，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

箭头函数转成 ES5 的代码如下

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

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

　　

转载于:https://www.cnblogs.com/mmy67/p/9805215.html