JavaScript 箭頭函式與普通函式的區別

2021-09-13 20:00:53 字數 1660 閱讀 3198

箭頭函式除了在寫法上與傳統的function不同外,最主要的區別在於this的指向

.箭頭函式的this基於詞法作用域,而普通函式的this基於上下文。

通俗講就是箭頭函式的this一直指向編輯該函式時的作用域,而普通函式的this指向要基於呼叫它的上下文,看下面例項可能更容易理解

//定義乙個全域性變數counter

var counter =2;

//obj_arrow物件中的func方法返回乙個函式,還函式用箭頭函式編寫

var obj_arrow =}}

//obj_normal物件中的func方法返回乙個函式,還函式用普通函式編寫

var obj_normal =}}

var obj_test =

//測試

//直接呼叫時obj_arrow與 obj_normal,其上下文是window物件,由於obj_arrow.func()返回的函式是用箭頭函式編

//寫,它是基於詞法作用域,其this不受其上下文的影響,this指向仍然是obj_arrow,故其輸出

//的時1;而obj_normal是用普通函式編寫,其基於上下文,所以this指向的window,故其輸出

//的時window中的counter=2.

obj_arrow.

func()

()//輸出1 與 obj_arrow

obj_normal.

func()

()//輸出undefined 與 window

//es6箭頭函式: 它本身沒有this,會沿著作用域向上尋找,直到global / window。

var obj_arrow =

}obj_arrow.

func()

//輸出undefined和window

obj_arrow.func.

call()

//輸出undefined和window

obj_arrow.func.

bind()

()//輸出undefined和window

var obj_func =

}obj_func.

func()

//輸出1和window

obj_func.func.

call()

//輸出2和

obj_func.func.

bind()

()//輸出2和

① es5普通函式:

1. 函式被直接呼叫,上下文一定是window(立即執行函式)

2. 函式作為物件屬性被呼叫,例如:obj.foo(),上下文就是物件本身obj

3.通過new呼叫,this繫結在返回的例項上

const

arrow_func=(

)=>

const

func

=function()

//bind()方法不會改變箭頭函式的this指向

arrow_func()

//window

func()

//windwo

arrow_func.

bind()

//window

func.

bind()

//

關於JavaScript的箭頭函式

箭頭函式是乙個簡寫形式的函式表示式,並且它擁有詞法形式的this值 基本用法 var f v v 這個函式等同於 var f function v var sum num1,num2 num1 num2 等同於 var sum function num1,num2 first last 等同於 fu...

深入理解JavaScript箭頭函式

箭頭函式就是個簡寫形式的函式表示式 並且它擁有詞法作用域的this 值 即不會新產生自己作用域下的this,arguments super 和new.target 等物件 此外,箭頭函式總是匿名的 語法 基礎語法 param1,param2,paramn param1,param2,paramn e...

箭頭函式與this

標準函式中 相對於箭頭函式 this是方法呼叫的上下文物件。箭頭函式中的this會保留定義該函式時的上下文。建立兩個物件 分別模擬定義時的上下文和呼叫時的上下文 let definecontext let invokecontext let standardfunction null 用來存乙個標準...