## 箭頭函數 它長這樣 `=>` 是不是很抽象呢??
在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)
- 前言
- 你真的懂This嗎?
- 對象和對象構造函數
- 工廠功能和模塊模式
- API的使用
- async and await
- 關于async的很棒的一篇文章
- 掘金:關于forEach,map,fiter循環操作
- Node.js 實例與基礎
- 原創: Express 學習使用筆記
- 零碎知識點方法
- 關于滾動吸頂的方法
- Vue學習筆記
- Vue向導
- vuex是啥?
- vue代碼風格指南
- 關于vue的初體驗
- 超詳細解毒Vue
- Vue實例
- 模版語言
- 組件基礎
- 條件渲染、列表渲染、Class與style綁定
- Todolist的制作超詳細
- vue-router
- Vue基礎2.0x 筆記
- 搭建vuepress
- JavaScript之ES6
- 箭頭函數
- 這就是This