JavaScript箭头函数避坑指南：这4种场景请慎用

概述

随着ES6标准的引入，JavaScript的可用性迈上了新台阶，涌现出箭头函数、类等诸多特性，极大地提升了开发效率。

箭头函数被视为最具价值的特性之一，众多技术文章详细阐述了其上下文透明性及简洁的语法优势。

然而，任何技术特性都具有两面性。新特性的引入往往伴随着使用上的混乱，箭头函数便是其中之一，常被误用。本文将探讨几种不适合使用箭头函数的场景，建议在这些情况下回归传统的函数表达式或简写语法。同时需警惕过度追求代码简短而牺牲可读性的问题。

定义对象上的方法

在JavaScript中，方法是存储在对象属性中的函数。当调用该方法时，this关键字将指向该方法所属的对象。

对象字面量

由于箭头函数语法简洁，使用它来定义方法颇具吸引力，让我们尝试一下：


const calculate = {
  array: [1, 2, 3],
  sum: () => {
    console.log(this === window); // => true
    return this.array.reduce((result, item) => result + item);
  }
};
console.log(this === window); // => true
// Throws "TypeError: Cannot read property 'reduce' of undefined"
calculate.sum();

calculate.sum方法使用箭头函数定义。然而，调用calculate.sum()时会抛出TypeError，因为this.array为undefined。

当调用calculate对象上的sum()方法时，上下文依然指向window。这是因为箭头函数按词法作用域将上下文绑定到了window对象。

执行this.array等同于访问window.array，其值为undefined。

解决方法是使用常规函数表达式来定义方法。this的绑定发生在调用时，而非由封闭上下文决定，以下是修复后的版本：


const calculate = {  
  array: [1, 2, 3],
  sum() {
    console.log(this === calculate); // => true
    return this.array.reduce((result, item) => result + item);
  }
};
calculate.sum(); // => 6

由于sum是常规函数，在调用calculate.sum()时，this指向calculate对象。this.array即为数组引用，因此能正确计算元素之和：6。

对象原型

同样的规则也适用于在原型对象上定义方法。若使用箭头函数定义sayCatName方法，this将指向window。


function MyCat(name) {
  this.catName = name;
}
MyCat.prototype.sayCatName = () => {
  console.log(this === window); // => true
  return this.catName;
};
const cat = new MyCat('Mew');
cat.sayCatName(); // => undefined

采用传统方式定义函数表达式：


function MyCat(name) {
  this.catName = name;
}
MyCat.prototype.sayCatName = function() {
  console.log(this === cat); // => true
  return this.catName;
};
const cat = new MyCat('Mew');
cat.sayCatName(); // => 'Mew'

sayCatName作为常规函数，在作为方法调用时将上下文更改为cat对象：cat.sayCatName()。

动态上下文的回调函数

this在JS中是一个强大的特性，它允许根据调用函数的方式动态更改上下文。通常，上下文是调用发生的目标对象，这使得代码更加自然，仿佛该对象正在执行某些操作。

然而，箭头函数在声明时静态绑定上下文，无法动态改变。这种特性有利有弊，但在某些需要动态绑定的场景下并不适用。

在客户端编程中，将事件监听器附加到DOM元素是一项常见任务。事件触发处理程序函数，并将this作为目标元素。若此处使用箭头函数，则缺乏灵活性。

以下示例尝试为处理程序使用箭头函数：


const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerhtml = 'Clicked button';
});

在全局上下文中，this指向window。当发生单击事件时，浏览器尝试使用按钮上下文调用处理函数，但箭头函数不会更改其预定义的上下文。this.innerhtml相当于window.innerHTML，这没有实际意义。

必须应用函数表达式，该表达式允许根据目标元素动态更改this：


const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

当用户单击按钮时，处理程序函数中的this指向button。因此，this.innerHTML = 'Clicked button'能正确修改按钮文本以反映已单击状态。

调用构造函数

在构造调用中，this是新创建的对象。当执行new MyFunction()时，构造函数MyFunction的上下文是一个新对象：this instanceof MyFunction === true。

注意，箭头函数不能用作构造函数。JavaScript通过抛出异常隐式阻止这样做。

无论如何，this是来自封闭上下文的设置，而不是新创建的对象。换句话说，箭头函数作为构造函数调用没有意义，且语义模糊。

让我们看看如果尝试这样做会发生什么：


const Message = (text) => {
  this.text = text;
};
// Throws "TypeError: Message is not a constructor"
const helloMessage = new Message('Hello World!');

执行new Message('Hello World!')，其中Message是一个箭头函数，JavaScript抛出一个TypeError错误，Message不能用作构造函数。

上面的例子可以使用函数表达式来修复，这是创建构造函数的正确方法（包括函数声明）：


const Message = function(text) {
  this.text = text;
};
const helloMessage = new Message('Hello World!');

简写语法

箭头函数有一个很好的属性，它可以省略参数圆括号()、块大括号{}，如果函数主体只有一条语句，则隐式返回。这有助于编写非常短的函数。

原文作者的大学编程教授给学生一个有趣的任务：编写用C语言计算字符串长度的最短函数，这是学习和探索新语言的好方式。

然而，在实际应用程序中，许多开发人员都会阅读代码。最短的语法并不总是适合帮助你的同事即时了解该方法的用途。

在某种程度上，简写的函数变得难以阅读，所以尽量不要过度使用。让各位们看一个例子


const multiply = (a, b) => b === undefined ? b => a * b : a * b;
const double = multiply(2);
double(3);      // => 6
multiply(2, 3); // => 6

multiply返回两个数字的乘法结果或与第一个参数绑定的闭包，以便以后的乘法运算。

该函数运行良好，看起来很短。但从一开始就很难理解它是做什么的。

为了使其更具可读性，可以从箭头函数恢复可选花括号和return语句，或使用常规函数：


function multiply(a, b) {
  if (b === undefined) {
    return function(b) {
      return a * b;
    }
  }
  return a * b;
}
const double = multiply(2);
double(3);      // => 6
multiply(2, 3); // => 6

在简短和冗长之间找到一个平衡点是很好的，这样可以使代码更加直观。

总结

毫无疑问，箭头函数是一个很好的补充。当正确使用时，它会使前面必须使用.bind()或试图捕获上下文的地方变得简单，它还简化了代码。

某些情况下的优点会给其他情况带来不利。当需要动态上下文时，不能使用箭头函数：定义方法，使用构造函数创建对象，在处理事件时从this获取目标。

以上就是JS什么场景不适合箭头函数的详细内容，更多关于JS的资料请关注本站其它相关文章！

JS什么场景不适合箭头函数

概述