探索JS中this的最終指向

2022-08-25 17:03:23 字數 856 閱讀 8940

js 中的this 指向 一直是前端開發人員的乙個痛點難點，專案中有很多bug往往是因為this指向不明確（this指向在函式定義時無法確定，只有在函式被呼叫時，才確定該this的指向為最終呼叫它的物件）而錯誤引起的，接下來就根據兩個簡單案例來深刻認識哈

【注】本案例使用vue 搭建的專案進行測試

先建立乙個vue專案，在components下新增乙個util目錄在裡面新建乙個class

class


replacecontextinclass


getname()


}export


default replacecontextinclass
再新增乙個understandercontextines5.js

window.pname =


'george'


var objdeclare =


innerfun()


}}module.exports = objdeclare
然後在components目錄下新增understandthisscope.vue



="page-container"


>


"../assets/logo.png"


>


"replacethis"


>點選改變this


<


/button>


<


/div>


<


/div>


<


/template>
				
js中this的指向
lang en charset utf 8 深入理解thistitle head 它代表函式執行時，自動生成的乙個內部物件，只能在函式內部使用。隨著函式使用場合的不同，this的值會發生變化。但是有乙個總的原則，那就是this指的是，呼叫函式的那個物件。demo1 function demo1 呼叫...

				
js中this的指向
this的指向在函式定義的時候是確定不了的，只有函式執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個呼叫它的物件 functiona a 按照我們上面說的this最終指向的是呼叫它的物件，這裡的函式a實際是被window物件所點出來的，下面的 就可以證明。var o o.fn ...

				
js中的this指向
首先必須要說的是，this的指向在函式定義的時候是確定不了的，只有函式執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個呼叫它的物件 這句話有些問題，後面會解釋為什麼會有問題，雖然網上大部分的文章都是這樣說的，雖然在很多情況下那樣去理解不會出什麼問題，但是實際上那樣理解是不準確的...