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

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 的一段描述與注意事項