工作生活

箭头函数的特点

2019-06-30  本文已影响0人  泉泉泉泉泉泉

下面一波栗子走起,读者自己对号入座:
栗子一(请在浏览器环境下测试,不要使用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指向调用它的那个对象

上一篇 下一篇

猜你喜欢

热点阅读