ES6在函數方面的擴大比較豐富也很有用，本篇歸納綜合了這中的英華學問。
1 箭頭函數
箭頭函數是ES6中定義函數的新情勢。
新情勢不僅簡化了定義體式格局，越發函數本身減重（其this, argumnets等與之前差別）。
let fn = () => {
console.log('fn');
};
fn(); // 'fn'
假如只要一個參數，能夠省略括號。
(n => {
console.log(n);
})(1); // 1
假如不帶 {} ，意味着直接返回 => 指向的目的。
console.log( (n => 2)(1) ); // 2
注重，指向的目的只能是單體，假如為表達式需要用 () 包裹構成單體。
console.log( (n => (n + 1))(1) ); // 21.1 this
箭頭函數沒有本身的this，其運用的this是援用外層的（相似閉包）。
因而其裏面的this是牢固的，在定義的那一刻起就已肯定，不會再變。
非嚴厲情勢下。
--- 之前的函數是實行時肯定 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 。
--- 箭頭函數是定義時肯定 this 。
window.id = 0;
let obj = { id: 1 };
let fn = () => {
console.log(this.id);
};
fn(); // 0，援用的是 window 。
obj.fn = fn;
obj.fn(); // 0，援用的是 window 。再利用多層箭頭函數來申明。
多層箭頭函數，this的尋覓門路是一層層向上查找的，相似作用域鏈查找。
所以多層箭頭函數在首次獲取到this時，悉數函數的this便都肯定了。
foo.call({id: 1})()(); // id: 1
function foo() {
return () => {
return () => {
console.log('id:', this.id);
};
};
}
--- 等價於
function foo() {
let _this = this;
return function() {
return function() {
console.log('id:', _this.id);
}
}
}由於沒有本身的this。
所以沒法成為組織函數，不能運用new操作符。
所以不能用call, apply和bind這些要領轉變this的指向。
let Person = () => {};
let p = new Person(); // 報錯，Person is not a constructor。
window.id = '000';
let fn = () => { console.log(this.id) };
let fn1 = fn.bind({ id: '111' });
fn1(); // '000'1.2 別的的差別
函數體內沒有arguments對象，能夠運用rest參數替代。
不能運用yield敕令，因而箭頭函數不能用作Generator函數（能夠運用async函數）。
let fn = (...args) => {
console.log(args); // [1, 2]
console.log(arguments); // 報錯，arguments is not defined。
};
fn(1, 2);2 函數參數
2.1 默許值
能夠為參數設定默許值。
當沒有通報該參數或值為undefined時，默許值將被運用。
借用此體式格局，能夠簡化函數體，並使參數的性子、範例等越發清楚。
--- 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.');
}2.2 解構賦值
連繫解構賦值，默許值設定的功用會越發壯大。
關於解構賦值，可參考此鏈接。
為了直觀的顯現它的上風，我們將終究的效果分紅三步。
1.運用解構賦值，疾速聲明變量，並給予響應的屬性值。
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.緊接着，為解構中的變量設定默許值。
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.末了，再為此參數設定默許值。
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);
}再思索一個題目：是在解構中照樣在參數默許值中設定屬性的值？
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) }
這兩要領的區分在於：變量a, b的默許值的設置所在。
假如要優先確保剖析后的變量有默許值，第一種體式格局越發有用。
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}2.3 rest 參數
將擴大運算符作用於參數，即為rest參數。
它會將一切響應的傳入參數合併成一個數組，賦值給rest參數。 rest參數只能是末了一個參數，沒有正則中所謂的貪慾性，不然會報錯。
打印出：'0001' ['m1','m2']。
fn('0001', 'm1', 'm2');
function fn(groupId, ...members) {
console.log(groupId, members);
}2.4 作用域
假如函數參數運用了默許值、解構賦值或擴大運算符，就產生了參數作用域。
實行函數體時，會先默許聲明參數變量。
假如存在參數作用域，會先實行它，再到函數體作用域中。
初始化完畢后，參數作用域消逝，以後函數體味默許聲明同名變量指向響應的參數變量。
由於作用域的存在，參數是惰性（挪用時）求值的。
let n = 0;
fn(); // 1
n = 1;
fn(); // 2
function fn(num = (n + 1)) {
console.log(num);
}由於默許聲明準繩，在函數體中聲明同名參數相稱二次聲明。
運用let, const相稱反覆聲明，會報錯。
運用var會解綁函數體與參數作用域的關聯，變量便成了地道的函數體變量。
--- 平常
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();
}假如存在參數作用域，就不能在函數體中顯式的設定嚴厲情勢，不然報錯。
由於函數內部的嚴厲情勢，應當同時作用於函數體和參數作用域。
然則只要進入函數體，才曉得是不是有顯式地聲明，而參數體卻先於函數體實行。
不過能夠變通的，將此函數置於一個處在嚴厲情勢的環境中。
報錯：Illegal 'use strict' directive ...
function fn(n = 0) {
"use strict";
}3 函數屬性
3.1 name
差別情勢的函數，其name屬性值構建的體式格局也不相同，下面是個人總結的八種體式格局。
1.聲明式，直接為函數名。
console.log(fn.name); // 'fn'
function fn() {}
2.定名函數表達式，直接為函數名。
let fn1 = function fn() {};
console.log(fn1.name); // 'fn'
3.表達式，為第一次賦值的變量/屬性。
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.沒有賦值的匿名表達式，為空。
console.log( (function() {}).name ); // ''
5.經由過程組織函數天生的，為 anonymous 。
console.log( (new Function()).name ); // 'anonymous'
6.經由過程 bind() 天生的，name 屬性值會加上 bound 前綴。
console.log( (function() {}).bind({}).name ); // 'bound '
console.log( (function fn() {}).bind({}).name ); // 'bound fn'
7.假如對象的要領名為 Symbol 值，name 屬性返回的是此 Symbol 的形貌。
let s1 = Symbol();
let s2 = Symbol('s2');
console.log( ({ [s1]() {} })[s1].name ); // ''
console.log( ({ [s2]() {} })[s2].name ); // [s2]
8.getter/setter 函數的 name 屬性，在其形貌對象的 get/set 屬性上，為 get/set 函數名。
let obj = {
get name() {}
};
Object.getOwnPropertyDescriptor(obj, 'name').get.name; // 'get name'3.2 length
其本質寄義是該函數預期傳入的參數個數。
假如參數有默許值或為rest參數，則它以及它以後的參數都不會被盤算在內。
基於這點，在參數設想上，平常把能夠省略或有默許值的參數設置為尾參數。
console.log( (function(...args) {}).length ); // 0
console.log( (function(a, {b}, c = 5, d) {}).length ); // 23.3 arguments
類數組對象arguments保留的僅僅存儲挪用要領時傳進來的參數。
這意味着，運用默許值的參數、解構參數或rest參數等都不在个中。
(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