直接上一个简单的下配demo来说明问题
1.使用普通函数
需求:实现点击id为box的盒子,让其变色
- 方式1—使用普通哈函数
可以发现当你没有在外层保留this的指向时,此时setTimeout定时器中的箭头函数的指向时指向window的,那么此时this.style.background====>window.style.background,因此找不到windowd.style,所以报上面的错误
当我在外层保留this的指向时,然后我在定时器内函数使用外层保留的this即self,此时打印出的self便指向的时box这个盒子,便可以解决指向问题
- 方式2-----使用箭头函数
var box = document.getElementById('box');
box.addEventListener('click', function () {
var self = this;
setTimeout(function () {
console.log(self)
self.style.background = "red";
}, 2000)
})
var box = document.getElementById('box');
box.addEventListener('click', function () {
setTimeout(() => {
console.log(this)
this.style.background = "blue"
}, 1000)
})
需求2:对一已经数组。返回数组中的偶数
const arr = [2, 5, 8, 7, 9, 12]
const result = arr.filter(function (item) {
if (item % 2 === 0) {
return true
} else {
return false
}
})
console.log(result)
//使用箭头函数
const result1 = arr.filter((item) => {
if (item % 2 === 0) {
return true
} else {
return false
}
})
console.log(result1)
//使用箭头函数
const result2 = arr.filter(item => item % 2 === 0)
console.log(result2)
总结:
1.箭头函数适合于this无关的问题,比如定时器,数组的方法回调
2.箭头函数不适合与this有关的回调,事件回调,对象的方法(如box.addEventListener(‘click’, function () {})—这里的functio就不适合使用箭头函数)