2011-05-18 68 views
4
// Base class 
var Base = function() { 
    this._value = 'base'; 
}; 
Base.prototype = { 
    constructor: Base, 
    // By function 
    getValue: function() { 
     return this._value; 
    }, 
    // By getter 
    get value() { 
     return this._value; 
    } 
}; 

// Sub class extends Base 
var Sub = function() { 
    this._value = 'sub'; 
}; 
Sub.prototype = { 
    constructor: Sub 
}; 
// Pass over methods 
Sub.prototype.getValue = Base.prototype.getValue; 
Sub.prototype.value = Base.prototype.value; 

// --- 

var mySub = new Sub(); 
alert(mySub.getValue()); // Returns 'sub' 
alert(mySub.value);  // Returns 'undefined' 

乍一看似乎mySub.value應返回相同的mySub.getValue(),但你可以看到它,而不是返回undefined。顯然,getter沒有找到父範圍作爲子實例(mySub),而是一個不存在的Base實例。複製的JavaScript getter/setter方法到另一個原型對象

有沒有解決這個其他任何方式比具有相同的干將分配到新的原型?

+0

我知道這並不能回答你的問題......但爲什麼你甚至需要吸氣劑?這不是不必要的複雜性嗎? – 2011-05-18 04:00:35

+0

@Micheal沒有。 – Kayla 2011-05-18 04:12:18

+0

@Michael在這個例子中,顯然這是沒有必要的,我只是寫了一個清楚的概念來說明我面臨的問題。 在我的實際應用中,獲取/設置特定的屬性我需要觸發等功能,並且代碼時。 – 2011-05-18 04:20:56

回答

10
Sub.prototype.__defineGetter__('value', Base.prototype.__lookupGetter__('value')); 

嘗試。

+0

完美!正是我之後,謝謝。 – 2011-05-18 04:23:02

+0

我的榮幸。 :) – Kayla 2011-05-18 04:30:47

+8

__defineGetter__是非標準的,不符合ECMA-262標準。有沒有另外一種方法呢? – 2012-01-03 09:40:04

5

我認爲,如果你指定

Sub.prototype = new Base() 

的問題是,當你直接從Base.prototype.value分配給它的構造函數永遠不會運行它會工作。該值將不存在,直到你有基類的一個實例(通過new

這是我的延長Function實現繼承典型方法:

Function.prototype.Extend = function(superClass) { 
    this.prototype = new superClass(); 

    this.prototype.getSuperClass = function() { 
     return superClass; 
    }; 
    this.getSuperClass = this.prototype.getSuperClass; 
    return this; 
}; 

這將正確地分配所有的父將方法和屬性分類到子類'class'。

使用看起來像

var Sub = function() {} 
Sub.Extend(Base) 
+0

我從來沒有想過要這樣做繼承。多麼美麗,優雅的解決方案! – 2011-05-18 04:11:46

+0

謝謝:-)讓我找到源(我最肯定沒有寫......) – 2011-05-18 04:14:39

+0

哇!這值得一些關注。好的解決方案 – deepelement 2015-01-12 14:46:54

2

除了Alex Mcp的回答,你可以使用擴展它之後添加新的getter/setter方法來分:

Function.prototype.addGetter = function(val,fn){ 
    this.prototype.__defineGetter__(val,fn); 
    return this;  
} 
Function.prototype.addSetter = function(val,fn){ 
    this.prototype.__defineSetter__(val,fn); 
    return this;  
} 
//example; 
Sub.Extend(Base); 
Sub.addGetter('date',function(){return +new Date;}); 

,並增加tylermwashburns答案:你可以擴展函數原型爲:

Function.prototype.copyGetterFrom = function(val,fromConstructor){ 
    this.prototype.__defineGetter__(
     val 
     ,fromConstructor.prototype.__lookupGetter__(val)); 
    return this; 
} 
//usage example.: 
Sub.copyGetterFrom('value',Base); 
3

a更現代的解決方案是使用Object.defineProperty,因爲它允許getter和setter在不破壞的情況下進行處理。

唯一的問題是,它需要一個描述符對象,而不是手工製作一個利用Object.getOwnPropertyDescriptor功能只是給你拿的。

var BazValue = Object.getOwnPropertyDescriptor(Base.prototype,'value'); 

Object.defineProperty(Sub.prototype,'value',BazValue); 
+1

幫我填充工具'MouseEvent.x':'Object.defineProperty(MouseEvent.prototype, 「X」,對象。getOwnPropertyDescriptor(MouseEvent.prototype,「clientX」))'。 – 2017-03-19 16:29:21

相關問題