- 不绑定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指向调用它的那个对象