擴展二傳手默認對象

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/。