對於js基礎不是很好的我,一直不太懂this的指向問題。要搞懂這個還是得多動手。
首先,我們知道
1.函式被呼叫時可以確定該函式內this的指向。因為函式中的this和arguments時兩個特殊的變數,在函式被呼叫時才會取得他們,而搜尋著兩個變數時只會在活動變數中找。
2.確定函式被呼叫的位置,從而確定函式中this的指向。
以下是常見的幾種形式
第一種
var i=1;
function test()
test(); //直接呼叫,指向window
在控制台輸出:1。
這種不帶任何物件去呼叫test()函式的,指向全域性變數,即是預設下this指向全域性物件(瀏覽器的window)。
第二種
var i = 1;
function test()
var obj =
obj.test(); //obj呼叫函式,指向obj
在控制台輸出:2.
這時在test()函式前有物件,很顯然this已經嫁給這個obj了,所以輸出obj裡i的2。也就是誰去呼叫這個函式,這個函式的this就繫結在誰的身上。多級呼叫的話就指向直屬物件,eg:obj1.obj.test();this也是繫結obj的。
但是如果這樣:var test1 = obj.test; test1();這時候神奇的輸出了i為1。為什麼呢?
我們知道函式的呼叫有1.func(x1,x2),2.obj.func(x1,x2),3.func.call(cont***,x1,x2)這三種。其實前兩種都可以轉換為第三種
func(x1,x2)轉換為func.call(undefined,x1,x2),abj.function(x1,x2)轉換obj.func.call(obj,x1,x2)。可以看出this其實就是你call乙個函式傳入的第乙個引數。而第一種時傳入undefined,瀏覽器預設下會把undefined和null都轉為window。
所以test1()轉成test1.call();這時候可以把上面提到的test1()呼叫改為test1.call(obj);這時候又會輸出i為2。
一開始我也很疑惑,不是obj.test賦給test1了嗎?可以console.log(test1)看一下,它輸出了test這個函式體,那直接test1()就是直接test()。
第三種
var i = 1;
function test (i)
var j = new test(2);
console.log(j.i);
這種採用new操作符,建立了乙個新的物件,而被new的test(),稱之為建構函式,而建構函式可以定義一下將要到來的新物件的一些屬性,而這個將要到來的新物件就是用this來指示。
這裡輸出j,console.log(j)會得到
test
i: 2
可以看出j就是這個新物件。
第四種
可以說是普通函式和箭頭函式的區別。
上面說到物件呼叫函式時,this指向物件(obj.test())。
但在箭頭函式中這個不適用。
var i = 1;
var test = () =>
var obj =
obj.test();
上面**輸出i的值為1。
箭頭函式在定義的時候就已經確定,它this指向的是它外層作用域的this的指向。
至此,寫完。
this的指向問題
function foo var a 1 foo const obj obj.foo const c new foo function a console.log a 箭頭函式是沒有this的,箭頭函式中的this只取決包裹箭頭函式的第乙個普通函式的this。在這個例子中,因為包裹箭頭函式的第乙個普...
this的指向問題
宣告 本文 追夢子 大大的文章 徹底理解js中this的指向,不必硬背。偶遇此文自我總結一下,受益良多 例1 function a a 注意函式是在什麼作用域中呼叫的 這個函式實在全域性作用域中呼叫所以this指向的是window 全域性中沒有user所以是undefineds 例2 var o o...
this的指向問題
this 的指向問題 第一種 指向呼叫者 function a a 每乙個函式前面都會隱式的呼叫window,所以相當於window.a var a a.fn a呼叫了fn 所以this指向的是a 在舉個特殊的例子作對比 var a var j a.fn j 在這裡this永遠指向他的呼叫者,但這裡...