關於JavaScript中Get/Set訪問器


有時候大家可能會納悶,在使用JavaScript的時候,只需要給一個系統變量賦值就可以觸發一系列操作去相應。

但是我們在寫Js的時候,修改了一個自定義變量,卻連個P都沒有。是不是很郁悶呢?

其實,我們現在就可以做類似系統變量那樣的功能了!


做個假設,我們有一個變量,要求可以輸入出生年份並自動計算當前年齡。

如:

// 定義一個年齡變量並賦予初始值
var age = 18;
// 我們手動輸入的出生年份
age = 1994;
// 此時age=?

大家可能說我最后的這個疑問有毛病,罵我是SB。。。沒關系。。。剛才我們提過需求了嘛……

按需求來說,age這個時候應該是等於20。

很明顯要做這個操作我們要調用一個函數來進行處理,但是能不能不手動調用函數來完成這個功能呢?

下面我們來介紹一下此章主角 Get/Set訪問器!


說明了,就是我們可以限制一個變量是否可以被訪問或是否可以被重寫。

另外還有一個功能是,我們在訪問或重寫時可以執行其他語句進行處理。


使用方法一:

var age = 18;
var test = {
    get age (){
        return age;
    },
    set age (value){
        if(value > 100) age= new Date().getFullYear() - value;
        else age = value;
    }
};
這個時候我們再寫如下代碼來進行操作。
test.age = 1994;
alert(test.age);
如何?是不是正確的顯示了20這個數字?

可是以上方法比較麻煩也不好理解。我們來看看第二種方法是否更有實用性:

function Person() {
    var age = new Date().getFullYear() - 18;
    Object.defineProperty(this, "age", {
        get: function () { alert("內部存儲數據為:" + age); return new Date().getFullYear() - age; },
        set: function (value) { age = value; }
    });
}
使用以下代碼測試:
var p = new Person();
p.age = 1994;
alert("外部獲取到的數據為:" + p.age);


具體使用哪種方法按照需求進行選擇。


拓展知識:

問:為什么以前沒聽過Get/Set訪問器?

答:因為這是ECMAScript 5新增特性,比較新,所以以前自然是沒有了。


問:我可以在什么樣的瀏覽器中運行?

答:具體的我沒測試過,但是就我本機環境來說這些版本的瀏覽器可以運行(Chrome 32、IE 9、FireFox 28、Opera 19、Safari 5.1.7)。


如有其它問題請評論討論~謝謝!~撒花~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM