- ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义。
- 箭头函数的this是静态的，始终指向声明该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。
- 箭头函数不能作为构造函数进行实例化。
- 不能使用 arguments；
- 普通函数，谁调用，this就指向谁
var name = 'window'; // 其实是window.name = 'window'
var A = {
name: 'A',
sayHello: function(){
console.log(this.name)
}
}
A.sayHello();// 输出A
var B = {
name: 'B'
}
A.sayHello.call(B);//输出B
A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window
- 改为箭头函数
var name = 'window';
var A = {
name: 'A',
sayHello: () => {
console.log(this.name)
}
}
A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window
- 如何指向A呢，外面包一层函数
var name = 'window';
var A = {
name: 'A',
sayHello: function(){
var s = () => console.log(this.name)
return s//返回箭头函数s
}
}
var sayHello = A.sayHello();
sayHello();// 输出A
var B = {
name: 'B';
}
sayHello.call(B); //还是A
sayHello.call(); //还是A
- 外层函数写成箭头函数，则this也变成了window
ad.addEventListener("click", function(){
// ES6写法
// 定时器：参数1：回调函数；参数2：时间；
// 这个this才是ad
setTimeout(() => this.style.background = 'pink',2000);
}
)
//错误写法
ad.addEventListener("click", () => {
setTimeout(() => this.style.background = 'pink',2000);
})
//不使用箭头函数错误写法
ad.addEventListener("click", function(){
setTimeout(function(){this.style.background = 'pink';},2000);
});
// 不使用箭头函数正常写法
ad.addEventListener("click", function(){
let _this = this;
setTimeout(function(){
_this.style.background = 'pink';
},2000);
});
- apply(),bind(),call()
- 这三个方法的主要作用是改变函数中的this指向。
- apply 、 call 、bind 三者第一个参数都是this要指向的对象。
- apply 、 call 、bind 三者都可以利用后续参数传参。
- bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。
- apply和call只是传参不一样，apply是参数是数组，call的参数需要逐个列举出来。
参考：https://zhuanlan.zhihu.com/p/57204184
