標準函式中(相對於箭頭函式),this是方法呼叫的上下文物件。
箭頭函式中的this會保留定義該函式時的上下文。
//建立兩個物件 分別模擬定義時的上下文和呼叫時的上下文
let definecontext =
;let invokecontext =
let standardfunction =
null
;//用來存乙個標準函式
let arrowfunction =
null
;//用來存乙個箭頭函式
//在這個函式裡定義上述兩個函式。在呼叫這個函式時,通過call將上下文definecontext傳入
function
definefunction()
arrowfunction=(
)=>
}//將上下文傳入
definefunction.
call
(definecontext)
;//這個函式僅有兩句話 就是定義兩個函式
//這兩個函式定義時(執行函式中的兩句話) 上下文為傳入的definecontext 因此箭頭函式的this在現在就已經確定了
//不傳入上下文呼叫上面定義的兩個函式
standardfunction()
;//對於標準函式來說 如果不傳上下文 this為undefined
arrowfunction()
;//箭頭函式在上面定義時就已經確定了上下文 this為definecontext
console.
log(
"---------------------------------");
//通過傳入上下文來呼叫兩個函式
standardfunction.
call
(invokecontext)
;//標準函式呼叫時 this指向呼叫的上下文 this為invokecontext
arrowfunction.
call
(invokecontext)
;//箭頭函式在定義時就確定了上下文 這裡即使看起來穿了乙個上下文 其實不起作用 所以 這裡的this仍然指向definecontext
//輸出結果為
undefined
definecontext
----
----
----
----
----
----
----
----
-invokecontext
definecontext
上面提到過,箭頭函式this指向定義時的上下文,也就是執行函式定義的語句時的this值。
當定義乙個普通函式後,它的this值是不確定的,在呼叫時才能知道;但是,可以使用bind()函式給this繫結乙個值,在之後即使使用call()
來呼叫,this的值也不會改。
所以,在普通函式的定義語句後,緊跟一句.bind(this)
,就可以將當前上下文(函式定義時的上下文)繫結到這個普通函式,這樣就有了和箭頭函式一樣的行為。
對於上面的例子,可以做如下修改(其它部分不修改):
function
definefunction()
;arrowfunction
=function()
; arrowfunction = arrowfunction.
bind
(this);
}
之後的輸出結果與上面完全一致。 箭頭箭頭函式
var fn function a 一樣 jineng function 箭頭函式外面指向誰就指向誰 有function.console.log fn3 1 像函式表示式 this指向不變.不能作為建構函式 不能使用new 返回物件的話.外部用括號 var fn7 name asdfnasd age...
箭頭函式寫法 箭頭函式
1 箭頭函式介紹 es6 let fn v v console.log fn 好酷的箭頭函式!好酷的箭頭函式!es5 let fn function v 和return省略掉 v v v 相當於 function v 和return v 和return時,如果返回的內容是乙個物件,物件需要用括號 括...
箭頭函式與普通函式區別
1 箭頭函式是匿名函式,不能作為建構函式,不能使用new 2 箭頭函式不繫結arguments,取而代之用rest引數 解決 3 this的作用域不同,箭頭函式不繫結this,會捕獲函式定義的上下文中的this值,作為自己的this值,且一直不變 4 箭頭函式沒有原型物件 5 箭頭函式不能當作gen...