ES6 入門系列 - 函數的擴展

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

 

---

四、嚴格模式

從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 "

 

---

 

六、箭頭函數

基本用法

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做爲替代工具，探索計算機科學。

 

---




七、綁定 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");

 

---

 

八、尾調用優化

什麼是尾調用？

尾調用（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',
);