箭头函数的特点

  • 不绑定arguments,用rest参数…解决
  • 本身没有this的概念,捕获其所在上下文的 this 值,作为自己的 this 值
  • 箭头函数没有原型属性(prototype)
  • 箭头函数不能当做Generator函数,不能使用yield关键字
  • 箭头函数不能换行
  • 箭头函数不能使用new(会报错)
  • 箭头函数有constructor、length属性
  • 箭头函数可以立即执行

下面一波栗子走起,读者自己对号入座:
栗子一(请在浏览器环境下测试,不要使用node)

const A = () => {
  console.log(arguments)
}
A()
const B = (...args) => {
  console.log(args)
}
B()

栗子二

var obj = {
  age: 18,
  a: function () {
    console.log(this.age)//18
  },
  c: () => {
    console.log(this)//window
    console.log(this.age)//undefined
  },
  d: function () {
    return () => {
      console.log(this)//obj{}
      console.log(this.age)//18
    }
  }
}
obj.a()
obj.c()
obj.d()()
obj.d().call({ age: 20 })//18

箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值;
但是我觉得这条和上条其实是一条,还是捕获所在的上下文,比如下面这个例子:c是一个箭头函数,然后它的 this是指向window,这是为什么呢,因为箭头函数捕获的是obj{}这个对象的环境,然后这个环境的this指向的是window,就相当于上一条的例子:在d方法里面return的那个箭头函数捕获的是c:function(){}这个环境的this,而这个环境的this是obj。
栗子三

const C = (...args) => {
  console.log(args)
}
C.call(null,1)//[ 1 ]
C.call(this,1)//[ 1 ]
C.call(1,1,2,3)//[ 1, 2, 3 ]
C.apply(1,[1,2,3])//[ 1, 2, 3 ]
console.log(C.prototype)//undefined

箭头函数的this永远指向其上下文的 this,任何方法都改变不了其指向,如call(), bind(), apply(),比如栗子二中obj.d().call({ age: 20 })//18,再来看稍微复杂的栗子:

var obj1 = {
  age: 18,
  a: function (add) {
    return (() => add + this.age)();
  },
  b: function (add) {
    var fn = v => v + this.age;
    var o = { age: 20 }
    return fn.call(o, add)
  }
}
console.log(obj1.a(1))//19
console.log(obj1.b(1))//19

PS:
箭头函数不能当做Generator函数,不能使用yield关键字
箭头函数不能换行SyntaxError: Unexpected token =>
普通函数的this指向调用它的那个对象

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。