ES6 箭头函数大起底：熟知这几个特点让你少踩很多坑

作者简介：
李中凯
八年多工作经验 前端负责人，
擅长JavaScript/Vue。
掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公众号：1024译站

 

---

我们都知道，在 JavaScript 里定义函数有多种方式。最常见的是用function关键字：

// 函数声明
function sayHi(someone) {
  return `Hello, ${someone}!`;
}

// 函数表达式
const sayHi = function(someone) {
  return `Hello, ${someone}`;
}

上面的函数声明和函数表达式，我们姑且称之为常规函数。

还有就是 ES6 新增的箭头函数语法：

const sayHi = (someone) => {
  return `Hello, ${someone}!`;
}

既然常规形式和箭头语法都能定义函数，我们该如何选择呢？

这篇文章总结了它们之间的关键区别，下次你选择的时候心里就有数了。 

1this 指向

常规函数里的 this （即执行上下文）指向是动态的。这也是面试常考问题之一。动态的意思就是，this的值取决于函数本身如何被调用。JavaScript 里调用常规函数通常有 4 种方式。

第一种是最简单的直接调用，this指向全局对象（在严格模式下是undefined）：

function myFunction() {
  console.log(this);
}

// 简单调用
myFunction(); // 全局对象 (window)

第二种是作为对象方法调用，this指向方法所属对象：

const myObject = {
  method() {
    console.log(this);
  }
};
// 对象方法调用
myObject.method(); //  "myObject"

第三种是动态改变执行上下文的方式调用，即通过.call和.apply，this指向第一个参数代表的上下文对象：

function myFunction() {
  console.log(this);
}

const myContext = { value: 'A' };

myFunction.call(myContext);  // { value: 'A' }
myFunction.apply(myContext); // { value: 'A' }

第四种是作为构造函数调用，this指向通过new关键字创建的实例：

function MyFunction() {
  console.log(this);
}

new MyFunction(); //  MyFunction 的实例

箭头函数的this跟常规函数的规则完全不同。无论用什么方式、在哪调用箭头函数，里面的this永远等于外层函数的this。换句话说，箭头函数的this是由词法决定的，它没有定义自己的执行上下文。

下面的例子中， myMethod()就是箭头函数callback()的外层函数：

const myObject = {
  myMethod(items) {
    console.log(this); //  "myObject"   
    const callback = () => {
      console.log(this); // "myObject"  
    };
    items.forEach(callback);
  }
};

myObject.myMethod([1, 2, 3]); 

因此，箭头函数里的 this 等于外层函数的this，也就是myObject。

由词法决定this的指向，是箭头函数非常实用的特性之一。在方法里使用回调函数时就特别方便，this指向很明确，再也不用写const self = this或者callback.bind(this)这种啰嗦的代码了。

2构造函数

常规函数可作为类的构造函数，用于创建实例：

function Cat(color) {
  this.color = color;
}

const blackCat = new Car('black');
blackCat instanceof Cat; // => true

前面说了，箭头函数的this是由词法决定的，没有自己的指向上下文，因此不能用作构造函数。如果对箭头函数使用new关键字，会报错：

const Cat = (color) => {
  this.color = color;
};

const blackCat = new Cat('black'); // TypeError: Cat is not a constructor 

3arguments 对象

常规函数中，arguments是一个类数组对象，包含了函数在执行时接收到的参数列表。

例如：

function myFunction() {
  console.log(arguments);
}

myFunction(1, 2); // { 0: 1, 1: 2}

而箭头函数中没有定义 arguments 关键字，跟this一样，也是由词法决定的，也就是会解析到外层函数的 arguments 。

function myRegularFunction() {
  const myArrowFunction = () => {    console.log(arguments);  }
  myArrowFunction('c', 'd');
}

myRegularFunction('a', 'b'); // { 0: 'a', 1: 'b' }

如果你想获取箭头函数自己的参数对象，可以用 ES6 的剩余参数（...操作符）特性：

function myRegularFunction() {
  const myArrowFunction = (...args) => {    console.log(args);  }
  myArrowFunction('c', 'd');
}

myRegularFunction('a', 'b'); // { 0: 'c', 1: 'd' }

4隐式返回值

对于常规函数，需要用 return语句返回一个值：

function myFunction() {
  return 42;
}

myFunction(); // => 42

如果没有return语句，或者return语句后面没有带表达式，常规函数会隐式返回undefine：

function myEmptyFunction() {
  42;
}

function myEmptyFunction2() {
  42;
  return;
}

myEmptyFunction();  // => undefined
myEmptyFunction2(); // => undefined

箭头函数除了可以用常规函数一样的方式返回值之外，还有一个独有的特性：如果箭头函数只包含一个表达式，那么就可以省略函数体的花括号和return语句，并且这个表达式会被当作返回值。

const increment = (num) => num + 1;

increment(41); // => 4

5成员方法

我们通常用常规函数来定义类的成员方法：

class Coder {
  constructor(nickName) {
    this.nickName = nickName;
  }

  logName() {    console.log(this.nickName);  }
}

const coder = new Coder('Kayson');

但有时候我们需要把成员方法当成回调函数来用，比如 setTimeout()回调或者事件监听器。这个时候，如果要访问当前实例 this 就会有问题了。

比如，我们把 logName() 方法当作 setTimeout()的回调函数：

setTimeout(coder.logName, 1000);
// 1 秒后输出 "undefined"

定时器在1秒后执行实例的方法 logName，这个时候方法已经跟实例分离了，this不再是实例，而是全局对象，全局对象上没有nickName属性，因此输出undefined。

怎么办呢？可以用函数上的bind方法，指定函数的执行上下文为当前实例：

setTimeout(coder.logName.bind(coder), 1000);
// 1 秒后输出 "Kayson"

手动绑定this执行上下文有点麻烦，每个方法都需要这么做。有没有更好的办法呢？答案你可能猜到了，用箭头函数作为成员方法。这是 TC39 Class 字段提案的内容，目前处于 stage 3 阶段。

箭头函数里的this直接指向类的实例对象了：

class Coder {
  constructor(nickName) {
    this.nickName= nickName;
  }

  logName = () => {    console.log(this.nickName);  }
}

const coder = new Coder('Kayson');

现在coder.logName作为回调函数不再需要手动绑定this执行上下文，它总是指向当前类的实例：

setTimeout(coder.logName, 1000);
// 1 秒后输出 "Kayson"

总结

本文总结了箭头函数和常规函数 5 个方面的区别，分别是this指向、构造函数、arguments对象、隐式返回值和类成员方法。箭头函数虽然简洁、方便，但也有自己的局限性，要分情况使用。

---

 

作者简介：
李中凯
八年多工作经验 前端负责人，
擅长JavaScript/Vue。
掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公众号：1024译站

本文已经获得李中凯老师授权转发，其他人若有兴趣转载，请直接联系作者授权。