箭頭函式除了在寫法上與傳統的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 用來存乙個標準...