持续进步的同学都关注了“1024译站”
这是1024译站的第 90 篇文章
我们都知道，在 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(); // => undefinedmyEmptyFunction2(); // => 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对象、隐式返回值和类成员方法。箭头函数虽然简洁、方便，但也有自己的局限性，要分情况使用。
顺手点“在看”，每天早下班；转发加关注，共奔小康路~
本文分享自微信公众号 - 1024译站（trans1024）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
