JS知識點 this指向

2021-10-11 03:48:37 字數 3360 閱讀 4234

this的指向在函式定義的時候是確定不了的,只有函式執行的時候才能確定,this最終指向呼叫它的物件。

1.函式呼叫模式

當乙個函式並非乙個物件的屬性時,那麼它就是被當做函式來呼叫的。在此種模式下,this被繫結為全域性物件,在瀏覽器環境下就是window物件

functiona(

)a()

;

2.方法呼叫模式

當函式被儲存為乙個物件的屬性時,它就可稱為這個物件的方法。當乙個方法被呼叫時,this被繫結到這個物件上,如果呼叫表示式包含乙個提取屬性的動作(.或),那麼它被稱為方法呼叫

var o =}o.

sayname()

;

這裡的this指向的物件是o,因為呼叫這個sayname()函式是通過o.sayname()執行的。

var  o =}}

o.b.fn(

);

因為是o.b呼叫的這個函式,所以指向b這個物件

var  o =}}

o.b.fn(

);

同理,因為是o.b呼叫的這個函式,所以指向b這個物件

var name =

"我是最外面的name"

;var o =}}

var t = o.b.fn;t(

);

t是全域性變數,在全域性環境下執行,this指向window

3.構造函式呼叫模式

如果在乙個函式前面加上new關鍵字來呼叫,那麼就會建立乙個連線到該函式的prototype成員的新物件,同時,this會被繫結到這個新物件上。這種情況下,這個函式就可以成為此物件的建構函式。

functionfn(

)}var a =

newfn()

;

在建構函式,new出乙個物件時,this指向這個建構函式,new關鍵字會改變this的指向

functionfn(

)var f =

newfn()

;console.

log(f.name)

;

當用new關鍵字,返回的是乙個物件,this指向的就是那個返回的物件;

如果返回的不是物件,this還是指向函式的例項,雖然null屬於物件,但是返回null依然指向函式例項

functionfn(

);}var f =

newfn()

;console.

log(f.name)

;

functionfn(

);}var f =

newfn()

;console.

log(f.name)

;

functionfn(

)var f =

newfn()

;console.

log(f.name)

;

functionfn(

)var f =

newfn()

;console.

log(f.name)

;

functionfn(

)var f =

newfn()

;console.

log(f.name)

;

functionfn(

)var f =

newfn()

;console.

log(f.name)

;

var name =

"window"

;var o =

;function

sayname()

sayname()

;sayname

(o);

sayname

(o);

sayname()

;sayname()

;

在全域性範圍內,this指向全域性物件(瀏覽器下指window物件)

物件函式呼叫時,this指向當前物件

全域性函式呼叫時,應該是指向呼叫全域性函式的物件。

使用new關鍵字例項化物件時,this指向新建立的物件

練習題

var name =

"window"

;function

showname()

var person1 =

var person2 =

}person1.

sayname()

;person2.

sayname()

;

在執行person1.sayname()時,時方法呼叫模式,this代表person1這個物件

在執行person2.sayname()時,時方法呼叫,但是sayname,並沒有執行,而是將sayname()這個函式賦值給fun這個變數,fun是函式呼叫模式,this指向window,故輸出全域性的name

vara=

;varb=

function()

varc

=function()

b.prototype =a;

c.prototype =a;

var b =

newb()

;var c =

newc()

;a.n++

;console.

log(b.n)

;console.

log(c.n)

;

執行console.log(b.n)時,b物件有自己的屬性n值

執行console.log(c.n)時,c物件沒有自己的屬性n值,會向上查詢,找的a物件中的屬性n值

var color =

"green"

;var test =};

var getcolor = test.getcolor;

getcolor()

;test.

getcolor()

;

vargetcolor=test.getcolor相當於把方法函式賦值給全域性變數,

故getcolor()中的this指向window

test.getcolor()是方法呼叫

js知識點 掘金 JS小知識點補充

toc 邏輯或與邏輯與 1.在條件判斷中使用 條件中的 兩個條件都成立,整體判斷條件才會成立 條件中的 只要有乙個條件成立,整體判斷條件就成立。2.在賦值操作中使用 var a 1 2 首先驗證1是真假,如果為真,把1賦值給a,如果為假,把2賦值給a a b 先驗證a的真假,為真結果是a,為假結果是...

js小知識點

語法 eq index 使用場景 通常與其他選擇器一起使用,獲取指定組合中指定索引 index 的元素。index值從 0開始,所以第乙個元素的 index值是0 不是1。例項 獲取第11個td 的值 jsondata campaignname this parent parent parent f...

js 初級知識點

1.js 是一種小型的,輕量級的,面向對像的,跨平台的客戶端指令碼語言。2.輸出方法 document.write 在網頁輸出 aleat 彈出警告框 console.log 在控制台列印 3.變數 可以理解為變化的量,左邊變數,右邊值 命名規則 可以包含數字,字母,下劃線。但不能以數字開頭。變數名...