箭頭函式中的this和普通函式中的this對比

2022-03-28 14:26:12 字數 1330 閱讀 3761

es6中新增了箭頭函式這種語法,箭頭函式以其簡潔性和方便獲取this的特性。下面來總結一下他們之間的區別：

普通函式下的this:

箭頭函式中的this:

看下面這段**:

function a()   


a();
因為a是乙個全域性函式，也就是掛載在window物件下的，所以a(),等價於window.a();

var obj = );  


}  }   


obj.say();
定時器中的函式，由於沒有預設的宿主物件，所以this指向window

var obj = ,  


say: function () );   


}  }  


obj.say();
此時say的宿主環境是obj,所以say裡面的this是obj,定時器中的函式, 由於沒有預設的宿主物件,所以預設this指向window

嚴格模式下的this:

function test()   


test();
在嚴格模式下,沒有直接呼叫者的函式中的this是 undefined

"use strict";   


var obj=  


};  


obj.say();
有直接呼叫者的this是它的呼叫者

箭頭函式中的this:

var obj = );  


}  }  


obj.say();
此時的 this繼承自obj, 指的是定義它的物件obj, 而不是 window!

var obj = )  


}  f1();  


}  }   


obj.say()



因為f1定義時所處的函式 中的 this是指的 obj, settimeout中的箭頭函式this繼承自f1,所以不管有多層巢狀,都是 obj



var obj = )  


};  


f1();  


}  }  obj.say()
結果: 都是 window,因為 箭頭函式在定義的時候它所處的環境相當於是window, 所以在箭頭函式內部的this函式window

普通函式和箭頭函式中的this指向

普通函式的this指向window function a a windowdom元素繫結事件時的this，控制代碼裡的 this 值是該元素的引用 document.onclick function thissetinterval和settimeout中傳入函式時，函式中的this會指向window...

箭頭函式 普通函式

箭頭函式的語法比普通函式更簡潔，是乙個匿名函式，不能作為建構函式，且不能使用new 普通函式 letfun 普通函式 function fun 箭頭函式有兩種格式 一種是和return 另一種是把二者省略掉 1 1.不能使用newlet fun let fn newfun 1.function on...

箭頭函式和普通函式對比

let xx item item 單條語句可以省略return和 單個引數可以省略 let a let a new a 報錯 function a let a new a 不報錯arguments的一般使用場景是 允許傳入3個引數，中間乙個引數是可選。如果只傳1個參就是引數1用，傳入2個參就是引數1...