扩展二传手默认对象

Question

像大家都知道一个按钮是一个按钮...点击，上，下，做到这一点，做到这一点。 所以我写了一些默认的按钮行为“class/object”。

外部默认button.js：

function Button(parent) { 
    var self = this; 
    this.enabled = true; 
    this.visible = true; 
    ... 

    this.initialized = false; 

    f_createButton(parent, self); 

    this.initialized = true; 
    ... 
} 

Button.prototype = { 
    get initialized() { 
     return this._initialized; 
    }, 
    set initialized(bool){ 
     this._initialized = bool 
     if(this.initialized === true) { 
      ... do default stuff 
     } 
    }, 
    get enabled(){ 
     return this._enabled; 
    }, 
    set enabled(bool){ 
     this._enabled = bool; 
     if(document.getElementById(this.id)) { // is button defined? 
      var mClassName = document.getElementById(this.id).children[0].className; 
      document.getElementById(this.id).className = (this.enabled === false) ? "button button-Gray_disabled" : "button button-" + this.defaultStyle; 
      document.getElementById(this.id).children[0].className = (this.enabled === false) ? mClassName + "_disabled" : mClassName.replace("_disabled",""); 
     } 
    } 
} 

function f_createButton("", obj) { 
    .... create DOM element 
} 

包括在HTML & button.js延长按钮 “类/对象”：

Object.defineProperty(Button.prototype,"buttonStyle", { 
    get : function() { 
     return this._buttonStyle; 
    }, 
    set : function(str) { 
     this._buttonStyle = str; 
     if(this.id !== "undefined" && document.getElementById(this.id)) { // is button defined? 
      document.getElementById(this.id).style.backgroundImage = 'url(Images/'+this.buttonStyle+'/buttons.png)'; 
     } 
    } 
}); 

这几乎工作，但它杀死初始化原来的按钮。

Object.defineProperty(Button.prototype,"initialized", { 
    set : function(bool) { 
     this._initialized = bool; 
     if(this.initialized === true) { 
      this.buttonStyle = "NONE"; 
     } 
    } 
}); 

如何扩展原始二传手？

Answer 1

你在问什么似乎不寻常，但让我们试试。首先，考虑这个基类，这将是在外部js文件：

// Constructor 
function Button() { 
    var self = this; 
    var _initialized = false; // 'private' property manipulated by the accessors 

    this.initialized = false; 
    this.createButton(); 
    this.initialized = true; 
} 

// Default prototype 
Button.prototype = { 
    createButton: function() { 
     console.log(' create DOM element '); 
    } 
} 

// Default getter/setter on prototype 
Object.defineProperty(Button.prototype,"initialized", { 
    set : function(bool) { 
     console.log('this is the original setter'); 
     this._initialized = bool; 
     if(this._initialized === true) { 
      console.log('do default stuff') 
     } 
    }, 

    get : function() { 
     return this._initialized; 
    }, 

    configurable : true // IMPORTANT: this will allow us to redefine it 
}); 

如果我理解你的要求，你要重新定义initialized访问（的getter/setter），但仍然有对旧的一个参考。也许有一个更好的方式来做到这一点，但你可以在原有的存取复制到一个新的，然后重新定义它：

// Keep reference to the old accessors 
var original = Object.getOwnPropertyDescriptor(Button.prototype, 'initialized'); 
Object.defineProperty(Button.prototype, "oldInitialized", { 
    set : original.set, 
    get : original.get 
}); 

// Redefine getter and setter 
Object.defineProperty(Button.prototype, "initialized", { 
    set : function(bool) { 
     console.log('this is the new setter'); 
     this.oldInitialized = bool; 
    }, 

    get : function() { 
     return this._initialized; 
    } 
}); 

这里是工作的代码：http://jsfiddle.net/aTYh3/。