前面的話
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 defined return 1; } foo();
最后
雖然箭頭函數可以把作用域和this機制聯系起來，但是卻容易混淆，使代碼難以維護。應該在作用域和this機制中二選一，否則它們就真的匯成一鍋粥了。或者只使用詞法作用域，或者只使用this機制，必要時使用bind()。盡量避免使用that=this和箭頭函數
this機制系列介紹完了。最重要的還是第一篇this機制的綁定原則，第二篇this機制的優先級屬于要點，而本篇則是拓展部分。如有不妥之處，歡迎交流
以上
文章列表
留言列表
