Javascript自己动手实现getter/setter

　　虽然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;
})()

　　其中wcbs用来存储调用watch(name, callback)时所有的callback。

　　第一版实现代码如下：

  1 var Stateful = (function(){
  2     'use strict';
  3 
  4     var attributes = {};
  5     
  6     function _getNameAttrs(name){
  7         return attributes[name] || {};
  8     }
  9     
 10     function _setNameAttrs(name) {
 11         if (!attributes[name]) {
 12             attributes[name] = {
 13                 s: '_' + name + 'Setter',
 14                 g: '_' + name + 'Getter',
 15                 wcbs: [] 
 16             }
 17         }
 18     }
 19 
 20     
 21     function _setNameValue(name, value){
 22         _setNameAttrs(name);
 23         var attrs = _getNameAttrs(name);
 24         var oldValue = _getNameValue.call(this, name);
 25         //如果对象拥有_nameSetter方法则调用该方法，否则直接在对象上赋值。
 26         if (this[attrs.s]){
 27             this[attrs.s].call(this, value);
 28         } else {
 29             this[name] = value;
 30         }
 31         
 32         if (attrs.wcbs && attrs.wcbs.length > 0){
 33             var wcbs = attrs.wcbs;
 34             for (var i = 0, len = wcbs.length; i < len; i++) {
 35                 wcbs[i](name, oldValue, value);
 36             }
 37         }
 38     };
 39     
 40     function _getNameValue(name) {
 41         _setNameAttrs(name);
 42         var attrs = _getNameAttrs(name);
 43         
 44         var oldValue = null;
 45         // 如果拥有_nameGetter方法则调用该方法，否则直接从对象中获取。
 46         if (this[attrs.g]) {
 47             oldValue = this[attrs.g].call(this, name);
 48         } else {
 49             oldValue = this[name];
 50         }
 51         
 52         return oldValue;
 53     };
 54     
 55     function ST(){};
 56     
 57     ST.prototype.set = function(name, value){
 58         //每次调用set方法时都将name存储到attributes中
 59         if (typeof name === 'string'){
 60             _setNameValue.call(this, name, value);
 61         } else if (typeof name === object) {
 62             for (var p in name) {
 63                 _setNameValue.call(this, p, name[p]);
 64             }
 65         }
 66         
 67         return this;
 68     };
 69     
 70     ST.prototype.get = function(name) {
 71         if (typeof name === 'string') {
 72             return _getNameValue.call(this, name);
 73         }
 74     };
 75     
 76     ST.prototype.watch = function(name, wcb) {
 77         var attrs = null;
 78         if (typeof name === 'string') {
 79             _setNameAttrs(name);
 80             attrs = _getNameAttrs(name);
 81             attrs.wcbs.push(wcb);
 82             
 83             return {
 84                 remove: function(){
 85                     for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
 86                         if (attrs.wcbs[i] === wcb) {
 87                             break;
 88                         }
 89                     }
 90                     
 91                     attrs.wcbs.splice(i, 1);
 92                 }
 93             }
 94         } else if (typeof name === 'function'){
 95             for (var p in attributes) {
 96                 attrs = attributes[p];
 97                 attrs.wcbs.splice(0,0, wcb); //将所有的callback添加到wcbs数组中
 98             }
 99             
100             return {
101                 remove: function() {
102                     for (var p in attributes) {
103                         var attrs = attributes[p];
104                         for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
105                             if (attrs.wcbs[i] === wcb) {
106                                 break;
107                             }
108                         }
109                         
110                         attrs.wcbs.splice(i, 1);
111                     }
112                 }
113             }
114         }
115     };
116     
117     return ST;
118 })()

View Code