lobito Asked: 2020-12-26 14:09:29 +0800 CST 2020-12-26 14:09:29 +0800 CST 2020-12-26 14:09:29 +0800 CST 何时使用箭头函数而不是常用函数? 772 何时在 JavaScript 中使用箭头函数? () => { console.log('test'); } function() { console.log('test'); } javascript 2 Answers Voted Best Answer enrique7mc 2020-12-26T15:58:27+08:002020-12-26T15:58:27+08:00 ES6 中引入的这种新的函数语法在大多数情况下在功能上等同于普通函数,但重要的是要注意以下差异: 的值this,普通函数将 的值捕获this为全局对象(或undefined在严格模式下): function Persona() { this.edad = 0; setInterval(function crecer() { this.edad++; // error lógico, no se refieren a la misma variable }, 1000); } 而箭头函数从直接外部范围捕获该值: function Persona(){ this.edad = 0; setInterval(() => { this.edad++; // correcto, this se refiere a una instancia de Persona }, 1000); } 参数,普通函数可以访问一个名为的特殊变量arguments,该变量类似于数组,包含对传递给函数的参数的引用: function foo(arg1, arg2) { console.log(arguments[0]); } foo("hola", "mundo"); // imprime "hola" 在箭头函数中,arguments它指的是外部范围内undefined的变量,如果该变量不存在,则其值为: var arguments = 42; var arr = () => arguments; arr(); // 42 尽管如此,可以使用其余参数实现类似的功能: var foo = (...args) => {console.log(args[0])}; foo("hola", "mundo"); // Imprime "hola" 如果箭头函数只返回一行代码,则可以省略语句中的括号和 return 关键字。这告诉箭头函数返回语句。 const double = (num) => num * 2; 关键字yield,这个保留字也是在 ES6 中引入的,用于生成器函数,但不能用于箭头函数。 箭头函数在用作回调时提供了更优雅和紧凑的语法,因此它们可以在几乎与普通函数相同的情况下使用,并且可能会在未来版本的 EcmaScript 中被首选,请注意上述差异,以免犯错误。 rnrneverdies 2020-12-27T06:28:19+08:002020-12-27T06:28:19+08:00 箭头函数不仅仅是使普通函数声明更容易/优雅的语法糖。两者之间存在相当大的差异,可能导致程序无法按预期工作,并且在许多情况下它们不可互换。 所以我想整个问题是什么时候使用它们,什么时候不使用它们? 何时使用箭头函数? 简化纯函数的语法。 在下一个块中,它们是可互换的,因为它们是纯函数(它们的结果不依赖于外部变量)。在性能方面,它们实际上是相同的。 // declaracion de funcion var nombres = personas.map(function(p){ return p.nombre }); // funcion flecha, este es un buen caso de uso var nombres = personas.map(p => p.nombre); 当您希望箭头函数在与包含函数相同的词法范围内执行时: 箭头函数被评估为包含它们的词法范围的一部分,因此this它们arguments不是箭头函数的正确实例,而是包含函数的实例。这些类型的函数不可互换,如果您想从一种语法切换到另一种语法,则必须重写部分函数体。 考虑另一个块: // ECMAScript 5, usando una declaración de función. function contadorDeSegundos() { var that = this; this.contar = 0; setInterval(function() { that.contar++; }, 1000); } /// ECMAScript 2015, con arrow functions function contadorDeSegundos() { this.contar = 0; setInterval(() => { this.contar++ }, 1000); } 正如您在这里再次看到的那样,代码更紧凑,但行为this却大不相同。 什么时候不使用箭头函数? 当您需要动态参数时: 如前所述,箭头函数不公开 object arguments,因此如果您需要访问它,则不能使用它们。请注意,如果您在另一个函数中声明箭头函数,您将访问arguments包含函数之一(如果有的话)。这就是为什么说箭头函数使用词法参数的原因。也就是说,他们看到的arguments是词法范围内的对象。 在全球范围内: var f = () => { console.log(arguments.length) } f(); // produce: Uncaught ReferenceError: arguments is not defined(…) var f2 = function() { console.log(arguments.length) } f2(); // produce: 0 在生成器函数中: yield箭头函数中不允许使用该关键字。这些函数不能是生成器函数(但是它们可以包含生成器函数)。
ES6 中引入的这种新的函数语法在大多数情况下在功能上等同于普通函数,但重要的是要注意以下差异:
的值
this
,普通函数将 的值捕获this
为全局对象(或undefined
在严格模式下):而箭头函数从直接外部范围捕获该值:
参数,普通函数可以访问一个名为的特殊变量
arguments
,该变量类似于数组,包含对传递给函数的参数的引用:在箭头函数中,
arguments
它指的是外部范围内undefined
的变量,如果该变量不存在,则其值为:尽管如此,可以使用其余参数实现类似的功能:
如果箭头函数只返回一行代码,则可以省略语句中的括号和 return 关键字。这告诉箭头函数返回语句。
关键字
yield
,这个保留字也是在 ES6 中引入的,用于生成器函数,但不能用于箭头函数。箭头函数在用作回调时提供了更优雅和紧凑的语法,因此它们可以在几乎与普通函数相同的情况下使用,并且可能会在未来版本的 EcmaScript 中被首选,请注意上述差异,以免犯错误。
箭头函数不仅仅是使普通函数声明更容易/优雅的语法糖。两者之间存在相当大的差异,可能导致程序无法按预期工作,并且在许多情况下它们不可互换。
所以我想整个问题是什么时候使用它们,什么时候不使用它们?
何时使用箭头函数?
简化纯函数的语法。
在下一个块中,它们是可互换的,因为它们是纯函数(它们的结果不依赖于外部变量)。在性能方面,它们实际上是相同的。
当您希望箭头函数在与包含函数相同的词法范围内执行时:
箭头函数被评估为包含它们的词法范围的一部分,因此
this
它们arguments
不是箭头函数的正确实例,而是包含函数的实例。这些类型的函数不可互换,如果您想从一种语法切换到另一种语法,则必须重写部分函数体。考虑另一个块:
正如您在这里再次看到的那样,代码更紧凑,但行为
this
却大不相同。什么时候不使用箭头函数?
当您需要动态参数时:
如前所述,箭头函数不公开 object
arguments
,因此如果您需要访问它,则不能使用它们。请注意,如果您在另一个函数中声明箭头函数,您将访问arguments
包含函数之一(如果有的话)。这就是为什么说箭头函数使用词法参数的原因。也就是说,他们看到的arguments
是词法范围内的对象。在全球范围内:
在生成器函数中:
yield
箭头函数中不允许使用该关键字。这些函数不能是生成器函数(但是它们可以包含生成器函数)。