实例详解JS箭头函数=>与传统匿名函数处理this的不同方法
作者:admin 时间:2022-5-9 8:53:8 浏览:箭头函数表达式是使用“胖箭头”(=>)语法编写的匿名函数表达式。与传统函数不同，箭头函数在它们的工作方式上有一些重要的区别，还有一些语法增强。最大的功能差异是箭头函数没有自己的this绑定或原型，不能用作构造函数。箭头函数也可以写成比传统函数更紧凑的替代方案，因为它们可以省略参数周围的括号，并添加带有隐式返回的简洁函数体的概念。在本文中，将演示传统函数和箭头函数如何处理this，分析它们的不同之处。
箭头函数没有this值
在 JavaScript 中，关键字this通常被认为是一个棘手的话题。文章详解JS里this的上下文对象及用法解释了this如何工作，以及this如何根据程序是否在全局上下文中使用它、作为对象中的方法、作为函数或类的构造函数来隐式指示，或作为DOM事件处理程序。
箭头函数有this语法，这意味着this的值由周围的范围（词法环境）决定。
下面一个示例将演示传统函数和箭头函数如何处理this.。
在以下printNumbers对象中，有两个属性：phrase和numbers。对象上还有一个方法loop，它应该打印phrase字符串和当前值numbers：
const printNumbers = {
phrase: '当前值是:',
numbers: [1, 2, 3, 4],
loop() {
this.numbers.forEach(function (number) {
console.log(this.phrase, number)
})
},
}人们可能期望该loop函数在每次迭代时在循环中打印字符串和当前数字。但是，在运行函数的结果中，phrase实际上是undefined：
printNumbers.loop()
这将输出以下内容：
undefined 1
undefined 2
undefined 3
undefined 4
如上所示，this.phrase是未定义的，表面匿名函数中的this传入forEach方法没有引用printNumbers对象。这是因为传统的函数this不会从环境的范围来确定它的值，也就是printNumbers对象。
在旧版本的 JavaScript 中，不得不使用bind显式设置this。
使用bind改正上面的函数：
const printNumbers = {
phrase: '当前值是:',
numbers: [1, 2, 3, 4],
loop() {
// 从printNumbers绑定`this`到内部forEach函数
this.numbers.forEach(
function (number) {
console.log(this.phrase, number)
}.bind(this),
)
},
}
printNumbers.loop()这将输出预期的结果：
当前值是: 1
当前值是: 2
当前值是: 3
当前值是: 4
箭头函数可以提供更直接的处理方式。由于它们的this值是根据词法范围确定的，因此内部函数forEach可以访问外部printNumbers对象的属性，如下所示：
const printNumbers = {
phrase: '当前值是:',
numbers: [1, 2, 3, 4],
loop() {
this.numbers.forEach((number) => {
console.log(this.phrase, number)
})
},
}
printNumbers.loop()这将输出预期的结果：
当前值是: 1
当前值是: 2
当前值是: 3
当前值是: 4
这些示例表明，在forEach、map、filter和reduce等内置数组方法中使用箭头函数可以更直观、更易于阅读，从而使该策略更有可能满足预期。
传统函数和箭头函数处理this值的不同方法
传统匿名函数不能直接使用this值
在 JavaScript 中，一个新函数定义了它自己的this值。但是，该this值并不能直接在匿名函数内部使用。请参见以下示例：
function Car() {
this.speed = 0;
this.speedUp = function (speed) {
this.speed = speed;
setTimeout(function () {
console.log(this.speed);
}, 1000);
};
}
let car = new Car();
car.speedUp(50);输出：
undefined
在setTimeout()函数的匿名函数内部，this.speed是undefined，原因是匿名函数的this隐藏了speedUp()方法。
要解决此问题，请将this值分配给不会在匿名函数内隐藏的变量，如下所示：
function Car() {
this.speed = 0;
this.speedUp = function (speed) {
this.speed = speed;
let self = this;
setTimeout(function () {
console.log(self.speed);
}, 1000);
};
}
let car = new Car();
car.speedUp(50);输出：
50
箭头函数能获取封闭上下文的this值
与匿名函数不同，箭头函数会捕获封闭上下文的this值，而不用创建自己的this上下文。以下代码应按预期工作：
function Car() {
this.speed = 0;
this.speedUp = function (speed) {
this.speed = speed;
setTimeout(
() => console.log(this.speed),
1000);
};
}
let car = new Car();
car.speedUp(50);
输出：
50
总结
箭头函数在许多方面与传统函数不同，包括确定其作用域的方式和表达语法的方式。本文详细介绍了JS箭头函数=>与传统匿名函数处理this的不同方法，希望看了本文的你，对箭头函数和传统函数会有进一步的认识。
参考文章
- 站长推荐
