摘要：在函數(shù)方面的擴(kuò)展比較豐富也很實(shí)用，本篇概括了這中的精華知識(shí)。所以無法成為構(gòu)造函數(shù)，不能使用操作符。參數(shù)將擴(kuò)展運(yùn)算符作用于參數(shù)，即為參數(shù)。聲明式，直接為函數(shù)名。通過構(gòu)造函數(shù)生成的，為。函數(shù)的屬性，在其描述對(duì)象的屬性上，為函數(shù)名。

ES6在函數(shù)方面的擴(kuò)展比較豐富也很實(shí)用，本篇概括了這中的精華知識(shí)。

箭頭函數(shù)是ES6中定義函數(shù)的新形式。
新形式不僅簡(jiǎn)化了定義方式，更為函數(shù)本身減重（其this, argumnets等與之前不同）。

let fn = () => {
  console.log("fn");
};
fn(); // "fn"

如果只有一個(gè)參數(shù)，可以省略括號(hào)。
(n => {
  console.log(n);
})(1); // 1

如果不帶 {} ，意味著直接返回 => 指向的目標(biāo)。
console.log( (n => 2)(1) ); // 2
注意，指向的目標(biāo)只能是單體，如果為表達(dá)式需要用 () 包裹形成單體。
console.log( (n => (n + 1))(1) ); // 2

箭頭函數(shù)沒有自己的this，其使用的this是引用外層的（類似閉包）。
因此其里面的this是固定的，在定義的那一刻起就已經(jīng)確定，不會(huì)再變。

非嚴(yán)格模式下。

--- 之前的函數(shù)是執(zhí)行時(shí)確定 this 。
window.id = 0;

let obj = { id: 1 };
let fn = function () {
  console.log(this.id);
};

fn(); // 0，引用的是 window 。
obj.fn = fn;
obj.fn(); // 1，引用的是 obj 。


--- 箭頭函數(shù)是定義時(shí)確定 this 。
window.id = 0;

let obj = { id: 1 };
let fn = () => {
  console.log(this.id);
};

fn();  // 0，引用的是 window 。
obj.fn = fn;
obj.fn(); // 0，引用的是 window 。

再利用多層箭頭函數(shù)來說明。
多層箭頭函數(shù)，this的尋找途徑是一層層向上查找的，類似作用域鏈查找。
所以多層箭頭函數(shù)在初次獲取到this時(shí)，全部函數(shù)的this便都確定了。

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

function foo() {
  return () => {
    return () => {
      console.log("id:", this.id);
    };
  };
}

--- 等價(jià)于

function foo() {
  let _this = this;
  return function() {
    return function() {
      console.log("id:", _this.id);
    }
  }
}

因?yàn)闆]有自身的this。
所以無法成為構(gòu)造函數(shù)，不能使用new操作符。
所以不能用call, apply和bind這些方法改變this的指向。

let Person = () => {};
let p = new Person(); // 報(bào)錯(cuò)，Person is not a constructor。

window.id = "000";
let fn = () => { console.log(this.id) };
let fn1 = fn.bind({ id: "111" });
fn1(); // "000"

函數(shù)體內(nèi)沒有arguments對(duì)象，可以使用rest參數(shù)代替。
不能使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)（可以使用async函數(shù)）。

let fn = (...args) => {
  console.log(args); // [1, 2]
  console.log(arguments); // 報(bào)錯(cuò)，arguments is not defined。
};
fn(1, 2);

可以為參數(shù)設(shè)定默認(rèn)值。
當(dāng)沒有傳遞該參數(shù)或值為undefined時(shí)，默認(rèn)值將被使用。
借用此方式，可以簡(jiǎn)化函數(shù)體，并使參數(shù)的性質(zhì)、類型等更加清晰。

--- ES6 之前
function fn(id, conf) {
  id || requiredParam();
  conf = conf || {};
  
  conf.name = conf.name || "";
  conf.ago = conf.ago || 0;
  
  console.log(id, conf);
}

--- ES6 之后
function fn(
  id = requiredParam(),
  conf = {
    name: "",
    ago: 0
  }
) {
  console.log(id, conf);
}

function requiredParam() {
  throw Error("Missing parameter.");
}

結(jié)合解構(gòu)賦值，默認(rèn)值設(shè)定的功能會(huì)更為強(qiáng)大。
關(guān)于解構(gòu)賦值，可參考此鏈接。
為了直觀的顯示它的優(yōu)勢(shì)，我們將最終的結(jié)果分成三步。

1.使用解構(gòu)賦值，快速聲明變量，并賦予相應(yīng)的屬性值。

fn({
  id: "0003"
}); // 兩者都打印出："0003" undefined

--- ES6 之前
function fn(conf) {
  let id = conf.id;
  let name = conf.name;
  console.log(id, name);
}

--- ES6 之后
function fn({id, name}) {
  console.log(id, name);
}


2.緊接著，為解構(gòu)中的變量設(shè)定默認(rèn)值。

fn({
  id: "0003"
}); // 兩者都打印出："0003" "Unnamed"

--- ES6 之前
function fn(conf) {
  let id = conf.id || "0000";
  let name = conf.name || "Unnamed";
  console.log(id, name);
}

--- ES6 之后
function fn({
  id = "0000",
  name = "Unnamed"
}) {
  console.log(id, name);
}


3.最后，再為此參數(shù)設(shè)定默認(rèn)值。

fn(); // 兩者都打印出："0000" "Unnamed"

--- ES6 之前
function fn(conf) {
  conf = conf || {
    id: "0000",
    name: "Unnamed"
  };
  
  let id = conf.id;
  let name = conf.name;
  
  console.log(id, name);
}

--- ES6 之后
function fn({
  id = "0000",
  name = "Unnamed"
} = {}) {
  console.log(id, name);
}

再思考一個(gè)問題：是在解構(gòu)中還是在參數(shù)默認(rèn)值中設(shè)定屬性的值？

function fn1(x = {}, {a = 1, b = 2} = x) { console.log(a, b, x) }
function fn2(x = {a: 1, b: 2}, {a, b} = x) { console.log(a, b, x) }

這兩方法的區(qū)別在于：變量a, b的默認(rèn)值的設(shè)置地點(diǎn)。
如果要優(yōu)先確保解析后的變量有默認(rèn)值，第一種方式更為有效。

fn1(); // 1 2 {}
fn2(); // 1 2 {a:1, b:2}

fn1({}); // 1 2 {}
fn2({}); // undefined undefined {}

fn1({ a: 0 }); // 0 2 {a:0}
fn2({ a: 0 }); // 0 undefined {a:0}

將擴(kuò)展運(yùn)算符作用于參數(shù)，即為rest參數(shù)。
它會(huì)將所有相應(yīng)的傳入?yún)?shù)合并成一個(gè)數(shù)組，賦值給rest參數(shù)。
rest參數(shù)只能是最后一個(gè)參數(shù)，沒有正則中所謂的貪婪性，否則會(huì)報(bào)錯(cuò)。

打印出："0001" ["m1","m2"]。

fn("0001", "m1", "m2");

function fn(groupId, ...members) {
  console.log(groupId, members);
}

如果函數(shù)參數(shù)使用了默認(rèn)值、解構(gòu)賦值或擴(kuò)展運(yùn)算符，就產(chǎn)生了參數(shù)作用域。

執(zhí)行函數(shù)體時(shí)，會(huì)先默認(rèn)聲明參數(shù)變量。
如果存在參數(shù)作用域，會(huì)先執(zhí)行它，再到函數(shù)體作用域中。
初始化結(jié)束后，參數(shù)作用域消失，之后函數(shù)體會(huì)默認(rèn)聲明同名變量指向相應(yīng)的參數(shù)變量。

因?yàn)樽饔糜虻拇嬖冢瑓?shù)是惰性（調(diào)用時(shí)）求值的。

let n = 0;

fn(); // 1

n = 1;
fn(); // 2

function fn(num = (n + 1)) {
  console.log(num);  
}

因?yàn)槟J(rèn)聲明原則，在函數(shù)體中聲明同名參數(shù)相當(dāng)二次聲明。
使用let, const相當(dāng)重復(fù)聲明，會(huì)報(bào)錯(cuò)。
使用var會(huì)解綁函數(shù)體與參數(shù)作用域的關(guān)聯(lián)，變量便成了純粹的函數(shù)體變量。

--- 普通
let x = 0;
fn(1); // 2
function fn(x, y = () => { console.log(x) }) {
  x = 2;
  y();
}

--- 解綁
let x = 0;
fn(1); // 1
function fn(x, y = () => { console.log(x) }) {
  var x = 2;
  y();
}

如果存在參數(shù)作用域，就不能在函數(shù)體中顯式的設(shè)定嚴(yán)格模式，否則報(bào)錯(cuò)。
因?yàn)楹瘮?shù)內(nèi)部的嚴(yán)格模式，應(yīng)該同時(shí)作用于函數(shù)體和參數(shù)作用域。
但是只有進(jìn)入函數(shù)體，才能知道是否有顯式地聲明，而參數(shù)體卻先于函數(shù)體執(zhí)行。
不過可以變通的，將此函數(shù)置于一個(gè)處在嚴(yán)格模式的環(huán)境中。

報(bào)錯(cuò)：Illegal "use strict" directive ...
function fn(n = 0) {
  "use strict";
}

不同形式的函數(shù)，其name屬性值構(gòu)建的方式也不相同，下面是個(gè)人總結(jié)的八種方式。

1.聲明式，直接為函數(shù)名。
console.log(fn.name); // "fn"
function fn() {}

2.命名函數(shù)表達(dá)式，直接為函數(shù)名。
let fn1 = function fn() {};
console.log(fn1.name); // "fn"

3.表達(dá)式，為第一次賦值的變量/屬性。
let fn = function() {};
console.log(fn.name); // "fn"
let fn1 = fn();
console.log(fn.name); // "fn"
let obj = { fn: function() {} };
console.log(fn.name); // "fn"

4.沒有賦值的匿名表達(dá)式，為空。
console.log( (function() {}).name ); // ""

5.通過構(gòu)造函數(shù)生成的，為 anonymous 。
console.log( (new Function()).name ); // "anonymous"

6.通過 bind() 生成的，name 屬性值會(huì)加上 bound 前綴。
console.log( (function() {}).bind({}).name ); // "bound "
console.log( (function fn() {}).bind({}).name ); // "bound fn"

7.如果對(duì)象的方法名為 Symbol 值，name 屬性返回的是此 Symbol 的描述。
let s1 = Symbol();
let s2 = Symbol("s2");
console.log( ({ [s1]() {} })[s1].name ); // ""
console.log( ({ [s2]() {} })[s2].name ); // [s2]

8.getter/setter 函數(shù)的 name 屬性，在其描述對(duì)象的 get/set 屬性上，為 get/set 函數(shù)名。
let obj = {
   get name() {}
};
Object.getOwnPropertyDescriptor(obj, "name").get.name; // "get name"

其本質(zhì)含義是該函數(shù)預(yù)期傳入的參數(shù)個(gè)數(shù)。
如果參數(shù)有默認(rèn)值或?yàn)?b>rest參數(shù)，則它以及它之后的參數(shù)都不會(huì)被計(jì)算在內(nèi)。
基于這點(diǎn)，在參數(shù)設(shè)計(jì)上，一般把可以省略或有默認(rèn)值的參數(shù)設(shè)置為尾參數(shù)。

console.log( (function(...args) {}).length ); // 0
console.log( (function(a, {b}, c = 5, d) {}).length ); // 2

類數(shù)組對(duì)象arguments保存的僅僅存儲(chǔ)調(diào)用方法時(shí)傳進(jìn)來的參數(shù)。
這意味著，使用默認(rèn)值的參數(shù)、解構(gòu)參數(shù)或rest參數(shù)等都不在其中。

(function (name = "Wmaker") {
  console.log(name, arguments.length);
})(); // "Wmaker" 0

(function ({a, b}) {
  console.log(a, b, arguments.length);
})({ a: 1, b: 2 }); // 1 2 1

(function (...arr) {
  console.log(arr, arguments.length);
})(1, 2, 3); // [1, 2, 3] 3