## 箭頭函數 它長這樣 `=>` 是不是很抽象呢?? 在Es6中箭頭函數是其中最有趣的新增特性那么它有什么呢？？ 1. **沒有this、super（特級）、arguments（參數）和new.target綁定** 箭頭函數中的**this**、**super**、以及**new.target**這些值由外圍最近一層非箭頭函數決定 2. **不能通過new關鍵字調用箭頭函數沒有[[construct]]方法**，所以不能被用作構造函數，如果通過new關鍵字調用箭頭函數，程序會拋出錯誤 > ```javascript > var Foo = () => {}; > var foo = new Foo(); // TypeError: Foo is not a constructor > ``` 1. **沒用原形由于不能通過new關鍵字調用箭頭函數**，因而沒有構建原型的需求所以箭頭函數不存在prototype這個屬性 > ```js > var Foo = () => {}; > console.log(Foo.prototype); // undefined > ``` 1. 不支持**arguments** 對象箭頭函數**沒有arguments綁定**，所以你必須通過命名參數和不定參數這兩種形式訪問函數的參數 2. **不支持重復命名參數** 無論在嚴格還是非嚴格模式下箭頭函數都不能支持重復的命名參數；而在傳統函數的規定中只有在嚴格模式下才不能有重復的命名參數 ## 箭頭函數的的大型選美現場?? 一號佳麗?? 當你只有單一參數和只需要返回簡單的值時可以使用以下這種 ``` let refletct = value => value; 等價于 let reflect = funciton(value){ return value; } ``` 二號佳麗?? 兩個以上的就比較豪氣啦！弄個括號包起來畢竟不像 single dog嘛?? ``` let sum = (num1 , num2) => num1 + num2 等價于 let sum = function(num1 , num2){ return sum1 + sum2 } ``` 三號佳麗???♀? 因為跑步啥也沒帶所以我們啥也不用傳那么要怎么寫呢? ``` let sum = ( ) => 'hellow world' 等價于 let sum = function(){ return 'hellow world' } ``` 四號佳麗?? 色即是空，???即是色 ``` let sum =( ) => {} 等價于 let sum = function(){ //.... } ``` 五號佳麗?? 花括號代表函數體的部分如果想在箭頭函數外返回一個對象字面量，則需要將該字面量包括在小括號里 ``` let getTempItem = id =>({ id:id, name:"Temp"}) 等價于 let sum = function(id){ return { id:id, name:"Temp" } } ``` ## 不綁定This 在箭頭函數出現之前，每個新定義的函數都有它自己的 `this`值（在構造函數的情況下是一個新對象，在嚴格模式的函數調用中為 undefined，如果該函數被作為“對象方法”調用則為基礎對象等）。`This`被證明是令人厭煩的面向對象風格的編程。 ??箭頭函數不會創建自己的`this,`它只會從自己的作用域鏈的上一層繼承 `this` ```js function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| 正確地指向 p 實例 }, 1000); } var p = new Person(); ``` 如果指向錯誤除了使用箭頭函數還可以把值分配給封閉的變量，可以解決`this`問題 ```js function Person() { var that = this; that.age = 0; setInterval(function growUp() { // 回調引用的是`that`變量, 其值是預期的對象. that.age++; }, 1000); } ``` #### 函數的寫法 ```js var func = x => x * x; // 簡寫函數 省略return var func = (x, y) => { return x + y; }; //常規編寫 明確的返回值 ``` #### 箭頭函數也能使用三元表達式 ```js var simple = a => a > 15 ? 15 : a; simple(16); // 15 simple(10); // 10 ``` #### 更簡明的promise鏈 ```js promise.then(a => { // ... }).then(b => { // ... }); ``` #### 箭頭函數進行排序 ```javascript var arr = [10, 20, 1, 2]; arr.sort((x, y) => { return x-y }); console.log(arr); // [1, 2, 10, 20] arr.sort((x, y) => x-y); console.log(arr); // [1, 2, 10, 20] ``` 參考資料：深入了解ES6 ? [廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000) ? [MDN web docs](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 有待更新 ????點我[提issue](https://github.com/ragnar-document/ragnar-document.github.io/issues)