使用JavaScript給對象修改注冊監(jiān)聽器

妤鋒シ發(fā)布于2019-08-26 12:21 / 2145人閱讀

摘要：測試一下，在瀏覽器里執(zhí)行上述代碼，發(fā)現(xiàn)斷點(diǎn)按照我們期望的被觸發(fā)了從調(diào)用棧也能發(fā)現(xiàn)確實(shí)是這一行代碼觸發(fā)的斷點(diǎn)，我們自己注冊的屬性修改監(jiān)聽器確實(shí)工作了。

我們在開發(fā)一些大型前端項(xiàng)目時，會遇到這樣一種情況，某個變量上有個字段。我們想知道是哪一段程序修改了這個變量上的字段。比如全局變量window上我們自定義了一個新字段_name，我們想知道到底有哪些程序給這個字段賦了值。

一行行地調(diào)試肯定太費(fèi)時間了。如果window這個變量的_name字段被程序賦值時，能執(zhí)行我們自己實(shí)現(xiàn)的一個監(jiān)聽器，這樣不就方便多了么？

監(jiān)聽器的實(shí)現(xiàn)很簡單:

使用Object對象自帶的方法defineProperty, 第一個參數(shù)為要監(jiān)聽的對象window，第二個參數(shù)為要監(jiān)聽的對象字段名稱，_name。

第三個參數(shù)是一個對象，屬性為set，意思是我們想監(jiān)聽window._name被賦值的這個事件。屬性set的值為一個JavaScript函數(shù)，即我們自己定義的監(jiān)聽器。這個監(jiān)聽器，當(dāng)window._name被其他JavaScript函數(shù)修改之后，就會觸發(fā)。

測試一下，在瀏覽器里執(zhí)行上述代碼，發(fā)現(xiàn)斷點(diǎn)按照我們期望的被觸發(fā)了：

從調(diào)用棧也能發(fā)現(xiàn)確實(shí)是window._name = "2"這一行代碼觸發(fā)的斷點(diǎn)，我們自己注冊的屬性修改監(jiān)聽器確實(shí)工作了。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:

GPU云服務(wù)器云服務(wù)器 javascript監(jiān)聽對象一般需要修改監(jiān)聽地址 java 給對象加鎖 json對象刪除修改

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108558.html

相關(guān)文章

使用JavaScript給對象修改注冊監(jiān)聽器

摘要：測試一下，在瀏覽器里執(zhí)行上述代碼，發(fā)現(xiàn)斷點(diǎn)按照我們期望的被觸發(fā)了從調(diào)用棧也能發(fā)現(xiàn)確實(shí)是這一行代碼觸發(fā)的斷點(diǎn)，我們自己注冊的屬性修改監(jiān)聽器確實(shí)工作了。我們在開發(fā)一些大型前端項(xiàng)目時，會遇到這樣一種情況，某個變量上有個字段。我們想知道是哪一段程序修改了這個變量上的字段。比如全局變量window上我們自定義了一個新字段_name，我們想知道到底有哪些程序給這個字段賦了值。一行行地調(diào)試肯定太...

snowLu 2019-08-23 12:29 評論0 收藏0
聊聊DOM中很重要的一個知識點(diǎn)：事件

摘要：事件事件就是瀏覽器告知程序，用戶的行為，用戶點(diǎn)擊了頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的類型事件根據(jù)使用的場景不同，可以分為如下幾種依賴于設(shè)備的輸入事件鍵盤事件和鼠標(biāo)事件，這些事件都是直接和設(shè)備相關(guān)的獨(dú)立于設(shè)備的輸事件事件就是瀏覽器告知JavaScript程序，用戶的行為，用戶點(diǎn)擊了HTML頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的...

church 2019-08-23 11:42 評論0 收藏0
理解vue中的組件（二）

摘要：往往定義組件的構(gòu)造器后，不需要手動的進(jìn)行初始化，而是在其他組件的模板中當(dāng)成標(biāo)簽來使用，這時候需要調(diào)用注冊成組件。這樣設(shè)計的目的是防止從子組件意外改變父級組件的狀態(tài)，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解。上節(jié)說到組件https://segmentfault.com/a/1190000009236700，這一節(jié)繼續(xù)來學(xué)習(xí)組件：原文博客地址，歡迎學(xué)習(xí)交流:點(diǎn)擊預(yù)覽從github上獲取本文代碼：...

Nino 2019-08-23 12:11 評論0 收藏0
瀏覽器內(nèi)核之 HTML 解釋器和 DOM 模型

摘要：書接上文瀏覽器內(nèi)核之資源加載與網(wǎng)絡(luò)棧本文介紹的模型之后，深入的核心部分，剖析的解釋器是如何將從網(wǎng)絡(luò)或者本地文件獲取的字節(jié)流轉(zhuǎn)成內(nèi)部表示的結(jié)構(gòu)樹。事件處理最重要就是事件捕獲和事件冒泡這兩種機(jī)制。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我...

Carbs 2019-08-02 16:04 評論0 收藏0
客戶端的js js腳本的引入 js的解析過程

摘要：瀏覽器中的瀏覽器中的通常稱為客戶端的客戶端對象是所有客戶端特性和的主要接入點(diǎn)。瀏覽器不會執(zhí)行之間的代碼中的事件處理程序當(dāng)腳本所在的文件被載入的時候。可以達(dá)到延遲腳本的執(zhí)行，直到文檔載入和解析完成，才方可操作。 web瀏覽器中的JavaScriptweb瀏覽器中的js通常稱為客戶端的JavaScript 客戶端 JavaScript window對象是所有客戶端JavaScript特性和...

李文鵬 2019-08-23 10:39 評論0 收藏0