箭頭函數(shù)的特性:
- 對this的關(guān)聯(lián)党窜。箭頭函數(shù)內(nèi)置的this的值壳澳,取決于箭頭函數(shù)在哪定義又谋,而非箭頭函數(shù)執(zhí)行的上下文環(huán)境荞胡。
- new不可用妈踊。箭頭函數(shù)內(nèi)不能使用new關(guān)鍵字來實例化對象,否則報錯泪漂。
- 沒有arguments對象廊营。不能通過arguments對象訪問傳入?yún)?shù),只能使用顯式命名或其他ES6新特性來完成萝勤。
- this不可變露筒。函數(shù)內(nèi)置的this不可變,在函數(shù)體內(nèi)整個執(zhí)行環(huán)境中未常量敌卓。
有這些這些差異的原因:對this的綁定是JavaScript錯誤的常見來源之一慎式。容易丟失函數(shù)內(nèi)置數(shù)值,或得出意外結(jié)果趟径。其次瘪吏,將箭頭函數(shù)限制為使用固定this引用,有利于JavaScript引擎優(yōu)化處理蜗巧。
常見使用:
//箭頭函數(shù)返回單個值(當(dāng)入?yún)⑹且粋€不需要加())
var getItem=key=>value;
//返回運算表達式結(jié)果
var sum=(n1,n2)=>n1+n2;
//返回運算表達式結(jié)果
var sum2=()=>1+1;
//大括號函數(shù)體
var sum3=(n1,n2)=>{return n1+n2;}
//箭頭函數(shù)返回對象
var getItem2=key=>({
id:key,
name:'jm'
})
使用普通的function聲明函數(shù):
var Comp = {
id='123' ,
init:function(){
document.addEventListener("click", function(event) {
this.doSomething(event.type); // error
}, false);
},
doSomething:function(type){
console.log("Handling " + type + " for " + this.id);
}
}
這里掌眠,因為函數(shù)內(nèi)部this關(guān)聯(lián)問題,this會根據(jù)當(dāng)前函數(shù)執(zhí)行環(huán)境去取值幕屹,所以this.doSomething(event.type); 這里的this會指向全局對象蓝丙,全局對象沒有doSomething方法,就undefinde了望拖。
解決:
這里在函數(shù)中使用bind()將this與Comp明確關(guān)聯(lián)起來渺尘,相當(dāng)于又創(chuàng)建一個已關(guān)聯(lián)現(xiàn)有this的新函數(shù),即可解決問題说敏。
var Comp = {
id='123' ,
init:function(){
document.addEventListener("click", (function(event) {
this.doSomething(event.type); // error
}).bind(this), false);
},
doSomething:function(type){
console.log("Handling " + type + " for " + this.id);
}
}
當(dāng)然鸥跟,由于前面所述箭頭函數(shù)內(nèi)置的this的值,取決于箭頭函數(shù)在哪定義像云,而非箭頭函數(shù)執(zhí)行的上下文環(huán)境锌雀。
這里將function聲明的函數(shù)替換為箭頭函數(shù)蚂夕,即可直接使用this.doSomething()了迅诬。
var Comp = {
id='123' ,
init:function(){
document.addEventListener("click", ()=>this.doSomething(), false);
},
doSomething:function(type){
console.log("Handling " + type + " for " + this.id);
}
}
當(dāng)然,箭頭函數(shù)的聲明方式也就決定了其簡練性婿牍,使得代碼直觀侈贷,簡單,值得去使用。
其他:
- 1.對箭頭函數(shù)進行typeof操作會返回“function”俏蛮。
- 2.箭頭函數(shù)仍是Function的實例撑蚌,故而instanceof的執(zhí)行方式與傳統(tǒng)函數(shù)一致。
- 3.call/apply/bind方法仍適用于箭頭函數(shù)搏屑,但就算調(diào)用這些方法擴充當(dāng)前作用域争涌,this也依舊不會變化。
箭頭函數(shù)與傳統(tǒng)函數(shù)最大的不同之處在辣恋,禁用new操作亮垫。