为什么js引入箭头函数不显示(js箭头函数作用域)
导语：为什么 JS 引入箭头函数？
为什么 JavaScript 引入箭头函数表达式？为什么会变成现在这样？与旧方法相比有什么优势？
JavaScript 开发人员引入了箭头函数表达式，以便为定义函数提供更简洁和更具表现力的语法。箭头函数没有自己的“this”值，而是继承了周围上下文的“this”值。这使开发人员可以避免“this”关键字的问题并编写更简洁的代码。
与传统的函数语法相比，使用箭头函数有几个好处。一个好处是它们更简洁且更易于阅读，因为它们不需要“function”关键字或花括号。这可以使代码更具可读性和更容易理解，尤其是在处理复杂函数时。
箭头函数的另一个好处是它们可以帮助避免“this”关键字的问题。在传统的函数语法中，“this”关键字可能难以理解，并可能导致绑定和上下文问题。使用箭头函数，“this”值是从周围的上下文中继承的，这可以使其更易于理解和使用。
例如，考虑以下使用传统函数语法的代码：
const object = { value: 10, incrementValue: function () { setTimeout(function () { this.value += 1; }, 1000); },};在此示例中，setTimeout 函数中的“this”关键字将不引用“object”对象，而是引用全局对象。这可能会导致问题，因为“object”对象的“value”属性不会按预期递增。
当调用 setTimeout 函数时，函数内部的“this”关键字将引用全局对象，而不是“object”对象。结果，当代码试图增加“object”对象的“value”属性时，它将失败，因为“this”关键字不会引用“object”对象。相反，代码将在全局对象上创建一个新的“值”属性并递增它。这可能会导致混淆并难以理解代码的预期行为。
这种意外行为的另一个可能结果是代码将抛出错误。如果全局对象没有“值”属性，尝试增加它会导致错误。这会使调试和理解代码问题变得困难。
使用箭头函数语法的相同代码如下所示：
const object = { value: 10, incrementValue: function () { setTimeout(() => { this.value += 1; }, 1000); },};在此示例中，setTimeout 函数是使用箭头函数语法定义的。这意味着函数内的“this”值将从周围的上下文中继承。
因此，当调用 setTimeout 函数时，函数内部的“this”值将引用“object”对象。这允许代码按预期递增“object”对象的“value”属性。
代码的完整示例
const object1 = { value: 10, incrementValue: function () { console.log(&34;, this.value, &34;); setTimeout(() => { this.value += 1; console.log(&34;, this.value, &34;); }, 1000); console.log(&34;, this.value, &34;); },};object1.incrementValue();console.log(&34;);const object = { value: 10, incrementValue: function () { console.log(&34;, this.value, &34;); setTimeout(function () { this.value += 1; console.log(&34;, this.value, &34;); }, 1000); console.log(&34;, this.value, &34;); },};object.incrementValue();代码的输出
object1 10 beforeobject1 10 after but out of scoop======object 10 beforeobject 10 after but out of scoopHint: hit control+c anytime to enter REPL.object1 11 afterobject NaN after总的来说，箭头函数表达式的引入让 JavaScript 开发者更容易定义函数，写出更简洁、更具表现力的代码。
本文内容由小故整理编辑！