淺談在JS中使用Object的watch方法監控對象屬性

noONE 發布于2019-08-21 10:42 / 2471人閱讀

摘要：對其的解釋為概述監視一個對象的某個屬性是否發生變化在該屬性變化時立即觸發指定的回調函數語法參數想要監視值是否發生變化的指定對象的某個屬性的屬性名稱當指定的屬性發生變化時執行的回調函數在內查看其聲明如下可以看到這兩個方法是只針對內核的瀏覽器使

MDN 對其的解釋為:

概述:
    監視一個對象的某個屬性是否發生變化,在該屬性變化時立即觸發指定的回調函數.
語法:
    object.watch(prop, handler)
參數:
    prop
    想要監視值是否發生變化的指定對象的某個屬性的屬性名稱
    handler
    當指定的屬性發生變化時執行的回調函數

在 DHTML.js內查看其聲明如下:

可以看到這兩個方法是只針對 Gecko 內核的瀏覽器使用的(FF 是使用的 Gecko 內核).
wacth 方法有兩個參數,第一個參數是一個字符串,代表需要監視的屬性名,第二個參數是個回調函數
unwatch 方法只有一個參數,代表需要取消監視的屬性名.

使用舉例:

var o = {p:1};
o.watch("p", function (id, oldValue, newValue) {
    console.log("o."+id +" 由 "+oldValue +" 變為 "+newValue);
    return newValue;//注意點
});
o.p = 2;
o.p = 3;
delete o.p;
o.p = 4;

輸出結果為:

這里需要注意的是回調函數必須返回一個值,返回的值會覆蓋原有的值(若無返回值默認返回的是 undefined),可以返回新值

使用watch 方法來監視對象的屬性

//聲明一個類
Person = function (name, age) {
    this.watch("age",Person.prototype._isValidAssignment);
    this.watch("name",Person.prototype._isValidAssignment);
    this.name = name;
    this.age = age;
};

Person.prototype.toString = function () {
    return this.name + " , " + this.age;
};
//定義語義上的私有方法
Person.prototype._isValidAssignment = function(id,oldVale,newValue){
    if(id == "name" && (!newValue || newValue.length > 30)){
        throw new RangeError("不合法的名字 "+ this);
    }
    if(id == "age" && (newValue <0 || newValue >200)){
        throw new RangeError("不合法的年齡 "+ this);
    }
    return newValue;//重點,必須返回
}

will = new Person("will",29);
console.log(will);

try{
    will.name = "";
}catch(e){
    console.log(e);
}

try{
    will.age = -4;
}catch(e){
    console.log(e);
}

輸出結果如下:

最后引入 MDN 的一段描述與注意事項

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86047.html

淺談Vue中計算屬性computed的實現原理

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。當某個屬性發生變化，觸發攔截函數，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數組，并逐個調用的方法，完成響應更新。雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發的多個項目實際經歷來看還是非常愉悅的，Vue文檔清晰規范，api設計簡潔高效，對前端開發人員友好，上手快，甚至個人認為在很多...

laznrbfe 2019-08-23 11:56 評論0 收藏0
做面試的不倒翁：淺談 Vue 中 computed 實現原理

摘要：當某個屬性發生變化，觸發攔截函數，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數組，并逐個調用的方法，完成響應更新。編者按：我們會不時邀請工程師談談有意思的技術細節，希望知其所以然能讓大家在面試有更出色表現。也給面試官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 雖然目前的技術...

Anonymous1 2019-08-23 11:57 評論0 收藏0
細談在HTML中使用JavaScript

摘要：前言是瀏覽器的內置腳本語言。避免，在結構生成之前調用節點，而產生錯誤前言 JavaScript是瀏覽器的內置腳本語言。當網頁中嵌入了JavaScript腳本，瀏覽器加載網頁時，就會執行腳本，從而操作瀏覽器，實現各種動態效果 JavaScript代碼嵌入網頁的方法 1、元素直接嵌入代碼 function sayHello() { alert(hello!); ...

eternalshallow 2019-08-22 17:30 評論0 收藏0
細談在HTML中使用JavaScript

摘要：前言是瀏覽器的內置腳本語言。避免，在結構生成之前調用節點，而產生錯誤前言 JavaScript是瀏覽器的內置腳本語言。當網頁中嵌入了JavaScript腳本，瀏覽器加載網頁時，就會執行腳本，從而操作瀏覽器，實現各種動態效果 JavaScript代碼嵌入網頁的方法 1、元素直接嵌入代碼 function sayHello() { alert(hello!); ...

yacheng 2019-08-02 10:33 評論0 收藏0
2019前端面試題匯總（主要為Vue）

摘要：畢業之后就在一直合肥小公司工作，沒有老司機沒有技術氛圍，在技術的道路上我只能獨自摸索。于是乎，我果斷辭職，在新年開工之際來到杭州，這里的互聯網公司應該是合肥的幾十倍吧。。。。畢業之后就在一直合肥小公司工作，沒有老司機、沒有技術氛圍，在技術的道路上我只能獨自摸索。老板也只會畫餅充饑，前途一片迷茫看不到任何希望。于是乎，我果斷辭職，在新年開工之際來到杭州，這里的互聯網公司應該是合肥的幾十...

arashicage 2019-08-23 15:21 評論0 收藏0