1.函數(shù)參數(shù)的默認(rèn)值

ES6 之前，不能直接為函數(shù)的參數(shù)指定默認(rèn)值，只能采用變通的方法。

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫在參數(shù)定義的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

可以看到，ES6 的寫法比 ES5 簡潔許多，而且非常自然。下面是另一個(gè)例子。

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }

除了簡潔,還有好處是,閱讀代碼的人,可以立刻意識(shí)到那些參數(shù)是可以省略的,其次,有利于將來的代碼優(yōu)化,

參數(shù)變量是默認(rèn)聲明的，所以不能用let或const再次聲明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

參數(shù)變量是默認(rèn)聲明的，所以不能用let或const再次聲明。
function f(x = 5){
let x = 1; // error
const x = 1; //error
}

使用參數(shù)默認(rèn)值時(shí)，函數(shù)不能有同名參數(shù)。
// 不報(bào)錯(cuò)
function foo(x, x, y) {
  // ...
}

// 報(bào)錯(cuò)
function foo(x, x, y = 1) {
  // ...
}
// SyntaxError: Duplicate parameter name not allowed in this context

另外一個(gè),參數(shù)默認(rèn)值不是傳值,而是每次都重新計(jì)算默認(rèn)值,表達(dá)式的值,

  let x = 9;
    function f(p = x+1) {
      console.log(p)
    }
    f(); // 10
    x = 10;
    f() // 11

上面代碼中，參數(shù)p的默認(rèn)值是x + 1。這時(shí)，每次調(diào)用函數(shù)foo，都會(huì)重新計(jì)算x + 1，而不是默認(rèn)p等于 10。

與結(jié)構(gòu)賦值默認(rèn)值結(jié)合使用

參數(shù)默認(rèn)值可以與結(jié)構(gòu)賦值的默認(rèn)值結(jié)合起來使用

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

上面代碼中只使用了對(duì)象結(jié)構(gòu)賦值默認(rèn)值,沒有使用函數(shù)參數(shù)的默認(rèn)值,只有當(dāng)函數(shù)foo的參數(shù)是已給對(duì)象時(shí),變量x和y 才會(huì)通過結(jié)構(gòu)賦值生成,如果函數(shù)foo調(diào)用沒提供參數(shù),變量x,和y就不會(huì)生成,從而報(bào)錯(cuò),通過提供函數(shù)參數(shù)的默認(rèn)值,就可以避免這種情況
下面一個(gè)例子

function fetch(url, { body = '', method = 'GET', headers = {} }) {
 console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 報(bào)錯(cuò)

上面代碼中，如果函數(shù)fetch的第二個(gè)參數(shù)是一個(gè)對(duì)象，就可以為它的三個(gè)屬性設(shè)置默認(rèn)值。這種寫法不能省略第二個(gè)參數(shù)，如果結(jié)合函數(shù)參數(shù)的默認(rèn)值，就可以省略第二個(gè)參數(shù)。這時(shí)，就出現(xiàn)了雙重默認(rèn)值。

function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

上面代碼中，函數(shù)fetch沒有第二個(gè)參數(shù)時(shí)，函數(shù)參數(shù)的默認(rèn)值就會(huì)生效，然后才是解構(gòu)賦值的默認(rèn)值生效，變量method才會(huì)取到默認(rèn)值GET。
練習(xí),下面寫法區(qū)別

// 寫法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 寫法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

上面寫法都對(duì)函數(shù)的參數(shù)設(shè)置了默認(rèn)值,區(qū)別是寫法一函數(shù)參數(shù)的默認(rèn)值是空對(duì)象,但是設(shè)置了結(jié)構(gòu)賦值的默認(rèn)值,寫法二函數(shù)參數(shù)的默認(rèn)值是一個(gè)具體屬性的對(duì)象,但是沒有設(shè)置對(duì)象結(jié)構(gòu)賦值的默認(rèn)值

// 函數(shù)沒有參數(shù)的情況
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]

參數(shù)默認(rèn)值的位置

通常情況下，定義了默認(rèn)值的參數(shù)，應(yīng)該是函數(shù)的尾參數(shù)。因?yàn)檫@樣比較容易看出來，到底省略了哪些參數(shù)。如果非尾部的參數(shù)設(shè)置默認(rèn)值，實(shí)際上這個(gè)參數(shù)是沒法省略的。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 報(bào)錯(cuò)
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) // 報(bào)錯(cuò)
f(1, undefined, 2) // [1, 5, 2]

上面代碼中,默認(rèn)值的參數(shù)都不是尾參數(shù),這時(shí)無法省略該參數(shù),而不省略它后面的參數(shù),除非顯示輸入undefined

如果傳入undefined 將觸發(fā)該參數(shù)等于默認(rèn)值,null則沒有這個(gè)效果

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

上面代碼中，x參數(shù)對(duì)應(yīng)undefined，結(jié)果觸發(fā)了默認(rèn)值，y參數(shù)等于null，就沒有觸發(fā)默認(rèn)值。

函數(shù)的length屬性

指定了默認(rèn)值以后，函數(shù)的length屬性，將返回沒有指定默認(rèn)值的參數(shù)個(gè)數(shù)。也就是說，指定了默認(rèn)值后，length屬性將失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

作用域

一旦設(shè)置了參數(shù)的默認(rèn)值,函數(shù)進(jìn)行聲明初始化時(shí),參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域(context)等到初始化結(jié)束,這個(gè)作用域就會(huì)消失,這種語法行為,在不設(shè)置參數(shù)默認(rèn)值時(shí),是不會(huì)出現(xiàn)的

var x = 1;
function f(x, y = x){
 console.log(y)
}
f(2) //2

上面代碼中,參數(shù)y的默認(rèn)值等于變量x,調(diào)用函數(shù)f時(shí),參數(shù)形成一個(gè)單獨(dú)的作用域,在這個(gè)作用域里面,默認(rèn)值變量x指向第一個(gè)參數(shù)x,而不是全局變量x,所以輸出是2

下面例子

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代碼中，函數(shù)f調(diào)用時(shí)，參數(shù)y = x形成一個(gè)單獨(dú)的作用域。這個(gè)作用域里面，變量x本身沒有定義，所以指向外層的全局變量x。函數(shù)調(diào)用時(shí)，函數(shù)體內(nèi)部的局部變量x影響不到默認(rèn)值變量x。

如果此時(shí)，全局變量x不存在，就會(huì)報(bào)錯(cuò)

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // ReferenceError: x is not defined

下面這樣寫，也會(huì)報(bào)錯(cuò)。

var x = 1;

function foo(x = x) {
  // ...
}

foo() // ReferenceError: x is not defined

上面代碼中，參數(shù)x = x形成一個(gè)單獨(dú)作用域。實(shí)際執(zhí)行的是let x = x，由于暫時(shí)性死區(qū)的原因，這行代碼會(huì)報(bào)錯(cuò)”x 未定義“。

let foo = 'outer';

function bar(func = () => foo) {
  let foo = 'inner';
  console.log(func());
}

bar(); // outer

上面代碼中，函數(shù)bar的參數(shù)func的默認(rèn)值是一個(gè)匿名函數(shù)，返回值為變量foo。函數(shù)參數(shù)形成的單獨(dú)作用域里面，并沒有定義變量foo，所以foo指向外層的全局變量foo，因此輸出outer。

如果寫成下面這樣，就會(huì)報(bào)錯(cuò)。

function bar(func = () => foo) {
  let foo = 'inner';
  console.log(func());
}

bar() // ReferenceError: foo is not defined

上面代碼中，匿名函數(shù)里面的foo指向函數(shù)外層，但是函數(shù)外層并沒有聲明變量foo，所以就報(bào)錯(cuò)了。

下面是一個(gè)更復(fù)雜的例子。

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3; 
// 上面 var 變成 let 報(bào)錯(cuò),, let 不能在同一個(gè)作用域內(nèi)重復(fù)聲明
  y();
  console.log(x);
}

foo() // 3
x // 1

在函數(shù)中 加 {
let x = 3; 
}

如果 函數(shù) 參數(shù)設(shè)置 默認(rèn)值 呢 也會(huì)報(bào)錯(cuò) 上面所說  設(shè)置參數(shù)的默認(rèn)值,函數(shù)進(jìn)行聲明初始化時(shí),,參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域,(context) 等到初始化結(jié)束,這個(gè)作用域就會(huì)消失,, 所以也會(huì)報(bào)錯(cuò)
設(shè)置 函數(shù) 參數(shù)為 結(jié)構(gòu),就不會(huì)

上面代碼中,函數(shù)foo參數(shù)形成了一個(gè)單獨(dú)的作用域,這個(gè)作用域首先聲明了變量x,然后聲明了變量y, y的默認(rèn)值是一個(gè)匿名函數(shù),這個(gè)匿名函數(shù)內(nèi)部的變量x,指向同一個(gè)作用域的第一個(gè)參數(shù)x,函數(shù)foo內(nèi)部有聲明了一個(gè)內(nèi)部變量X,該變量與第一個(gè)參數(shù)X,由于不是同一個(gè)作用域,所以不是同一個(gè)變量,因此指向y后,內(nèi)部變量X和外部的全局變量X的值都沒有變,函數(shù)第一個(gè)參數(shù)發(fā)生了改變

如果將var x = 3 的var 去除,函數(shù)foo 的內(nèi)部變量x就指向第一個(gè)參數(shù)x,與匿名函數(shù)內(nèi)部的x是一致的,所以最后輸出的就是2,而外層的全局變量x依然不受影響

var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y();
  console.log(x);
}

foo() // 2
x // 1

應(yīng)用

利用參數(shù)默認(rèn)值,可以指定某個(gè)參數(shù)不得省略,如果省略就拋出一個(gè)錯(cuò)誤

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

另外，可以將參數(shù)默認(rèn)值設(shè)為undefined，表明這個(gè)參數(shù)是可以省略的。

function foo(optional = undefined) { ··· }

rest參數(shù)

es6引入rest參數(shù)(形式為 ...變量名)用于獲取函數(shù)的多余參數(shù),這樣就不需要使用argument對(duì)象 了, rest參數(shù)搭配的變量是一個(gè)數(shù)組,該變量將多余的參數(shù)放入數(shù)組中

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代碼的add函數(shù)是一個(gè)求和函數(shù)，利用 rest 參數(shù)，可以向該函數(shù)傳入任意數(shù)目的參數(shù)。

下面是一個(gè) rest 參數(shù)代替arguments變量的例子。

// arguments變量的寫法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest參數(shù)的寫法
const sortNumbers = (...numbers) => numbers.sort();

argument對(duì)象不是數(shù)組,而是一個(gè)類似數(shù)組 的對(duì)象,所以為了,使用數(shù)組的方法,必須使用Array.prototype.slice.call先將其轉(zhuǎn)為數(shù)組,rest參數(shù)就不存在這個(gè)問題，它就是一個(gè)真正的數(shù)組，數(shù)組特有的方法都可以使用。下面是一個(gè)利用 rest 參數(shù)改寫數(shù)組push方法的例子。

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)

注意，rest 參數(shù)之后不能再有其他參數(shù)（即只能是最后一個(gè)參數(shù)），否則會(huì)報(bào)錯(cuò)。
函數(shù)的length屬性，不包括 rest 參數(shù)。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

嚴(yán)格模式

從 ES5 開始，函數(shù)內(nèi)部可以設(shè)定為嚴(yán)格模式。

function doSomething(a, b) {
  'use strict';
  // code
}

ES2016 做了一點(diǎn)修改，規(guī)定只要函數(shù)參數(shù)使用了默認(rèn)值、解構(gòu)賦值、或者擴(kuò)展運(yùn)算符，那么函數(shù)內(nèi)部就不能顯式設(shè)定為嚴(yán)格模式，否則會(huì)報(bào)錯(cuò)。

// 報(bào)錯(cuò)
function doSomething(a, b = a) {
  'use strict';
  // code
}

// 報(bào)錯(cuò)
const doSomething = function ({a, b}) {
  'use strict';
  // code
};

// 報(bào)錯(cuò)
const doSomething = (...a) => {
  'use strict';
  // code
};

const obj = {
  // 報(bào)錯(cuò)
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

這樣規(guī)定的原因是，函數(shù)內(nèi)部的嚴(yán)格模式，同時(shí)適用于函數(shù)體和函數(shù)參數(shù)。但是，函數(shù)執(zhí)行的時(shí)候，先執(zhí)行函數(shù)參數(shù)，然后再執(zhí)行函數(shù)體。這樣就有一個(gè)不合理的地方，只有從函數(shù)體之中，才能知道參數(shù)是否應(yīng)該以嚴(yán)格模式執(zhí)行，但是參數(shù)卻應(yīng)該先于函數(shù)體執(zhí)行。

// 報(bào)錯(cuò)
function doSomething(value = 070) {
  'use strict';
  return value;
}

name屬性

函數(shù)的name屬性，返回該函數(shù)的函數(shù)名。

function foo() {}
foo.name // "foo"

5.箭頭函數(shù)

ES6 允許使用“箭頭”（=>）定義函數(shù)。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號(hào)代表參數(shù)部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號(hào)代表參數(shù)部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號(hào)將它們括起來，并且使用return語句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括號(hào)被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào)，否則會(huì)報(bào)錯(cuò)。

// 報(bào)錯(cuò)
let getTempItem = id => { id: id, name: "Temp" };

// 不報(bào)錯(cuò)
let getTempItem = id => ({ id: id, name: "Temp" });

箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

箭頭函數(shù)使得表達(dá)更加簡潔。

const isEven = n => n % 2 === 0;
const square = n => n * n;

箭頭函數(shù)的一個(gè)用處是簡化回調(diào)函數(shù)。

// 正常函數(shù)寫法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭頭函數(shù)寫法
[1,2,3].map(x => x * x);

// 正常函數(shù)寫法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭頭函數(shù)寫法
var result = values.sort((a, b) => a - b);

下面是 rest 參數(shù)與箭頭函數(shù)結(jié)合的例子。

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]]

注意點(diǎn)

1 函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象,而不是使用時(shí)所在的對(duì)象
2 不可以當(dāng)作構(gòu)造函數(shù),也就是不可以使用new 命令
3 不可以使用argument對(duì)象 該對(duì)象在函數(shù)體內(nèi)不存在
4 不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

箭頭函數(shù)可以讓setTimeout里面的this，綁定定義時(shí)所在的作用域，而不是指向運(yùn)行時(shí)所在的作用域。下面是另一個(gè)例子。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭頭函數(shù)
  setInterval(() => this.s1++, 1000);
  // 普通函數(shù)
  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函數(shù)內(nèi)部設(shè)置了兩個(gè)定時(shí)器，分別使用了箭頭函數(shù)和普通函數(shù)。前者的this綁定定義時(shí)所在的作用域（即Timer函數(shù)），后者的this指向運(yùn)行時(shí)所在的作用域（即全局對(duì)象）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都沒更新。

另外，由于箭頭函數(shù)沒有自己的this，所以當(dāng)然也就不能用call()、apply()、bind()這些方法去改變this的指向。

(function() {
  return [
    (() => this.x).bind({ x: 'inner' })()
  ];
}).call({ x: 'outer' });
// ['outer']

上面代碼中，箭頭函數(shù)沒有自己的this，所以bind方法無效，內(nèi)部的this指向外部的this。

不適用場合

由于箭頭函數(shù)使用this 從 "動(dòng)態(tài)"變成了"靜態(tài)",下面兩個(gè)場合不應(yīng)該使用箭頭函數(shù)
第一個(gè)場合是定義對(duì)象的方法，且該方法內(nèi)部包括this。
上面代碼中，cat.jumps()方法是一個(gè)箭頭函數(shù)，這是錯(cuò)誤的。調(diào)用cat.jumps()時(shí)，如果是普通函數(shù)，該方法內(nèi)部的this指向cat；如果寫成上面那樣的箭頭函數(shù)，使得this指向全局對(duì)象，因此不會(huì)得到預(yù)期結(jié)果。這是因?yàn)閷?duì)象不構(gòu)成單獨(dú)的作用域，導(dǎo)致jumps箭頭函數(shù)定義時(shí)的作用域就是全局作用域。

第二個(gè)場合是需要?jiǎng)討B(tài)this的時(shí)候，也不應(yīng)使用箭頭函數(shù)。

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

上面代碼運(yùn)行時(shí)，點(diǎn)擊按鈕會(huì)報(bào)錯(cuò)，因?yàn)閎utton的監(jiān)聽函數(shù)是一個(gè)箭頭函數(shù)，導(dǎo)致里面的this就是全局對(duì)象。如果改成普通函數(shù)，this就會(huì)動(dòng)態(tài)指向被點(diǎn)擊的按鈕對(duì)象。

另外，如果函數(shù)體很復(fù)雜，有許多行，或者函數(shù)內(nèi)部有大量的讀寫操作，不單純是為了計(jì)算值，這時(shí)也不應(yīng)該使用箭頭函數(shù)，而是要使用普通函數(shù)，這樣可以提高代碼可讀性。

6.尾調(diào)用優(yōu)化

尾調(diào)用（Tail Call）是函數(shù)式編程的一個(gè)重要概念，本身非常簡單，一句話就能說清楚，就是指某個(gè)函數(shù)的最后一步是調(diào)用另一個(gè)函數(shù)。

function f(x){
  return g(x);
}

上面代碼中，函數(shù)f的最后一步是調(diào)用函數(shù)g，這就叫尾調(diào)用。

以下三種情況，都不屬于尾調(diào)用。

// 情況一
function f(x){
  let y = g(x);
  return y;
}

// 情況二
function f(x){
  return g(x) + 1;
}

// 情況三
function f(x){
  g(x);
}

我們知道，函數(shù)調(diào)用會(huì)在內(nèi)存形成一個(gè)“調(diào)用記錄”，又稱“調(diào)用幀”（call frame），保存調(diào)用位置和內(nèi)部變量等信息。如果在函數(shù)A的內(nèi)部調(diào)用函數(shù)B，那么在A的調(diào)用幀上方，還會(huì)形成一個(gè)B的調(diào)用幀。等到B運(yùn)行結(jié)束，將結(jié)果返回到A，B的調(diào)用幀才會(huì)消失。如果函數(shù)B內(nèi)部還調(diào)用函數(shù)C，那就還有一個(gè)C的調(diào)用幀，以此類推。所有的調(diào)用幀，就形成一個(gè)“調(diào)用棧”（call stack）。

尾調(diào)用由于是函數(shù)的最后一步操作，所以不需要保留外層函數(shù)的調(diào)用幀，因?yàn)檎{(diào)用位置、內(nèi)部變量等信息都不會(huì)再用到了，只要直接用內(nèi)層函數(shù)的調(diào)用幀，取代外層函數(shù)的調(diào)用幀就可以了。

function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

// 等同于
function f() {
  return g(3);
}
f();

// 等同于
g(3);

上面的代碼中,如果函數(shù)g不是尾調(diào)用,函數(shù)f就需要保存內(nèi)部變量m和n的值,g的調(diào)用位置等信息,但由于調(diào)用g之后,函數(shù)f就結(jié)束了,所以執(zhí)行到最后一步,完全可以刪除f(x)的調(diào)用幀 只保留g(3)的調(diào)用幀

這就叫做 "尾調(diào)用優(yōu)化"既保留內(nèi)層函數(shù)的調(diào)用幀.如果所以函數(shù)都是尾調(diào)用,那么完全可以做到每次執(zhí)行時(shí),調(diào)用幀只有一項(xiàng),這將大大,節(jié)省內(nèi)存,這就是"尾調(diào)用優(yōu)化"的意義

注意,只有不再用到外層函數(shù)的內(nèi)部變量,內(nèi)層函數(shù)的調(diào)用幀才會(huì)取代外層函數(shù)的調(diào)用幀,否則就無法進(jìn)行 "尾調(diào)用優(yōu)化"

function addOne(a){
  var one = 1;
  function inner(b){
    return b + one;
  }
  return inner(a);
}

上面的函數(shù)不會(huì)進(jìn)行尾調(diào)用優(yōu)化,因?yàn)閮?nèi)層函數(shù)inner 用到了外層函數(shù)addOne 的內(nèi)部變量one

尾遞歸

函數(shù)調(diào)用自身，稱為遞歸。如果尾調(diào)用自身，就稱為尾遞歸。

遞歸非常耗費(fèi)內(nèi)存，因?yàn)樾枰瑫r(shí)保存成千上百個(gè)調(diào)用幀，很容易發(fā)生“棧溢出”錯(cuò)誤（stack overflow）。但對(duì)于尾遞歸來說，由于只存在一個(gè)調(diào)用幀，所以永遠(yuǎn)不會(huì)發(fā)生“棧溢出”錯(cuò)誤。

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

上面代碼是一個(gè)階乘函數(shù)，計(jì)算n的階乘，最多需要保存n個(gè)調(diào)用記錄，復(fù)雜度 O(n) 。

如果改寫成尾遞歸，只保留一個(gè)調(diào)用記錄，復(fù)雜度 O(1) 。

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

非尾遞歸的 Fibonacci 數(shù)列實(shí)現(xiàn)如下。

function Fibonacci (n) {
  if ( n <= 1 ) {return 1};

  return Fibonacci(n - 1) + Fibonacci(n - 2);
}

Fibonacci(10) // 89
Fibonacci(100) // 超時(shí)
Fibonacci(500) // 超時(shí)

尾遞歸優(yōu)化過的 Fibonacci 數(shù)列實(shí)現(xiàn)如下。

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

由此可見，“尾調(diào)用優(yōu)化”對(duì)遞歸操作意義重大，所以一些函數(shù)式編程語言將其寫入了語言規(guī)格。ES6 亦是如此，第一次明確規(guī)定，所有 ECMAScript 的實(shí)現(xiàn)，都必須部署“尾調(diào)用優(yōu)化”。這就是說，ES6 中只要使用尾遞歸，就不會(huì)發(fā)生棧溢出（或者層層遞歸造成的超時(shí)），相對(duì)節(jié)省內(nèi)存。

遞歸函數(shù)的改寫

尾遞歸的實(shí)現(xiàn),往往需要改寫遞歸函數(shù),確保最后一步只調(diào)用自身,做到這一點(diǎn)的方法,就是把所以用到的北部變量改寫成函數(shù)的參數(shù),比如上面的例子,階乘函數(shù)factorial需要用到一個(gè)中間變量total,那就把這個(gè)中間變量改寫成函數(shù)的參數(shù),這樣做的缺點(diǎn)就是不太值觀,第一眼很難看出來，為什么計(jì)算5的階乘，需要傳入兩個(gè)參數(shù)5和1？

函數(shù)式編程有一個(gè)概念，叫做柯里化（currying），意思是將多參數(shù)的函數(shù)轉(zhuǎn)換成單參數(shù)的形式。這里也可以使用柯里化。

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

上面代碼通過柯里化，將尾遞歸函數(shù)tailFactorial變?yōu)橹唤邮芤粋€(gè)參數(shù)的factorial。

第二種方法就簡單多了，就是采用 ES6 的函數(shù)默認(rèn)值。

function factorial(n, total = 1) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5) // 120

上面代碼中，參數(shù)total有默認(rèn)值1，所以調(diào)用時(shí)不用提供這個(gè)值。

總結(jié)一下，遞歸本質(zhì)上是一種循環(huán)操作。純粹的函數(shù)式編程語言沒有循環(huán)操作命令，所有的循環(huán)都用遞歸實(shí)現(xiàn)，這就是為什么尾遞歸對(duì)這些語言極其重要。對(duì)于其他支持“尾調(diào)用優(yōu)化”的語言（比如 Lua，ES6），只需要知道循環(huán)可以用遞歸代替，而一旦使用遞歸，就最好使用尾遞歸。

嚴(yán)格模式

ES6 的尾調(diào)用優(yōu)化只在嚴(yán)格模式下開啟，正常模式是無效的。

這是因?yàn)樵谡ＤＪ较?，函?shù)內(nèi)部有兩個(gè)變量，可以跟蹤函數(shù)的調(diào)用棧。

func.arguments：返回調(diào)用時(shí)函數(shù)的參數(shù)。
func.caller：返回調(diào)用當(dāng)前函數(shù)的那個(gè)函數(shù)。
尾調(diào)用優(yōu)化發(fā)生時(shí)，函數(shù)的調(diào)用棧會(huì)改寫，因此上面兩個(gè)變量就會(huì)失真。嚴(yán)格模式禁用這兩個(gè)變量，所以尾調(diào)用模式僅在嚴(yán)格模式下生效。

function restricted() {
  'use strict';
  restricted.caller;    // 報(bào)錯(cuò)
  restricted.arguments; // 報(bào)錯(cuò)
}
restricted();

尾遞歸優(yōu)化只在嚴(yán)格模式下生效，那么正常模式下，或者那些不支持該功能的環(huán)境中，有沒有辦法也使用尾遞歸優(yōu)化呢？回答是可以的，就是自己實(shí)現(xiàn)尾遞歸優(yōu)化。

它的原理非常簡單。尾遞歸之所以需要優(yōu)化，原因是調(diào)用棧太多，造成溢出，那么只要減少調(diào)用棧，就不會(huì)溢出。怎么做可以減少調(diào)用棧呢？就是采用“循環(huán)”換掉“遞歸”。

下面是一個(gè)正常的遞歸函數(shù)。

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是一個(gè)遞歸函數(shù)，參數(shù)x是需要累加的值，參數(shù)y控制遞歸次數(shù)。一旦指定sum遞歸 100000 次，就會(huì)報(bào)錯(cuò)，提示超出調(diào)用棧的最大次數(shù)。

蹦床函數(shù)（trampoline）可以將遞歸執(zhí)行轉(zhuǎn)為循環(huán)執(zhí)行。

function trampoline(f) {
  while (f && f instanceof Function) {
    f = f();
  }
  return f;
}

上面就是蹦床函數(shù)的一個(gè)實(shí)現(xiàn)，它接受一個(gè)函數(shù)f作為參數(shù)。只要f執(zhí)行后返回一個(gè)函數(shù)，就繼續(xù)執(zhí)行。注意，這里是返回一個(gè)函數(shù)，然后執(zhí)行該函數(shù)，而不是函數(shù)里面調(diào)用函數(shù)，這樣就避免了遞歸執(zhí)行，從而就消除了調(diào)用棧過大的問題。

然后，要做的就是將原來的遞歸函數(shù)，改寫為每一步返回另一個(gè)函數(shù)。

function sum(x, y) {
  if (y > 0) {
    return sum.bind(null, x + 1, y - 1);
  } else {
    return x;
  }
}

上面代碼中，sum函數(shù)的每次執(zhí)行，都會(huì)返回自身的另一個(gè)版本。

現(xiàn)在，使用蹦床函數(shù)執(zhí)行sum，就不會(huì)發(fā)生調(diào)用棧溢出。

trampoline(sum(1, 100000))
// 100001

蹦床函數(shù)并不是真正的尾遞歸優(yōu)化，下面的實(shí)現(xiàn)才是。

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函數(shù)是尾遞歸優(yōu)化的實(shí)現(xiàn)，它的奧妙就在于狀態(tài)變量active。默認(rèn)情況下，這個(gè)變量是不激活的。一旦進(jìn)入尾遞歸優(yōu)化的過程，這個(gè)變量就激活了。然后，每一輪遞歸sum返回的都是undefined，所以就避免了遞歸執(zhí)行；而accumulated數(shù)組存放每一輪sum執(zhí)行的參數(shù)，總是有值的，這就保證了accumulator函數(shù)內(nèi)部的while循環(huán)總是會(huì)執(zhí)行。這樣就很巧妙地將“遞歸”改成了“循環(huán)”，而后一輪的參數(shù)會(huì)取代前一輪的參數(shù)，保證了調(diào)用棧只有一層。