JavaScript中getter/setter的實現

jopen 10年前發布 | 15K 次閱讀 JavaScript開發 JavaScript
雖然ES5中為我們提供了Object.defineProperty方法來設置getter與setter，但此原生方法使用起來并不方便，我們何不自己來實現一個類，只要繼承該類并遵循一定的規范就可以擁有媲美原生的getter與setter。
現在我們定義以下規范：
取值器跟設值器遵循格式：_xxxGetter/_xxxSetter，xxx代表需要被控制的屬性。例如，如果要控制foo屬性，則對象需要提供 _fooGetter/_fooSetter方法來作為實際的取值器與控制器，這樣我們可以帶代碼中調用obj.get(‘foo’)和 obj.set(‘foo’, value)來進行取值與設值；否則調用get與set方法相當于代碼：obj.foo和obj.foo = value;
提供watch函數：obj.watch(attr, function(name, oldValue, newValue){});每次調用set方法時，便會觸發fucntion參數。 function中name代表被改變的屬性，oldValue是上一次該屬性的值，newValue代表該屬性的最新值。該方法返回一個handle對象，擁有remove方法，調用remove將function參數從函數鏈中移除。
首先使用閉包模式，使用attributes變量作為私有屬性存放所有屬性的getter與setter：
var Stateful = (function(){
    'use strict';

var attributes = {
    Name: {
        s: '_NameSetter',
        g: '_NameGetter',
        wcbs: []
    }
};

var ST = function(){};

return ST;

})()</pre></div>
其中wcbs用來存儲調用watch(name, callback)時所有的callback。 

第一版實現代碼如下： 

var Stateful = (function(){
    'use strict';

var attributes = {};

function _getNameAttrs(name){
    return attributes[name] || {};
}

function _setNameAttrs(name) {
    if (!attributes[name]) {
        attributes[name] = {
            s: '_' + name + 'Setter',
            g: '_' + name + 'Getter',
            wcbs: [] 
        }
    }
}

function _setNameValue(name, value){
    _setNameAttrs(name);
    var attrs = _getNameAttrs(name);
    var oldValue = _getNameValue.call(this, name);
    //如果對象擁有_nameSetter方法則調用該方法，否則直接在對象上賦值。
    if (this[attrs.s]){
        this[attrs.s].call(this, value);
    } else {
        this[name] = value;
    }

    if (attrs.wcbs && attrs.wcbs.length > 0){
        var wcbs = attrs.wcbs;
        for (var i = 0, len = wcbs.length; i < len; i++) {
            wcbs[i](name, oldValue, value);
        }
    }
};

function _getNameValue(name) {
    _setNameAttrs(name);
    var attrs = _getNameAttrs(name);

    var oldValue = null;
    // 如果擁有_nameGetter方法則調用該方法，否則直接從對象中獲取。
    if (this[attrs.g]) {
        oldValue = this[attrs.g].call(this, name);
    } else {
        oldValue = this[name];
    }

    return oldValue;
};

function ST(){};

ST.prototype.set = function(name, value){
    //每次調用set方法時都將name存儲到attributes中
    if (typeof name === 'string'){
        _setNameValue.call(this, name, value);
    } else if (typeof name === object) {
        for (var p in name) {
            _setNameValue.call(this, p, name[p]);
        }
    }

    return this;
};

ST.prototype.get = function(name) {
    if (typeof name === 'string') {
        return _getNameValue.call(this, name);
    }
};

ST.prototype.watch = function(name, wcb) {
    var attrs = null;
    if (typeof name === 'string') {
        _setNameAttrs(name);
        attrs = _getNameAttrs(name);
        attrs.wcbs.push(wcb);

        return {
            remove: function(){
                for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
                    if (attrs.wcbs[i] === wcb) {
                        break;
                    }
                }

                attrs.wcbs.splice(i, 1);
            }
        }
    } else if (typeof name === 'function'){
        for (var p in attributes) {
            attrs = attributes[p];
            attrs.wcbs.splice(0,0, wcb); //將所有的callback添加到wcbs數組中
        }

        return {
            remove: function() {
                for (var p in attributes) {
                    var attrs = attributes[p];
                    for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
                        if (attrs.wcbs[i] === wcb) {
                            break;
                        }
                    }

                    attrs.wcbs.splice(i, 1);
                }
            }
        }
    }
};

return ST;

})()</pre> 
測試工作： 

console.log(Stateful);
    var stateful = new Stateful();

function A(name){
    this.name = name;
};
A.prototype = stateful;
A.prototype._NameSetter = function(n) {
    this.name = n;
};
A.prototype._NameGetter = function() {
    return this.name;
}

function B(name) {
    this.name = name;
};
B.prototype = stateful;
B.prototype._NameSetter = function(n) {
    this.name = n;
};
B.prototype._NameGetter = function() {
    return this.name;
};

var a = new A();
var handle = a.watch('Name', function(name, oldValue, newValue){
    console.log(name + 'be changed from ' + oldValue + ' to ' + newValue);
});
a.set('Name', 'AAA');
console.log(a.name);

var b = new B();
b.set('Name', 'BBB');
console.log(b.get('Name'));

handle.remove();
a.set('Name', 'new AAA');
console.log(a.get('Name'), b.get('Name'))</pre> <p>輸出： </p>

function ST(){}
Namebe changed from undefined to AAA
AAA
Namebe changed from undefined to BBB
BBB
new AAA BBB

可以看到將所有watch函數存放于wcbs數組中，所有子類重名的屬性訪問的都是同一個wcbs數組。有什么方法可以既保證每個實例擁有自己的 watch函數鏈又不發生污染？可以考慮這種方法：為每個實例添加一個_watchCallbacks屬性，該屬性是一個函數，將所有的watch函數鏈都存放到該函數上，主要代碼如下： 

ST.prototype.watch = function(name, wcb) {
        var attrs = null;

    var callbacks = this._watchCallbacks;
    if (!callbacks) {
        callbacks = this._watchCallbacks = function(n, ov, nv) {
            var execute = function(cbs){
                if (cbs && cbs.length > 0) {
                    for (var i = 0, len = cbs.length; i < len; i++) {
                        cbs[i](n, ov, nv);
                    }
                }
            }
            //在函數作用域鏈中可以訪問到callbacks變量
            execute(callbacks['_' + n]);
            execute(callbacks['*']);// 通配符
        }
    }

    var _name = '';
    if (typeof name === 'string') {
        var _name = '_' + name;
    } else if (typeof name === 'function') {//如果name是函數，則所有屬性改變時都會調用該函數
        _name = '*';
        wcb = name;
    }
    callbacks[_name] = callbacks[_name] ? callbacks[_name] : [];
    callbacks[_name].push(wcb);

    return {
        remove: function(){
            var idx = callbacks[_name].indexOf(wcb);
            if (idx > -1) {
                callbacks[_name].splice(idx, 1);
            }
        }
    };
};</pre></div>

經過改變后整體代碼如下： 

var Stateful = (function(){
    'use strict';

var attributes = {};

function _getNameAttrs(name){
    return attributes[name] || {};
}

function _setNameAttrs(name) {
    if (!attributes[name]) {
        attributes[name] = {
            s: '_' + name + 'Setter',
            g: '_' + name + 'Getter'/*,
            wcbs: []*/
        }
    }
}

function _setNameValue(name, value){
    if (name === '_watchCallbacks') {
        return;
    }
    _setNameAttrs(name);
    var attrs = _getNameAttrs(name);
    var oldValue = _getNameValue.call(this, name);

    if (this[attrs.s]){
        this[attrs.s].call(this, value);
    } else {
        this[name] = value;
    }

    if (this._watchCallbacks){
        this._watchCallbacks(name, oldValue, value);
    }
};

function _getNameValue(name) {
    _setNameAttrs(name);
    var attrs = _getNameAttrs(name);

    var oldValue = null;
    if (this[attrs.g]) {
        oldValue = this[attrs.g].call(this, name);
    } else {
        oldValue = this[name];
    }

    return oldValue;
};

function ST(obj){
    for (var p in obj) {
        _setNameValue.call(this, p, obj[p]);
    }
};

ST.prototype.set = function(name, value){
    if (typeof name === 'string'){
        _setNameValue.call(this, name, value);
    } else if (typeof name === 'object') {
        for (var p in name) {
            _setNameValue.call(this, p, name[p]);
        }
    }

    return this;
};

ST.prototype.get = function(name) {
    if (typeof name === 'string') {
        return _getNameValue.call(this, name);
    }
};

ST.prototype.watch = function(name, wcb) {
    var attrs = null;

    var callbacks = this._watchCallbacks;
    if (!callbacks) {
        callbacks = this._watchCallbacks = function(n, ov, nv) {
            var execute = function(cbs){
                if (cbs && cbs.length > 0) {
                    for (var i = 0, len = cbs.length; i < len; i++) {
                        cbs[i](n, ov, nv);
                    }
                }
            }
            //在函數作用域鏈中可以訪問到callbacks變量
            execute(callbacks['_' + n]);
            execute(callbacks['*']);// 通配符
        }
    }

    var _name = '';
    if (typeof name === 'string') {
        var _name = '_' + name;
    } else if (typeof name === 'function') {//如果name是函數，則所有屬性改變時都會調用該函數
        _name = '*';
        wcb = name;
    }
    callbacks[_name] = callbacks[_name] ? callbacks[_name] : [];
    callbacks[_name].push(wcb);

    return {
        remove: function(){
            var idx = callbacks[_name].indexOf(wcb);
            if (idx > -1) {
                callbacks[_name].splice(idx, 1);
            }
        }
    };
};

return ST;

})()</pre> 
測試： 

console.log(Stateful);
    var stateful = new Stateful();

function A(name){
    this.name = name;
};
A.prototype = stateful;
A.prototype._NameSetter = function(n) {
    this.name = n;
};
A.prototype._NameGetter = function() {
    return this.name;
}

function B(name) {
    this.name = name;
};
B.prototype = stateful;
B.prototype._NameSetter = function(n) {
    this.name = n;
};
B.prototype._NameGetter = function() {
    return this.name;
};

var a = new A();
var handle = a.watch('Name', function(name, oldValue, newValue){
    console.log(name + 'be changed from ' + oldValue + ' to ' + newValue);
});
a.set('Name', 'AAA');
console.log(a.name);

var b = new B();
b.set('Name', 'BBB');
console.log(b.get('Name'));

a.watch(function(name, ov, nv) {
    console.log('* ' + name + ' ' + ov + ' ' + nv);
});

a.set({
    foo: 'FOO',
    goo: 'GOO'
});

console.log(a.get('goo'));

a.set('Name', 'AAA+');

handle.remove();
a.set('Name', 'new AAA');
console.log(a.get('Name'), b.get('Name'))</pre></div>

輸出： 

function ST(obj){
        for (var p in obj) {
            _setNameValue.call(this, p, obj[p]);
        }
    }
Namebe changed from undefined to AAA
AAA
BBB

foo undefined FOO
goo undefined GOO
GOO
Namebe changed from AAA to AAA+
Name AAA AAA+
Name AAA+ new AAA
new AAA BBB</pre></div>
以上代碼就是dojo/Stateful的原理。 
 來源：木的樹的博客

                    
                    
                         本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1433810551567.html
                         JavaScript開發 JavaScript
                    

                
                
                    
                        相關經驗
                        
  JavaScript中getter/setter的實現
   在Android中實現javascript編程
   30行代碼實現Javascript中的MVC
   在JavaScript中實現異步Promises的工具：q
   理解javascript中實現MVC的原理
                         
                    
                    
                        相關資訊
                        
  在JavaScript中實現OpenPGP
   Javascript 中的 var
   在JavaScript中運行Java
   LispyScript：支持宏的JavaScript實現
   5個LINQ的JavaScript實現庫
                         
                    
                    
                        相關文檔
                        
   Javascript中的事件處理
    JavaScript中This的總結
    JavaScript Hashtable實現
    使用SeaJs實現模塊化JavaScript開發
    CSS與JavaScript
    JavaScript 語法
    GoF 23 種設計模式解析附實現源碼(2nd Edition)
    Intellij IDEA教程
    hibernate3.6.10 官方中文參考手冊
                         
                    

                    目錄