前面的話

　　this機制與函數調用有關，而作用域則與函數定義有關。有沒有什么是可以將this機制和作用域聯系起來的呢？本文將介紹ES6新增的內容——箭頭函數

?

痛點

　　對于閉包的痛點在于，閉包的this默認綁定到window對象，但又常常需要訪問嵌套函數的this，所以常常在嵌套函數中使用var that = this，然后在閉包中使用that替代this，使用作用域查找的方法來找到嵌套函數的this值?

var a = 0; function foo(){function test(){console.log(this.a);}return test; }; var obj = {a : 2,foo:foo } obj.foo()();//0 var a = 0; function foo(){var that = this;function test(){console.log(that.a);}return test; }; var obj = {a : 2,foo:foo } obj.foo()();//2

?

解決

　　而箭頭函數的出現就可以很好的解決該問題。箭頭函數根據當前的詞法作用域而不是根據this機制順序來決定this，所以，箭頭函數會繼承外層函數調用的this綁定，而無論this綁定到什么

var test = () => {console.log(this.a); } //形式上等價于 var test = function(){console.log(this.a); } //實質上等價于 function fn(){var that = this;var test = function(){console.log(that.a);} } var a = 0; function foo(){var test = () => {console.log(this.a);}return test; }; var obj = {a : 2,foo:foo } obj.foo()();//2

?

基本用法

　　ES6允許使用“箭頭”(=>)定義函數，一般稱為胖箭頭

var f = v => v; console.log(f(1));//1 //等同于 var f = function(v) {return v; }; console.log(f(1));//1

　　如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分

var f = () => 5; // 等同于 var f = function () { return 5 };var sum = (num1, num2) => num1 num2; // 等同于 var sum = function(num1, num2) {return num1 num2; };

　　如果箭頭函數的代碼塊部分多于一條語句，就要使用大括號將它們括起來

var sum = (num1, num2) => { var restult = num1 num2;return result; }

　　由于大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號

var getTempItem = id => ({ id: id, name: "Temp" });

?

回調函數

　　箭頭函數最常用于回調函數，如事件處理器或定時器中

function foo() {setTimeout(() => {console.log( this.a );},100); } var obj = {a: 2 }; foo.call( obj ); // 2 //等價于 function foo() {var that = this; setTimeout( function(){console.log( that.a );}, 100 ); } var obj = {a: 2 }; foo.call( obj ); // 2

?

注意事項

　　【1】this在箭頭函數中被綁定，4種綁定規則中的無論哪種都無法改變其綁定

var a = 0; function foo(){var test = () => {console.log(this.a);}return test; }; var obj1 = {a : 1,foo:foo } var obj2 = {a : 2,foo:foo } obj1.foo()();//1 var bar = foo.call(obj1); //由于上一條語句已經把this綁定到obj1上，且無法修改。所以本條語句call(obj2)無效，返回的值是obj1.a的值1 bar.call(obj2);//1

　　【2】箭頭函數不可以當作構造函數，也就是不可以使用new命令，否則會報錯

var foo = () =>{return 1;} foo();//1 var obj = new foo();//Uncaught TypeError: foo is not a constructor

　　【3】箭頭函數中不存在arguments對象

var foo = () =>{console.log(arguments);//Uncaught ReferenceError: arguments is not definedreturn 1; } foo();

?

最后

　　雖然箭頭函數可以把作用域和this機制聯系起來，但是卻容易混淆，使代碼難以維護。應該在作用域和this機制中二選一，否則它們就真的匯成一鍋粥了。或者只使用詞法作用域，或者只使用this機制，必要時使用bind()。盡量避免使用that=this和箭頭函數

　　this機制系列介紹完了。最重要的還是第一篇this機制的綁定原則，第二篇this機制的優先級屬于要點，而本篇則是拓展部分。如有不妥之處，歡迎交流

　　以上

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的深入理解this机制系列第三篇——箭头函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。