## 一、箭頭函數 &emsp;&emsp;箭頭函數（Arrow Function）是ES6提供的一個很實用的新功能，與普通函數相比，不但在語法上更為簡潔，而且在使用時也有更多注意點，下面列出了其中的三點： &emsp;&emsp;（1）由于不能作為構造函數，因此也就沒有元屬性（new.target）和原型（prototype屬性）。 &emsp;&emsp;（2）函數體內不存在arguments、super和this，即沒有為它們綁定值。 &emsp;&emsp;（3）當需要包含多個參數時，它們的名稱不可重復。 **1）語法** &emsp;&emsp;箭頭函數由三部分組成：箭頭（=>）、參數和函數體，省略了名稱和function關鍵字，如下代碼所示。注意，參數和箭頭要在一行中，不能換行，并且沒有箭頭函數聲明，只有箭頭函數表達式。 ~~~ var arrow1 = (name, age) => { return name; }; ~~~ &emsp;&emsp;如果函數體中只包含一個表達式，那么可以像下面這樣省略花括號和return關鍵字。 ~~~ var arrow2 = (name, age) => name; ~~~ &emsp;&emsp;當返回值是一個對象字面量時，需要為其包裹圓括號（如下代碼所示），以免將花括號解析成代碼塊而引起語法錯誤。 ~~~ var arrow3 = (name, age) => ({name: name, age: age}); ~~~ &emsp;&emsp;如果只有一個參數，那么可以省略包裹參數的圓括號。 ~~~ var arrow4 = name => name; ~~~ &emsp;&emsp;在參數缺失的情況下，還是需要一對空的圓括號占位。 ~~~ var arrow5 = () => "strick"; ~~~ &emsp;&emsp;箭頭函數也支持ES6新增的參數解構、剩余參數和默認參數，依次如下所示。 ~~~ var arrow6 = ({name, age}) => name + age; var arrow7 = (name, ...args) => name + args[0]; var arrow8 = (name = "strick") => name; ~~~ &emsp;&emsp;箭頭函數很適合那些只需做簡短計算的函數，例如數組排序的回調函數。下面代碼的第一段采用了普通的匿名函數，第二段采用了箭頭函數，可以看出第二段的代碼來得清晰簡潔，更有吸引力。 ~~~ var list1 = [1, 2, 3].sort(function(a, b) { return a < b; }); var list2 = [1, 2, 3].sort((a, b) => a < b); ~~~ &emsp;&emsp;雖然箭頭不是運算符，但是當把它與其它運算符結合的時候，需要將其用圓括號隔離，否則會引起語法錯誤。 ~~~ var operator1 = 0 || () => 2; //語法錯誤 var operator2 = 0 || (() => 2); 　//() => 2 var operator3 = 0 || (() => 2)(); 　//2 ~~~ &emsp;&emsp;上面代碼的第一句是錯誤的寫法；第二句中的箭頭函數默認是不會自動執行的，因此或運算的結果是函數本身；第三句在箭頭函數的末尾又加了一對圓括號，從而創建了立即執行函數表達式（IIFE），運算后的結果是2。 &emsp;&emsp;普通函數能創建兩種即時函數（如下代碼所示），區別就是末尾的那對圓括號的位置，相對于函數是在內還是在外，而箭頭函數只支持第一種寫法的即時函數。 ~~~ (function() {})(); //第一種 (function() {}()); //第二種 ~~~ **2）this** &emsp;&emsp;普通函數都會包含一個this對象，而this綁定的對象只取決于函數的調用方式。在下面的代碼中，有兩個函數，分別是構造函數people()以及定時器的回調函數。 ~~~ function people() { var self = this; this.age = 28; setTimeout(function() { this.age; //undefined self.age; //28 }, 100); } new people(); ~~~ &emsp;&emsp;people()中的this通過構造函數綁定，指向了新創建的目標對象。而回調函數中的this通過默認綁定，指向了全局對象（window）。由于age屬性只存在于構造函數中，因此在全局對象中是訪問不到的。如果要在定時器的回調函數中訪問age屬性，那么需要為this賦予一個別名（例如代碼中的self）。 &emsp;&emsp;前面曾提到過，箭頭函數中不包含this，不過在其內部還是能使用this的，這個this是從上一層的作用域中繼承而來的。下面將構造函數people()改造成animal()，定時器采用箭頭函數。 ~~~ function animal() { this.age = 28; setTimeout(() => { this.age; //28 }, 100); } new animal(); ~~~ &emsp;&emsp;此時，箭頭函數中的this指向的是新創建的目標對象，因此能成功訪問到age屬性。 &emsp;&emsp;普通函數可以通過bind()、apply()或call()方法來更改this的指向，但這不適用于箭頭函數，如下代碼所示。還是以animal()為例，在箭頭函數上調用call()，雖然第一個參數傳入了全局對象，但依然無法改變this的指向。 ~~~ function animal() { this.age = 28; setTimeout((() => { this.age; //28 }).call(window), 100); } new animal(); ~~~ ## 二、尾調用優化 &emsp;&emsp;尾調用（Tail Call）是指函數中的最后一步會調用一個函數，并將其結果作為返回值，就像下面這兩個函數。 ~~~ function tail1() { return digit(28); } function tail2(name) { if (name == "strick") return digit(28); return digit(30); } ~~~ &emsp;&emsp;如果在最后一步調用的是自身，那么這種情況可稱為尾遞歸（Tail Recursion）。下面是個會無限遞歸的函數，只是為了做演示用。 ~~~ function recursion() { return recursion(); } ~~~ &emsp;&emsp;尾調用不是一個新語法，而是一條組織代碼的約束。下面代碼里的三種情況就都不符合尾調用的要求。 ~~~ function error1() { digit(28); } function error2() { return digit(28) + 1; } function error3() { var number = digit(28); return number; } ~~~ &emsp;&emsp;error1()函數缺少return關鍵字；error2()函數在調用digit(28)之后還額外多做了一次加法運算；error3()函數沒有直接返回digit(28)的結果，而是先賦給一個變量，再返回。 &emsp;&emsp;接下來為了能更好的理解尾調用優化，會先講解調用棧的基礎知識。 **1）調用棧** &emsp;&emsp;簡單地說，調用棧（Call Stack）是一種記錄函數地址的棧，當調用一個函數時，會在調用棧的頂端添加一個新的棧幀（Stack Frame），即入棧；而當函數執行完畢后，就會將其移出調用棧，即出棧。 &emsp;&emsp;正常情況下，調用棧能夠保持有進有出的平衡，但當函數的調用次數激增時（例如過多的遞歸），調用棧就會消耗大量內存，甚至占滿整個內存空間，從而導致棧溢出（Stack Overflow）。不過值得慶幸的是，現代瀏覽器都不會因為棧溢出而奔潰，其內部已做了限制，例如Chrome僅僅會給出“RangeError: Maximum call stack size exceeded”的錯誤警告。 **2）尾調用優化** &emsp;&emsp;為了控制棧幀的數量，減少內存空間的使用，引入了尾調用優化（Tail Call Optimization，TCO）。這也不是一個新語法，只是一種空間上的優化，并且所有的工作都由JavaScript引擎（例如V8、SpiderMonkey等）代勞了。 &emsp;&emsp;ES6中的TCO只有在嚴格模式下才能開啟，它的原理就是不需要記住尾調用所處函數的地址。下面是一個檢測字符串回文的函數，當開啟TCO時，由于函數內需要的值已通過參數的形式傳遞進來（即不依賴函數外部的變量），因此每次遞歸都會覆蓋前一次函數調用的棧幀，即調用棧的數量會保持恒定。 ~~~ "use strict"; function palindrome(str) { if (str.length <= 1) return true; if (str[0] != str[str.length - 1]) return false; return palindrome(str.substr(1, str.length - 2)); } ~~~ &emsp;&emsp;雖然TCO的表現很搶眼，但很遺憾，目前除了Safrai之外，大部分瀏覽器暫不支持（可參考[ES6瀏覽器兼容性](http://kangax.github.io/compat-table/es6/)），因此在這些瀏覽器中還享受不到TCO帶來的性能提升。 ***** > 原文出處： [博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html) [知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。