JS關於this指向的理解(通俗易懂)

2021-10-09 12:35:31 字數 1449 閱讀 1992

所謂的this指向,就是乙個物件。不同呼叫情況下同乙個this的指向都可能不同,同時我們也可以手動修改this指向。

如下圖所示

var a =

1var obj =

functionfn(

)fn()

如果在函式呼叫fn()前什麼也沒有,那麼此時的fn內的this —> window。也就是控制台列印的a為全域性變數中的 a = 1。

這裡要注意如果在嚴格模式(use strict)下this將不會指向window,而是會報錯。

如下圖所示

var a =

1var obj =,}

obj.fn(

)var objj =

objj.b.fn(

)

如果函式呼叫前有物件【obj.fn( ) / objj.b.fn()】,此時fn中的this會指向距離最近的obj。就像上述**中控制台會列印兩個2.

來乙個小測試測試以下朋友們

function

fn1(

)var obj =

var a =

2function

fn2(fn)

fn2(obj.fn1)

這裡的答案為2,因為在fn前什麼也沒有,所有這邊是我們說的預設繫結,也就是this ——>window。看到這裡有沒有對前兩種的繫結有更深的理解?

var a =

1functionfn(

)var obj =

fn.call

(obj)

fn.

call

(null

)

function

person()

var p =

newperson

()

如果函式是建構函式,此時this指向例項化物件。

這裡我們可以稍微拓展以下。

這裡new的作用是:1.修改函式this的指向

2.可以呼叫函式, 有意思的是在控制台中列印new person ,也是可以成功的列印出例項化物件。

感興趣的小夥伴可以在控制台中試一下。

問:當出現多個繫結方式的時候該如何確定this的指向呢?

答:他們其實是有乙個優先順序的。

new > 顯式 > 隱式 > 預設 。

看到這裡,對於this指向問題有沒有乙個更加深刻的理解。希望這篇隨筆能對大家有所幫助。

js原型的通俗理解

剛學習js的時候,寫過一篇有關於原型的部落格,借鑑於他人的理解 什麼是原型?原型是乙個物件,其他物件可以通過它實現屬性繼承。可以把函式看成乙個類,原型是所有類都有的乙個屬性,js原型的作用就是給這個類的每乙個物件都新增乙個統一的方法,看一下下面這段 就能輕易理解 如果僅僅是因為乙個例項而使用原型是沒...

關於js this指向的理解

var obj add1 function a var f v v this.count return f.call b,a add2 function a var f function v return f.call b,a console.log obj.add 1 2 console.log ...

理解js中this的指向問題

在前端的飛速發展的過程中,各種框架層出不窮,但是當大家看到這些框架的原始碼時,大家也許會發現很多框架都有this 這個問題,由此看來this的指向是多麼的重要,但是關於this問題許多人對於他的指向問題一直都是很模糊,那麼就讓我們來一起看一下this的指向到底是怎麼樣的。首先必須要說的是,this的...