this的指向問題

2021-09-12 16:33:12 字數 1835 閱讀 6278

對於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永遠指向他的呼叫者,但這裡...