1函數參數的默認值
基本用法
在ES6之前，不能直接為函數的參數指定默認值，只能采用變通的方法。
function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World
上面代碼檢查函數log的參數y有沒有賦值，如果沒有，則指定默認值為World。這種寫法的缺點在於，如果參數y賦值了，但是對應的布爾值為false，則該賦值不起作用。就像上面代碼的最后一行，參數y等於空字符，結果被改為默認值。
為了避免這個問題，通常需要先判斷一下參數y是否被賦值，如果沒有，再等於默認值。
if (typeof y === 'undefined') { y = 'World'; }
ES6允許為函數的參數設置默認值，即直接寫在參數定義的后面。
function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello
可以看到，ES6的寫法比ES5簡潔許多，而且非常自然。下面是另一個例子。
function Point(x = 0, y = 0) { this.x = x; this.y = y; } var p = new Point(); p // { x: 0, y: 0 }
除了簡潔，ES6的寫法還有兩個好處：首先，閱讀代碼的人，可以立刻意識到哪些參數是可以省略的，不用查看函數體或文檔；其次，有利於將來的代碼優化，即使未來的版本在對外接口中，徹底拿掉這個參數，也不會導致以前的代碼無法運行。
參數變量是默認聲明的，所以不能用let或const再次聲明。
function foo(x = 5) { let x = 1; // error const x = 2; // error }
上面代碼中，參數變量x是默認聲明的，在函數體中，不能用let或const再次聲明，否則會報錯。
與解構賦值默認值結合使用
參數默認值可以與解構賦值的默認值，結合起來使用。
function foo({x, y = 5}) { console.log(x, y); } foo({}) // undefined, 5 foo({x: 1}) // 1, 5 foo({x: 1, y: 2}) // 1, 2 foo() // TypeError: Cannot read property 'x' of undefined
上面代碼使用了對象的解構賦值默認值，而沒有使用函數參數的默認值。只有當函數foo的參數是一個對象時，變量x和y才會通過解構賦值而生成。如果函數foo調用時參數不是對象，變量x和y就不會生成，從而報錯。如果參數對象沒有y屬性，y的默認值5才會生效。
下面是另一個對象的解構賦值默認值的例子。
function fetch(url, { body = '', method = 'GET', headers = {} }) { console.log(method); } fetch('http://example.com', {}) // "GET" fetch('http://example.com') // 報錯
上面代碼中，如果函數fetch的第二個參數是一個對象，就可以為它的三個屬性設置默認值。
上面的寫法不能省略第二個參數，如果結合函數參數的默認值，就可以省略第二個參數。這時，就出現了雙重默認值。
function fetch(url, { method = 'GET' } = {}) { console.log(method); } fetch('http://example.com') // "GET"
上面代碼中，函數fetch沒有第二個參數時，函數參數的默認值就會生效，然后才是解構賦值的默認值生效，變量method才會取到默認值GET。
再請問下面兩種寫法有什么差別？
// 寫法一 function m1({x = 0, y = 0} = {}) { return [x, y]; } // 寫法二 function m2({x, y} = { x: 0, y: 0 }) { return [x, y]; }
上面兩種寫法都對函數的參數設定了默認值，區別是寫法一函數參數的默認值是空對象，但是設置了對象解構賦值的默認值；寫法二函數參數的默認值是一個有具體屬性的對象，但是沒有設置對象解構賦值的默認值。
// 函數沒有參數的情況 m1() // [0, 0] m2() // [0, 0] // x和y都有值的情況 m1({x: 3, y: 8}) // [3, 8] m2({x: 3, y: 8}) // [3, 8] // x有值，y無值的情況 m1({x: 3}) // [3, 0] m2({x: 3}) // [3, undefined] // x和y都無值的情況 m1({}) // [0, 0]; m2({}) // [undefined, undefined] m1({z: 3}) // [0, 0] m2({z: 3}) // [undefined, undefined]
參數默認值的位置
通常情況下，定義了默認值的參數，應該是函數的尾參數。因為這樣比較容易看出來，到底省略了哪些參數。如果非尾部的參數設置默認值，實際上這個參數是沒法省略的。
// 例一 function f(x = 1, y) { return [x, y]; } f() // [1, undefined] f(2) // [2, undefined]) f(, 1) // 報錯 f(undefined, 1) // [1, 1] // 例二 function f(x, y = 5, z) { return [x, y, z]; } f() // [undefined, 5, undefined] f(1) // [1, 5, undefined] f(1, ,2) // 報錯 f(1, undefined, 2) // [1, 5, 2]
上面代碼中，有默認值的參數都不是尾參數。這時，無法只省略該參數，而不省略它后面的參數，除非顯式輸入undefined。
如果傳入undefined，將觸發該參數等於默認值，null則沒有這個效果。
function foo(x = 5, y = 6) { console.log(x, y); } foo(undefined, null) // 5 null
上面代碼中，x參數對應undefined，結果觸發了默認值，y參數等於null，就沒有觸發默認值。
函數的length屬性
指定了默認值以后，函數的length屬性，將返回沒有指定默認值的參數個數。也就是說，指定了默認值后，length屬性將失真。
(function (a) {}).length // 1 (function (a = 5) {}).length // 0 (function (a, b, c = 5) {}).length // 2
上面代碼中，length屬性的返回值，等於函數的參數個數減去指定了默認值的參數個數。比如，上面最后一個函數，定義了3個參數，其中有一個參數c指定了默認值，因此length屬性等於3減去1，最后得到2。
這是因為length屬性的含義是，該函數預期傳入的參數個數。某個參數指定默認值以后，預期傳入的參數個數就不包括這個參數了。同理，rest參數也不會計入length屬性。
(function(...args) {}).length // 0
如果設置了默認值的參數不是尾參數，那么length屬性也不再計入后面的參數了。
(function (a = 0, b, c) {}).length // 0 (function (a, b = 1, c) {}).length // 1
作用域
一個需要注意的地方是，如果參數默認值是一個變量，則該變量所處的作用域，與其他變量的作用域規則是一樣的，即先是當前函數的作用域，然后才是全局作用域。
var x = 1; function f(x, y = x) { console.log(y); } f(2) // 2
上面代碼中，參數y的默認值等於x。調用時，由於函數作用域內部的變量x已經生成，所以y等於參數x，而不是全局變量x。
如果調用時，函數作用域內部的變量x沒有生成，結果就會不一樣。
let x = 1; function f(y = x) { let x = 2; console.log(y); } f() // 1
上面代碼中，函數調用時，y的默認值變量x尚未在函數內部生成，所以x指向全局變量。
如果此時，全局變量x不存在，就會報錯。
function f(y = x) { let x = 2; console.log(y); } f() // ReferenceError: x is not defined
下面這樣寫，也會報錯。
var x = 1; function foo(x = x) { // ... } foo() // ReferenceError: x is not defined
上面代碼中，函數foo的參數x的默認值也是x。這時，默認值x的作用域是函數作用域，而不是全局作用域。由於在函數作用域中，存在變量x，但是默認值在x賦值之前先執行了，所以這時屬於暫時性死區（參見《let和const命令》一章），任何對x的操作都會報錯。
如果參數的默認值是一個函數，該函數的作用域是其聲明時所在的作用域。請看下面的例子。
let foo = 'outer'; function bar(func = x => foo) { let foo = 'inner'; console.log(func()); // outer } bar();
上面代碼中，函數bar的參數func的默認值是一個匿名函數，返回值為變量foo。這個匿名函數聲明時，bar函數的作用域還沒有形成，所以匿名函數里面的foo指向外層作用域的foo，輸出outer。
如果寫成下面這樣，就會報錯。
function bar(func = () => foo) { let foo = 'inner'; console.log(func()); } bar() // ReferenceError: foo is not defined
上面代碼中，匿名函數里面的foo指向函數外層，但是函數外層並沒有聲明foo，所以就報錯了。
下面是一個更復雜的例子。
var x = 1; function foo(x, y = function() { x = 2; }) { var x = 3; y(); console.log(x); } foo() // 3
上面代碼中，函數foo的參數y的默認值是一個匿名函數。函數foo調用時，它的參數x的值為undefined，所以y函數內部的x一開始是undefined，后來被重新賦值2。但是，函數foo內部重新聲明了一個x，值為3，這兩個x是不一樣的，互相不產生影響，因此最后輸出3。
如果將var x = 3的var去除，兩個x就是一樣的，最后輸出的就是2。
var x = 1; function foo(x, y = function() { x = 2; }) { x = 3; y(); console.log(x); } foo() // 2
應用
利用參數默認值，可以指定某一個參數不得省略，如果省略就拋出一個錯誤。
function throwIfMissing() { throw new Error('Missing parameter'); } function foo(mustBeProvided = throwIfMissing()) { return mustBeProvided; } foo() // Error: Missing parameter
上面代碼的foo函數，如果調用的時候沒有參數，就會調用默認值throwIfMissing函數，從而拋出一個錯誤。
從上面代碼還可以看到，參數mustBeProvided的默認值等於throwIfMissing函數的運行結果（即函數名之后有一對圓括號），這表明參數的默認值不是在定義時執行，而是在運行時執行（即如果參數已經賦值，默認值中的函數就不會運行），這與python語言不一樣。
另外，可以將參數默認值設為undefined，表明這個參數是可以省略的。
function foo(optional = undefined) { ··· }
3 rest參數
ES6引入rest參數（形式為“...變量名”），用於獲取函數的多余參數，這樣就不需要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多余的參數放入數組中。
function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
上面代碼的add函數是一個求和函數，利用rest參數，可以向該函數傳入任意數目的參數。
下面是一個rest參數代替arguments變量的例子。
// arguments變量的寫法 function sortNumbers() { return Array.prototype.slice.call(arguments).sort(); } // rest參數的寫法 const sortNumbers = (...numbers) => numbers.sort();
上面代碼的兩種寫法，比較后可以發現，rest參數的寫法更自然也更簡潔。
rest參數中的變量代表一個數組，所以數組特有的方法都可以用於這個變量。下面是一個利用rest參數改寫數組push方法的例子。
function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log(item); }); } var a = []; push(a, 1, 2, 3)
注意，rest參數之后不能再有其他參數（即只能是最后一個參數），否則會報錯。
// 報錯 function f(a, ...b, c) { // ... }
函數的length屬性，不包括rest參數。
(function(a) {}).length // 1 (function(...a) {}).length // 0 (function(a, ...b) {}).length // 1
3 擴展運算符
含義
擴展運算符（spread）是三個點（...）。它好比rest參數的逆運算，將一個數組轉為用逗號分隔的參數序列。
console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]
該運算符主要用於函數調用。
function push(array, ...items) { array.push(...items); } function add(x, y) { return x + y; } var numbers = [4, 38]; add(...numbers) // 42
上面代碼中，array.push(...items)和add(...numbers)這兩行，都是函數的調用，它們的都使用了擴展運算符。該運算符將一個數組，變為參數序列。
擴展運算符與正常的函數參數可以結合使用，非常靈活。
function f(v, w, x, y, z) { } var args = [0, 1]; f(-1, ...args, 2, ...[3]);
替代數組的apply方法
由於擴展運算符可以展開數組，所以不再需要apply方法，將數組轉為函數的參數了。
// ES5的寫法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f.apply(null, args); // ES6的寫法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f(...args);
下面是擴展運算符取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數組最大元素的寫法。
// ES5的寫法 Math.max.apply(null, [14, 3, 77]) // ES6的寫法 Math.max(...[14, 3, 77]) // 等同於 Math.max(14, 3, 77);
上面代碼表示，由於JavaScript不提供求數組最大元素的函數，所以只能套用Math.max函數，將數組轉為一個參數序列，然后求最大值。有了擴展運算符以后，就可以直接用Math.max了。
另一個例子是通過push函數，將一個數組添加到另一個數組的尾部。
// ES5的寫法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6的寫法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2);
上面代碼的ES5寫法中，push方法的參數不能是數組，所以只好通過apply方法變通使用push方法。有了擴展運算符，就可以直接將數組傳入push方法。
下面是另外一個例子。
// ES5 new (Date.bind.apply(Date, [null, 2015, 1, 1])) // ES6 new Date(...[2015, 1, 1]);
擴展運算符的應用
（1）合並數組
擴展運算符提供了數組合並的新寫法。
// ES5 [1, 2].concat(more) // ES6 [1, 2, ...more] var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; // ES5的合並數組 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合並數組 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
（2）與解構賦值結合
擴展運算符可以與解構賦值結合起來，用於生成數組。
// ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list
下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5] const [first, ...rest] = []; first // undefined rest // []: const [first, ...rest] = ["foo"]; first // "foo" rest // []
如果將擴展運算符用於數組賦值，只能放在參數的最后一位，否則會報錯。
const [...butLast, last] = [1, 2, 3, 4, 5]; // 報錯 const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 報錯
（3）函數的返回值
JavaScript的函數只能返回一個值，如果需要返回多個值，只能返回數組或對象。擴展運算符提供了解決這個問題的一種變通方法。
var dateFields = readDateFields(database); var d = new Date(...dateFields);
上面代碼從數據庫取出一行數據，通過擴展運算符，直接將其傳入構造函數Date。
（4）字符串
擴展運算符還可以將字符串轉為真正的數組。
[...'hello'] // [ "h", "e", "l", "l", "o" ]
上面的寫法，有一個重要的好處，那就是能夠正確識別32位的Unicode字符。
'x\uD83D\uDE80y'.length // 4 [...'x\uD83D\uDE80y'].length // 3
上面代碼的第一種寫法，JavaScript會將32位Unicode字符，識別為2個字符，采用擴展運算符就沒有這個問題。因此，正確返回字符串長度的函數，可以像下面這樣寫。
function length(str) { return [...str].length; } length('x\uD83D\uDE80y') // 3
凡是涉及到操作32位Unicode字符的函數，都有這個問題。因此，最好都用擴展運算符改寫。
let str = 'x\uD83D\uDE80y'; str.split('').reverse().join('') // 'y\uDE80\uD83Dx' [...str].reverse().join('') // 'y\uD83D\uDE80x'
上面代碼中，如果不用擴展運算符，字符串的reverse操作就不正確。
（5）實現了Iterator接口的對象
任何Iterator接口的對象，都可以用擴展運算符轉為真正的數組。
var nodeList = document.querySelectorAll('div'); var array = [...nodeList];
上面代碼中，querySelectorAll方法返回的是一個nodeList對象。它不是數組，而是一個類似數組的對象。這時，擴展運算符可以將其轉為真正的數組，原因就在於NodeList對象實現了Iterator接口。
對於那些沒有部署Iterator接口的類似數組的對象，擴展運算符就無法將其轉為真正的數組。
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // TypeError: Cannot spread non-iterable object. let arr = [...arrayLike];
上面代碼中，arrayLike是一個類似數組的對象，但是沒有部署Iterator接口，擴展運算符就會報錯。這時，可以改為使用Array.from方法將arrayLike轉為真正的數組。
（6）Map和Set結構，Generator函數
擴展運算符內部調用的是數據結構的Iterator接口，因此只要具有Iterator接口的對象，都可以使用擴展運算符，比如Map結構。
let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); let arr = [...map.keys()]; // [1, 2, 3]
Generator函數運行后，返回一個遍歷器對象，因此也可以使用擴展運算符。
var go = function*(){ yield 1; yield 2; yield 3; }; [...go()] // [1, 2, 3]
上面代碼中，變量go是一個Generator函數，執行后返回的是一個遍歷器對象，對這個遍歷器對象執行擴展運算符，就會將內部遍歷得到的值，轉為一個數組。
如果對沒有iterator接口的對象，使用擴展運算符，將會報錯。
var obj = {a: 1, b: 2}; let arr = [...obj]; // TypeError: Cannot spread non-iterable object
4、嚴格模式
從ES5開始，函數內部可以設定為嚴格模式。
function doSomething(a, b) { 'use strict'; // code }
《ECMAScript 2016標准》做了一點修改，規定只要函數參數使用了默認值、解構賦值、或者擴展運算符，那么函數內部就不能顯式設定為嚴格模式，否則會報錯。
// 報錯 function doSomething(a, b = a) { 'use strict'; // code } // 報錯 const doSomething = function ({a, b}) { 'use strict'; // code }; // 報錯 const doSomething = (...a) => { 'use strict'; // code }; const obj = { // 報錯 doSomething({a, b}) { 'use strict'; // code } };
這樣規定的原因是，函數內部的嚴格模式，同時適用於函數體代碼和函數參數代碼。但是，函數執行的時候，先執行函數參數代碼，然后再執行函數體代碼。這樣就有一個不合理的地方，只有從函數體代碼之中，才能知道參數代碼是否應該以嚴格模式執行，但是參數代碼卻應該先於函數體代碼執行。
// 報錯 function doSomething(value = 070) { 'use strict'; return value; }
上面代碼中，參數value的默認值是八進制數070，但是嚴格模式下不能用前綴0表示八進制，所以應該報錯。但是實際上，JavaScript引擎會先成功執行value = 070，然后進入函數體內部，發現需要用嚴格模式執行，這時才會報錯。
雖然可以先解析函數體代碼，再執行參數代碼，但是這樣無疑就增加了復雜性。因此，標准索性禁止了這種用法，只要參數使用了默認值、解構賦值、或者擴展運算符，就不能顯式指定嚴格模式。
兩種方法可以規避這種限制。第一種是設定全局性的嚴格模式，這是合法的。
'use strict'; function doSomething(a, b = a) { // code }
第二種是把函數包在一個無參數的立即執行函數里面。
const doSomething = (function () { 'use strict'; return function(value = 42) { return value; }; }());
name屬性
函數的name屬性，返回該函數的函數名。
function foo() {} foo.name // "foo"
這個屬性早就被瀏覽器廣泛支持，但是直到ES6，才將其寫入了標准。
需要注意的是，ES6對這個屬性的行為做出了一些修改。如果將一個匿名函數賦值給一個變量，ES5的name屬性，會返回空字符串，而ES6的name屬性會返回實際的函數名。
var func1 = function () {}; // ES5 func1.name // "" // ES6 func1.name // "func1"
上面代碼中，變量func1等於一個匿名函數，ES5和ES6的name屬性返回的值不一樣。
如果將一個具名函數賦值給一個變量，則ES5和ES6的name屬性都返回這個具名函數原本的名字。
const bar = function baz() {}; // ES5 bar.name // "baz" // ES6 bar.name // "baz"
Function構造函數返回的函數實例，name屬性的值為“anonymous”。
(new Function).name // "anonymous"
bind返回的函數，name屬性值會加上“bound ”前綴。
function foo() {}; foo.bind({}).name // "bound foo" (function(){}).bind({}).name // "bound "
6、箭頭函數
基本用法
ES6允許使用“箭頭”（=>）定義函數。
var f = v => v;
上面的箭頭函數等同於：
var f = function(v) { return v; };
如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分。
var f = () => 5; // 等同於 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同於 var sum = function(num1, num2) { return num1 + num2; };
如果箭頭函數的代碼塊部分多於一條語句，就要使用大括號將它們括起來，並且使用return語句返回。
var sum = (num1, num2) => { return num1 + num2; }
由於大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號。
var getTempItem = id => ({ id: id, name: "Temp" });
箭頭函數可以與變量解構結合使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同於
function full(person) {
return person.first + ' ' + person.last;
}
箭頭函數使得表達更加簡潔。
const isEven = n => n % 2 == 0;
const square = n => n * n;
上面代碼只用了兩行，就定義了兩個簡單的工具函數。如果不用箭頭函數，可能就要占用多行，而且還不如現在這樣寫醒目。
箭頭函數的一個用處是簡化回調函數。
// 正常函數寫法 [1,2,3].map(function (x) { return x * x; }); // 箭頭函數寫法 [1,2,3].map(x => x * x);
另一個例子是
// 正常函數寫法 var result = values.sort(function (a, b) { return a - b; }); // 箭頭函數寫法 var result = values.sort((a, b) => a - b);
下面是rest參數與箭頭函數結合的例子。
const numbers = (...nums) => nums; numbers(1, 2, 3, 4, 5) // [1,2,3,4,5] const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1, 2, 3, 4, 5) // [1,[2,3,4,5]]
使用注意點
箭頭函數有幾個使用注意點。
（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
（3）不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替。
（4）不可以使用yield命令，因此箭頭函數不能用作Generator函數。
上面四點中，第一點尤其值得注意。this對象的指向是可變的，但是在箭頭函數中，它是固定的。
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42
上面代碼中，setTimeout的參數是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它的真正執行要等到100毫秒后。如果是普通函數，執行時this應該指向全局對象window，這時應該輸出21。但是，箭頭函數導致this總是指向函數定義生效時所在的對象（本例是{id: 42}），所以輸出的是42。
箭頭函數可以讓setTimeout里面的this，綁定定義時所在的作用域，而不是指向運行時所在的作用域。下面是另一個例子。
function Timer() { this.s1 = 0; this.s2 = 0; // 箭頭函數 setInterval(() => this.s1++, 1000); // 普通函數 setInterval(function () { this.s2++; }, 1000); } var timer = new Timer(); setTimeout(() => console.log('s1: ', timer.s1), 3100); setTimeout(() => console.log('s2: ', timer.s2), 3100); // s1: 3 // s2: 0
上面代碼中，Timer函數內部設置了兩個定時器，分別使用了箭頭函數和普通函數。前者的this綁定定義時所在的作用域（即Timer函數），后者的this指向運行時所在的作用域（即全局對象）。所以，3100毫秒之后，timer.s1被更新了3次，而timer.s2一次都沒更新。
箭頭函數可以讓this指向固定化，這種特性很有利於封裝回調函數。下面是一個例子，DOM事件的回調函數封裝在一個對象里面。
var handler = { id: '123456', init: function() { document.addEventListener('click', event => this.doSomething(event.type), false); }, doSomething: function(type) { console.log('Handling ' + type + ' for ' + this.id); } };
上面代碼的init方法中，使用了箭頭函數，這導致這個箭頭函數里面的this，總是指向handler對象。否則，回調函數運行時，this.doSomething這一行會報錯，因為此時this指向document對象。
this指向的固定化，並不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作構造函數。
所以，箭頭函數轉成ES5的代碼如下。
// ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }
上面代碼中，轉換后的ES5版本清楚地說明了，箭頭函數里面根本沒有自己的this，而是引用外層的this。
請問下面的代碼之中有幾個this？
function foo() { return () => { return () => { return () => { console.log('id:', this.id); }; }; }; } var f = foo.call({id: 1}); var t1 = f.call({id: 2})()(); // id: 1 var t2 = f().call({id: 3})(); // id: 1 var t3 = f()().call({id: 4}); // id: 1
上面代碼之中，只有一個this，就是函數foo的this，所以t1、t2、t3都輸出同樣的結果。因為所有的內層函數都是箭頭函數，都沒有自己的this，它們的this其實都是最外層foo函數的this。
除了this，以下三個變量在箭頭函數之中也是不存在的，指向外層函數的對應變量：arguments、super、new.target。
function foo() { setTimeout(() => { console.log('args:', arguments); }, 100); } foo(2, 4, 6, 8) // args: [2, 4, 6, 8]
上面代碼中，箭頭函數內部的變量arguments，其實是函數foo的arguments變量。
另外，由於箭頭函數沒有自己的this，所以當然也就不能用call()、apply()、bind()這些方法去改變this的指向。
(function() { return [ (() => this.x).bind({ x: 'inner' })() ]; }).call({ x: 'outer' }); // ['outer']
上面代碼中，箭頭函數沒有自己的this，所以bind方法無效，內部的this指向外部的this。
長期以來，JavaScript語言的this對象一直是一個令人頭痛的問題，在對象方法中使用this，必須非常小心。箭頭函數”綁定”this，很大程度上解決了這個困擾。
嵌套的箭頭函數
箭頭函數內部，還可以再使用箭頭函數。下面是一個ES5語法的多重嵌套函數。
function insert(value) { return {into: function (array) { return {after: function (afterValue) { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }}; }}; } insert(2).into([1, 3]).after(1); //[1, 2, 3]
上面這個函數，可以使用箭頭函數改寫。
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}})});
insert(2).into([1, 3]).after(1); //[1, 2, 3]
下面是一個部署管道機制（pipeline）的例子，即前一個函數的輸出是后一個函數的輸入。
const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const plus1 = a => a + 1; const mult2 = a => a * 2; const addThenMult = pipeline(plus1, mult2); addThenMult(5) // 12
如果覺得上面的寫法可讀性比較差，也可以采用下面的寫法。
const plus1 = a => a + 1; const mult2 = a => a * 2; mult2(plus1(5)) // 12
箭頭函數還有一個功能，就是可以很方便地改寫λ演算。
// λ演算的寫法 fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v))) // ES6的寫法 var fix = f => (x => f(v => x(x)(v))) (x => f(v => x(x)(v)));
上面兩種寫法，幾乎是一一對應的。由於λ演算對於計算機科學非常重要，這使得我們可以用ES6作為替代工具，探索計算機科學。
7、綁定 this
箭頭函數可以綁定this對象，大大減少了顯式綁定this對象的寫法（call、apply、bind）。但是，箭頭函數並不適用於所有場合，所以ES7提出了“函數綁定”（function bind）運算符，用來取代call、apply、bind調用。雖然該語法還是ES7的一個提案，但是Babel轉碼器已經支持。
函數綁定運算符是並排的兩個雙冒號（::），雙冒號左邊是一個對象，右邊是一個函數。該運算符會自動將左邊的對象，作為上下文環境（即this對象），綁定到右邊的函數上面。
foo::bar; // 等同於 bar.bind(foo); foo::bar(...arguments); // 等同於 bar.apply(foo, arguments); const hasOwnProperty = Object.prototype.hasOwnProperty; function hasOwn(obj, key) { return obj::hasOwnProperty(key); }
如果雙冒號左邊為空，右邊是一個對象的方法，則等於將該方法綁定在該對象上面。
var method = obj::obj.foo; // 等同於 var method = ::obj.foo; let log = ::console.log; // 等同於 var log = console.log.bind(console);
由於雙冒號運算符返回的還是原對象，因此可以采用鏈式寫法。
// 例一 import { map, takeWhile, forEach } from "iterlib"; getPlayers() ::map(x => x.character()) ::takeWhile(x => x.strength > 100) ::forEach(x => console.log(x)); // 例二 let { find, html } = jake; document.querySelectorAll("div.myClass") ::find("p") ::html("hahaha");
8、尾調用優化
什么是尾調用？
尾調用（Tail Call）是函數式編程的一個重要概念，本身非常簡單，一句話就能說清楚，就是指某個函數的最后一步是調用另一個函數。
function f(x){ return g(x); }
上面代碼中，函數f的最后一步是調用函數g，這就叫尾調用。
以下三種情況，都不屬於尾調用。
// 情況一 function f(x){ let y = g(x); return y; } // 情況二 function f(x){ return g(x) + 1; } // 情況三 function f(x){ g(x); }
上面代碼中，情況一是調用函數g之后，還有賦值操作，所以不屬於尾調用，即使語義完全一樣。情況二也屬於調用后還有操作，即使寫在一行內。情況三等同於下面的代碼。
function f(x){ g(x); return undefined; }
尾調用不一定出現在函數尾部，只要是最后一步操作即可。
function f(x) { if (x > 0) { return m(x) } return n(x); }
上面代碼中，函數m和n都屬於尾調用，因為它們都是函數f的最后一步操作。
尾調用優化
尾調用之所以與其他調用不同，就在於它的特殊的調用位置。
我們知道，函數調用會在內存形成一個“調用記錄”，又稱“調用幀”（call frame），保存調用位置和內部變量等信息。如果在函數A的內部調用函數B，那么在A的調用幀上方，還會形成一個B的調用幀。等到B運行結束，將結果返回到A，B的調用幀才會消失。如果函數B內部還調用函數C，那就還有一個C的調用幀，以此類推。所有的調用幀，就形成一個“調用棧”（call stack）。
尾調用由於是函數的最后一步操作，所以不需要保留外層函數的調用幀，因為調用位置、內部變量等信息都不會再用到了，只要直接用內層函數的調用幀，取代外層函數的調用幀就可以了。
function f() { let m = 1; let n = 2; return g(m + n); } f(); // 等同於 function f() { return g(3); } f(); // 等同於 g(3);
上面代碼中，如果函數g不是尾調用，函數f就需要保存內部變量m和n的值、g的調用位置等信息。但由於調用g之后，函數f就結束了，所以執行到最后一步，完全可以刪除 f(x) 的調用幀，只保留 g(3) 的調用幀。
這就叫做“尾調用優化”（Tail call optimization），即只保留內層函數的調用幀。如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。這就是“尾調用優化”的意義。
注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行“尾調用優化”。
function addOne(a){ var one = 1; function inner(b){ return b + one; } return inner(a); }
上面的函數不會進行尾調用優化，因為內層函數inner用到了外層函數addOne的內部變量one。
尾遞歸
函數調用自身，稱為遞歸。如果尾調用自身，就稱為尾遞歸。
遞歸非常耗費內存，因為需要同時保存成千上百個調用幀，很容易發生“棧溢出”錯誤（stack overflow）。但對於尾遞歸來說，由於只存在一個調用幀，所以永遠不會發生“棧溢出”錯誤。
function factorial(n) { if (n === 1) return 1; return n * factorial(n - 1); } factorial(5) // 120
上面代碼是一個階乘函數，計算n的階乘，最多需要保存n個調用記錄，復雜度 O(n) 。
如果改寫成尾遞歸，只保留一個調用記錄，復雜度 O(1) 。
function factorial(n, total) { if (n === 1) return total; return factorial(n - 1, n * total); } factorial(5, 1) // 120
還有一個比較著名的例子，就是計算fibonacci 數列，也能充分說明尾遞歸優化的重要性
如果是非尾遞歸的fibonacci 遞歸方法
function Fibonacci (n) { if ( n <= 1 ) {return 1}; return Fibonacci(n - 1) + Fibonacci(n - 2); } Fibonacci(10); // 89 // Fibonacci(100) // Fibonacci(500) // 堆棧溢出了
如果我們使用尾遞歸優化過的fibonacci 遞歸算法
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) { if( n <= 1 ) {return ac2}; return Fibonacci2 (n - 1, ac2, ac1 + ac2); } Fibonacci2(100) // 573147844013817200000 Fibonacci2(1000) // 7.0330367711422765e+208 Fibonacci2(10000) // Infinity
由此可見，“尾調用優化”對遞歸操作意義重大，所以一些函數式編程語言將其寫入了語言規格。ES6也是如此，第一次明確規定，所有ECMAScript的實現，都必須部署“尾調用優化”。這就是說，在ES6中，只要使用尾遞歸，就不會發生棧溢出，相對節省內存。
遞歸函數的改寫
尾遞歸的實現，往往需要改寫遞歸函數，確保最后一步只調用自身。做到這一點的方法，就是把所有用到的內部變量改寫成函數的參數。比如上面的例子，階乘函數 factorial 需要用到一個中間變量 total ，那就把這個中間變量改寫成函數的參數。這樣做的缺點就是不太直觀，第一眼很難看出來，為什么計算5的階乘，需要傳入兩個參數5和1？
兩個方法可以解決這個問題。方法一是在尾遞歸函數之外，再提供一個正常形式的函數。
function tailFactorial(n, total) { if (n === 1) return total; return tailFactorial(n - 1, n * total); } function factorial(n) { return tailFactorial(n, 1); } factorial(5) // 120
上面代碼通過一個正常形式的階乘函數 factorial ，調用尾遞歸函數 tailFactorial ，看起來就正常多了。
函數式編程有一個概念，叫做柯里化（currying），意思是將多參數的函數轉換成單參數的形式。這里也可以使用柯里化。
function currying(fn, n) { return function (m) { return fn.call(this, m, n); }; } function tailFactorial(n, total) { if (n === 1) return total; return tailFactorial(n - 1, n * total); } const factorial = currying(tailFactorial, 1); factorial(5) // 120
上面代碼通過柯里化，將尾遞歸函數 tailFactorial 變為只接受1個參數的 factorial 。
第二種方法就簡單多了，就是采用ES6的函數默認值。
function factorial(n, total = 1) { if (n === 1) return total; return factorial(n - 1, n * total); } factorial(5) // 120
上面代碼中，參數 total 有默認值1，所以調用時不用提供這個值。
總結一下，遞歸本質上是一種循環操作。純粹的函數式編程語言沒有循環操作命令，所有的循環都用遞歸實現，這就是為什么尾遞歸對這些語言極其重要。對於其他支持“尾調用優化”的語言（比如Lua，ES6），只需要知道循環可以用遞歸代替，而一旦使用遞歸，就最好
使用尾遞歸。
嚴格模式
ES6的尾調用優化只在嚴格模式下開啟，正常模式是無效的。
這是因為在正常模式下，函數內部有兩個變量，可以跟蹤函數的調用棧。
func.arguments：返回調用時函數的參數。func.caller：返回調用當前函數的那個函數。
尾調用優化發生時，函數的調用棧會改寫，因此上面兩個變量就會失真。嚴格模式禁用這兩個變量，所以尾調用模式僅在嚴格模式下生效。
function restricted() { "use strict"; restricted.caller; // 報錯 restricted.arguments; // 報錯 } restricted();
尾遞歸優化的實現
尾遞歸優化只在嚴格模式下生效，那么正常模式下，或者那些不支持該功能的環境中，有沒有辦法也使用尾遞歸優化呢？回答是可以的，就是自己實現尾遞歸優化。
它的原理非常簡單。尾遞歸之所以需要優化，原因是調用棧太多，造成溢出，那么只要減少調用棧，就不會溢出。怎么做可以減少調用棧呢？就是采用“循環”換掉“遞歸”。
下面是一個正常的遞歸函數。
function sum(x, y) { if (y > 0) { return sum(x + 1, y - 1); } else { return x; } } sum(1, 100000) // Uncaught RangeError: Maximum call stack size exceeded(…)
上面代碼中，sum是一個遞歸函數，參數x是需要累加的值，參數y控制遞歸次數。一旦指定sum遞歸100000次，就會報錯，提示超出調用棧的最大次數。
蹦床函數（trampoline）可以將遞歸執行轉為循環執行。
function trampoline(f) { while (f && f instanceof Function) { f = f(); } return f; }
上面就是蹦床函數的一個實現，它接受一個函數f作為參數。只要f執行后返回一個函數，就繼續執行。注意，這里是返回一個函數，然后執行該函數，而不是函數里面調用函數，這樣就避免了遞歸執行，從而就消除了調用棧過大的問題。
然后，要做的就是將原來的遞歸函數，改寫為每一步返回另一個函數。
function sum(x, y) { if (y > 0) { return sum.bind(null, x + 1, y - 1); } else { return x; } }
上面代碼中，sum函數的每次執行，都會返回自身的另一個版本。
現在，使用蹦床函數執行sum，就不會發生調用棧溢出。
trampoline(sum(1, 100000)) // 100001
蹦床函數並不是真正的尾遞歸優化，下面的實現才是。
function tco(f) { var value; var active = false; var accumulated = []; return function accumulator() { accumulated.push(arguments); if (!active) { active = true; while (accumulated.length) { value = f.apply(this, accumulated.shift()); } active = false; return value; } }; } var sum = tco(function(x, y) { if (y > 0) { return sum(x + 1, y - 1) } else { return x } }); sum(1, 100000) // 100001
上面代碼中，tco函數是尾遞歸優化的實現，它的奧妙就在於狀態變量active。默認情況下，這個變量是不激活的。一旦進入尾遞歸優化的過程，這個變量就激活了。然后，每一輪遞歸sum返回的都是undefined，所以就避免了遞歸執行；而accumulated數組存放每一輪sum執行的參數，總是有值的，這就保證了accumulator函數內部的while循環總是會執行。這樣就很巧妙地將“遞歸”改成了“循環”，而后一輪的參數會取代前一輪的參數，保證了調用棧只有一層。
函數參數的尾逗號
ECMAScript 2017將允許函數的最后一個參數有尾逗號（trailing comma）。
此前，函數定義和調用時，都不允許最后一個參數后面出現逗號。
function clownsEverywhere( param1, param2 ) { /* ... */ } clownsEverywhere( 'foo', 'bar' );
上面代碼中，如果在param2或bar后面加一個逗號，就會報錯。
這樣的話，如果以后修改代碼，想為函數clownsEverywhere添加第三個參數，就勢必要在第二個參數后面添加一個逗號。這對版本管理系統來說，就會顯示，添加逗號的那一行也發生了變動。這看上去有點冗余，因此新的語法允許定義和調用時，尾部直接有一個逗號。
function clownsEverywhere( param1, param2, ) { /* ... */ } clownsEverywhere( 'foo', 'bar', );