剩余參數和箭頭函數與call方法

剩余參數語法允許我們將一個不定數量的參數表示為一個數組。注：不兼容IE

function sum(...theArgs) {
      return theArgs.reduce((previous, current) => {
        return previous + current;
      });
    }

剩余參數可以被解構，這意味着他們的數據可以被解包到不同的變量中。請參閱解構賦值。

function f(...[a, b, c]) { return a + b + c; } f(1) // NaN (b and c are undefined) f(1, 2, 3) // 6 f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

為了在arguments對象上使用Array方法，它必須首先被轉換為一個真正的數組。

function sortArguments() { var args = Array.prototype.slice.call(arguments); var sortedArgs = args.sort(); return sortedArgs; } console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7



剩余參數與箭頭函數的關系：

箭頭函數不綁定Arguments 對象。因此，使用剩余參數通常有用

箭頭函數應用場景：更適用於那些本來需要匿名函數的地方，並且它不能用作構造函數。

function foo(arg) { var f = (...args) => args[0]; return f(arg); } foo(1); // 1 function foo(arg1,arg2) { var f = (...args) => args[1]; return f(arg1,arg2); } foo(1,2); //2

 

箭頭函數沒有單獨的this

This被證明是令人厭煩的面向對象風格的編程。

function Person() { // Person() 構造函數定義 `this`作為它自己的實例. this.age = 0; setInterval(function growUp() { // 在非嚴格模式, growUp()函數定義 `this`作為全局對象, // 與在 Person()構造函數中定義的 `this`並不相同. this.age++; }, 1000); } var p = new Person();

箭頭函數不會創建自己的this,它只會從自己的作用域鏈的上一層繼承this。因此，在下面的代碼中，傳遞給setInterval的函數內的this與封閉函數中的this值相同：

function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| 正確地指向 p 實例 }, 1000); }

通過 call 或 apply 調用

由於 箭頭函數沒有自己的this指針，通過 call() 或 apply() 方法調用一個函數時，只能傳遞參數（不能綁定this---譯者注），他們的第一個參數會被忽略。（這種現象對於bind方法同樣成立---譯者注）

var adder = { base : 1, add : function(a) { var f = v => v + this.base; return f(a); }, addThruCall: function(a) { var f = v => v + this.base; var b = { base : 2 }; return f.call(b, a);//b被忽略了，本該是this的位置 } }; console.log(adder.add(1)); // 輸出 2 console.log(adder.addThruCall(1)); // 仍然輸出 2

可接受參數的call() 方法

在一個簡寫體中，只需要一個表達式，並附加一個隱式的返回值。在塊體中，必須使用明確的return語句。

var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } }
 var person1 = { firstName:"Bill", lastName: "Gates" } person.fullName.call(person1, "Seattle", "USA");

箭頭函數可以有一個“簡寫體”或常見的“塊體”。

在一個簡寫體中，只需要一個表達式，並附加一個隱式的返回值。在塊體中，必須使用明確的return語句。

var func = x => x * x; // 簡寫函數 省略return var func = (x, y) => { return x + y; }; //常規編寫 明確的返回值

解析順序

雖然箭頭函數中的箭頭不是運算符，但箭頭函數具有與常規函數不同的特殊運算符優先級解析規則。

let callback; callback = callback || function() {}; // ok callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments callback = callback || (() => {}); // ok

更多示例

// 空的箭頭函數返回 undefined let empty = () => {}; (() => 'foobar')(); // Returns "foobar" // (這是一個立即執行函數表達式,可參閱 'IIFE'術語表) var simple = a => a > 15 ? 15 : a; simple(16); // 15 simple(10); // 10 let max = (a, b) => a > b ? a : b; // Easy array filtering, mapping, ... var arr = [5, 6, 13, 0, 1, 18, 23]; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // [6, 0, 18] var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36, 46] // 更簡明的promise鏈 promise.then(a => { // ... }).then(b => { // ... }); // 無參數箭頭函數在視覺上容易分析 setTimeout( () => { console.log('I happen sooner'); setTimeout( () => { // deeper code console.log('I happen later'); }, 1); }, 1);

箭頭函數也可以使用條件（三元）運算符：

var simple = a => a > 15 ? 15 : a; simple(16); // 15 simple(10); // 10 let max = (a, b) => a > b ? a : b;

箭頭函數內定義的變量及其作用域

// 常規寫法 var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} greeting(); //"Good day." console.log(now); // ReferenceError: now is not defined 標准的let作用域 // 參數括號內定義的變量是局部變量（默認參數） var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day."); greeting(); //"Good day." console.log(now); // ReferenceError: now is not defined // 對比：函數體內{}不使用var定義的變量是全局變量 var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} greeting(); //"Good day." console.log(now); // Fri Dec 22 2017 10:01:00 GMT+0800 (中國標准時間) // 對比：函數體內{} 用var定義的變量是局部變量 var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} greeting(); //"Good day." console.log(now); // ReferenceError: now is not defined 

箭頭函數也可以使用閉包：

// 標准的閉包函數 function A(){ var i=0; return function b(){ return (++i); }; }; var v=A(); v(); //1 v(); //2 //箭頭函數體的閉包（ i=0 是默認參數） var Add = (i=0) => {return (() => (++i) )}; var v = Add(); v(); //1 v(); //2 //因為僅有一個返回，return 及括號（）也可以省略 var Add = (i=0)=> ()=> (++i);

箭頭函數遞歸

var fact = (x) => ( x==0 ? 1 : x*fact(x-1) ); fact(5); // 120