箭頭函式感性認識
箭頭函式 是在es6 中新增的一種規範

x => x * x 相當於 function(x){return x*x}

箭頭函式相當於 匿名函式， 簡化了函式的定義。 語言的發展都是傾向於簡潔 對人類友好的， 減輕工作量的。 就相當於我最鍾情的python, 有很多類似之處， 在 關於promise 文章中我會和Python 框架中的tornado 中的非同步進行對比的， 很相似。

箭頭函式有兩種格式， 一種只包含一個表示式，沒有{…} 和 return 。 一種包含多條語句， 這個時候{} return 就不能省略

x => {
if (x>0){
return x*x
}else{
return x
}
}
1
2
3
4
5
6
7
如果有多個引數就要用（）：

// 兩個引數返回後面的值
(x, y) =>x*y + y*y
//沒有引數
() => 999
// 可變引數
(x, y, ...rest) =>{
var i,sum = x+y;
for (i=0;i<rest.length;i++){
sum += rest[i];
}
return sum;
}
1
2
3
4
5
6
7
8
9
10
11
12
如果要返回一個單物件， 就要注意， 如果是單表示式， 上面一種會報錯， 要下面這種

// 這樣寫會出錯
x => {foo:x} // 這和函式體{}有衝突
// 寫成這種
x => {{foo:x}}
1
2
3
4
箭頭函式中this 指向
箭頭函式 看起來是匿名函式的簡寫。但是還是有不一樣的地方。 箭頭函式中的this是詞法作用域， 由上寫文確定

var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
1
2
3
4
5
6
7
8
9
10
箭頭函式修復了this的指向， this 總是指向詞法作用域， 也就是外層呼叫者obj:

var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj物件
return fn();
}
};
obj.getAge(); // 25
1
2
3
4
5
6
7
8
9
如果使用箭頭函式，以前的那種hack寫法 就不需要了：
var that = this;

由於this 在箭頭函式中已經按照詞法作用域綁定了， 所以施一公call 或者apply() 呼叫函式的時候， 無法對this 進行繫結， 即 傳入的第一個引數被忽略：

var obj={
birth:2018,
getAge:function(year){
var b =this.birth;//2018
var fn = (y)=>y-this.birth //this.birth 仍然是2018
return fn.call({birth:200},year)
}
}
obj.getAge(2020)
1
2
3
4
5
6
7
8
9
下面對比寫es5 es6 直接關於箭頭函式的對比使用
//es5
var fn = function(a, b){return a+b}
//es6 直接被return時候可以省略函式體的括號
const fn=(a,b) => a+b;

//es5
var foo = function(){
var a=20;
var b= 30;
return a+b;
}
//es6
const foo=()=>{
const a= 20;
const b=30;
return a+b
}

// 注意這裡 箭頭函式可以替代函式表示式但是不能替代函式宣告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
再回到this 上面來，箭頭函式樣意義上面來說沒有this. 如果使用了this 那麼就一定是外層this .不會自動指向window物件。所以也就不能使用call/apply/bind來改變this指向

var person = {
name: 'tom',
getName: function() {
return this.name;
}
}

使用es6 來重構上面的物件
const person = {
name:'tom',
getName:()=>this.name
}
這樣編譯的結果就是
var person ={
name:'tom',
getName:function getName(){return undefined.name}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在ES6中，會預設採用嚴格模式，因此this也不會自動指向window物件了，而箭頭函式本身並沒有this，因此this就只能是undefined，這一點，在使用的時候，一定要慎重慎重再慎重，不然踩了坑你都不知道自己錯在哪！這種情況，如果你還想用this，就不要用使用箭頭函式的寫法。

// 可以稍做改動
const person = {
name: 'tom',
getName: function() {
return setTimeout(() => this.name, 1000);
}
}

// 編譯之後變成
var person = {
name: 'tom',
getName: function getName() {
var _this = this; // 使用了我們在es5時常用的方式儲存this引用

return setTimeout(function () {
return _this.name;
}, 1000);
}
};

————————————————
參考連結：https://blog.csdn.net/yangxiaodong88/article/details/80460332