摘要：在需要?jiǎng)討B(tài)上下文的地方不能使用箭頭函數(shù)，使用構(gòu)造函數(shù)創(chuàng)建對象時(shí)不能使用箭頭函數(shù)等等。

作者：扉扉 （滬江web前端開發(fā)工程師）
本文原創(chuàng)翻譯，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。

看到你每天使用的編程語言在不斷進(jìn)化是一件令人開心的事情 。從錯(cuò)誤中學(xué)習(xí)，找到更好的實(shí)現(xiàn)方式，創(chuàng)造新的語法特性，語言就這樣一步一步地實(shí)現(xiàn)了版本更新。

這正是近幾年Javascript身上發(fā)生的事情 ，ECMAScript6 引入了： 箭頭函數(shù)，類以及其它特性，真的太棒了！

其中一個(gè)非常好用的箭頭函數(shù)，有許多文件介紹了了這個(gè)漂亮的語法糖，還具有透明上下文的作用（原文為 context transparency）, 如果你對于ES6還不熟悉，請先閱讀箭頭函數(shù)的一些入門文章。

凡事都有兩面性，新的特性往往也會(huì)帶來新的困擾, 比如對箭頭函數(shù)的誤用。

這篇文章通過實(shí)際使用場景帶你了解在一些特定情況下到底是應(yīng)該使用傳統(tǒng)的函數(shù)，還是該使用更簡潔的箭頭函數(shù)。

在javascript中，方法可以做為一個(gè)對象的屬性，當(dāng)調(diào)用這個(gè)方法時(shí)， this 指向這個(gè)方法所屬的對象；

既然箭頭函數(shù)只是一個(gè)語法糖，那我們來嘗試一下使用箭頭函數(shù)做為一個(gè)對象的方法會(huì)發(fā)生什么：

var 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使用箭頭函數(shù)來定義，但是調(diào)用 calculate.sum() 時(shí)出現(xiàn)了異常。因?yàn)楫?dāng)執(zhí)行sum的時(shí)候上下文仍然是window，這是因?yàn)榧^函數(shù)已經(jīng)綁定了window做為上下文。

執(zhí)行this.array 等同于 window.array ,當(dāng)然是 undefined

解決辦法就是不要在對象的方法上使用箭頭函數(shù)短語法，這樣this關(guān)鍵字會(huì)在調(diào)用時(shí)決定，而不是早早綁定在閉合的上下文中， 讓我們看一下具體代碼：

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

對象原型

同樣的規(guī)則也適用于給對象prototype原型上定義方法：

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

使用傳統(tǒng)方式即可正常工作：

function MyCat(name) {  
  this.catName = name;
}
MyCat.prototype.sayCatName = function() {  
  console.log(this === cat); // => true
  returnthis.catName;
};
var cat = new MyCat("Mew");  
cat.sayCatName(); // => "Mew" 

this是js中非常強(qiáng)大的特點(diǎn)，他讓函數(shù)可以根據(jù)其調(diào)用方式動(dòng)態(tài)的改變上下文，然后箭頭函數(shù)直接在聲明時(shí)就綁定了this對象，所以不再是動(dòng)態(tài)的。

在客戶端，在dom元素上綁定事件監(jiān)聽函數(shù)是非常普遍的行為，在dom事件被觸發(fā)時(shí)，回調(diào)函數(shù)中的this指向該dom,可當(dāng)我們使用箭頭函數(shù)時(shí)：

button.addEventListener("click", () => {  
    console.log(this === window); // => true
    this.innerHTML = "Clicked button";
});

因?yàn)檫@個(gè)回調(diào)的箭頭函數(shù)是在全局上下文中被定義的，所以他的this是window。所以當(dāng)this是由目標(biāo)對象決定時(shí)，我們應(yīng)該使用函數(shù)表達(dá)式：

button.addEventListener("click", function() {  
    console.log(this === button); // => true
    this.innerHTML = "Clicked button";
});

當(dāng)函數(shù)做為構(gòu)造函數(shù)執(zhí)行時(shí) new MyFunction()，this指向新創(chuàng)建的對象實(shí)例:

this instanceOf MyFunction === true

需要注意的是，構(gòu)造函數(shù)不能使用箭頭函數(shù)，如果這樣做會(huì)拋出異常。

因?yàn)槭褂眉^函數(shù)后this會(huì)指定閉合的當(dāng)前上下文，而當(dāng)函數(shù)做為構(gòu)造器的時(shí)候，this又會(huì)指向生成的實(shí)例， 這個(gè)造成歧義。

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

我們都知道使用函數(shù)表達(dá)式即可正常：

var Message = function(text) {  
  this.text = text;
};
var helloMessage = new Message("Hello World!");  
console.log(helloMessage.text); // => "Hello World!"  

箭頭函數(shù)可以讓語句寫的非常的簡潔，參數(shù)只有一個(gè)時(shí)可以省略()，函數(shù)體只有一句話可以省略{}，如果返回值是一個(gè)表達(dá)式還甚至還可以省略return！

我的大學(xué)老師曾給我們布置了一道有趣的作業(yè)： 使用C語言來編寫一個(gè)計(jì)算字符串長度的函數(shù)，函數(shù)要盡可能的短，這是一個(gè)很好的方法去學(xué)習(xí)一門新的語言。

不過在真實(shí)生活中，代碼要被其它開發(fā)者閱讀，超短的語法有時(shí)會(huì)讓你的同事陷入難以理解中。上代碼：

let double = multiply(2);
 
double(3); // => 6
 
multiply(2, 3); // =>6

這個(gè)函數(shù)的作用就是當(dāng)只有一個(gè)參數(shù) a 時(shí)，返回接受一個(gè)參數(shù) b 返回 a * b 的函數(shù)，接收兩個(gè)參數(shù)時(shí)直接返回乘積，這個(gè)函數(shù)可以很好的工作并且看起很簡潔，但是從第一眼看去并不是很好理解。

為了讓這個(gè)函數(shù)更好的讓人理解，我們可以為這個(gè)箭頭函數(shù)加一對花括號(hào)，并加上 return 語句，或者直接使用函數(shù)表達(dá)式：

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

怎么樣是不是好理解多了？

如何平衡簡潔與易理解也是使用箭頭函數(shù)需要注意的地方。

毫無疑問，箭頭函數(shù)是一個(gè)很棒的特性。以前我們使用bind()函數(shù)或者需要固定上下文的地方現(xiàn)在使用箭頭函數(shù)會(huì)讓代碼更加簡潔。

但有一些情況下，使用箭頭函數(shù)也有一些不便利。在需要?jiǎng)討B(tài)上下文的地方不能使用箭頭函數(shù)，使用構(gòu)造函數(shù)創(chuàng)建對象時(shí)不能使用箭頭函數(shù)等等。除去文中列舉不適合使用的情況下，盡情地使用箭頭函數(shù)吧。

原文地址：https://rainsoft.io/when-not-...

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。