什麼將是一個很好的簡約的Javascript繼承方法？

Question

我正在重寫一個JavaScript項目，我希望能夠使用面向對象的方法來組織當前代碼的混亂。主要擔心的是這個JavaScript應該作爲第三方網站內部的一個小部件運行，並且我不能將它與其他網站可能使用的其他JavaScript庫衝突。

所以我在尋找一種方式來寫「類像」繼承在JavaScript中有以下要求：

1. 無需外部庫或事物，將與外部庫衝突（即排除複製&從外部庫中粘貼）。
2. Minimalistic - 我不希望支持代碼大於幾行代碼，我不希望開發人員在每次定義新的類或方法時都需要大量的鍋爐板。
3. 應允許動態擴展父對象，以便子對象查看更改（原型）。
4. 應該允許構造函數鏈接。
5. 應允許super類型的調用。
6. 應該仍然覺得JavaScript-ish。

起初，我試圖用簡單的原型鏈的工作：

function Shape(x,y) { 
    this.x = x; 
    this.y = y; 

    this.draw = function() { 
    throw new Error("Arbitrary shapes cannot be drawn"); 
    } 
} 

function Square(x,y,side) { 
    this.x = x; 
    this.y = y; 
    this.side = side; 

    this.draw = function() { 
    gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); ... 
    } 
} 
Square.prototype = new Shape(); 

這解決了要求1,2和6，但ID不允許超級電話（新的功能覆蓋父函數），構造函數鏈和動態擴展父項不會將新方法提供給子類。

任何建議將受到歡迎。

Answer 1

我建議下面的模式，這使得使用clone function的從protoypes而不是實例繼承：

function Shape(x, y) { 
    this.x = x; 
    this.y = y; 
} 

Shape.prototype.draw = function() { 
    throw new Error('Arbitrary shapes cannot be drawn'); 
}; 

function Square(x,y,side) { 
    Shape.call(this, x, y); // call super constructor 
    this.side = side; 
} 

// inherit from `Shape.prototype` and *not* an actual instance: 
Square.prototype = clone(Shape.prototype); 

// override `draw()` method 
Square.prototype.draw = function() { 
    gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ... 
}; 

該方法駐留在原型（這是理所應當的，無論如何，這一點很重要性能方面的原因），所以你可以通過

SuperClass.prototype.aMethod.call(this, arg1, arg2); 

調用父類的方法有了一些syntactic sugar，你可以讓JS看起來像一個傳統的基於類的語言：

var Shape = Class.extend({ 
    constructor : function(x, y) { 
     this.x = x; 
     this.y = y; 
    }, 
    draw : function() { 
     throw new Error('Arbitrary shapes cannot be drawn'); 
    } 
}); 

var Square = Shape.extend({ 
    constructor : function(x, y, side) { 
     Shape.call(this, x, y); 
     this.side = side 
    }, 
    draw : function() { 
     gotoXY(this.x,this.y); lineTo(this.x+this.side, this.y); // ... 
    } 
}); 

Answer 2

Douglas Crockford在Javascript中使用classical和prototypal繼承，這應該是一個很好的起點。

Answer 3

此外，克羅克福德的啓發，但我有他所謂的「功能繼承」使用「構造函數」良好的經驗。因人而異。

UPDATE：對不起，我忘了：你仍然需要使用superior方法來擴充Object，才能更好地訪問超級方法。可能不適合你。

var makeShape = function (x, y) { 
    that = {}; 
    that.x = x; 
    that.y = y; 
    that.draw = function() { 
     throw new Error("Arbitrary shapes cannot be drawn"); 
    } 
    return that; 
}; 

var makeSquare = function (x, y, side) { 
    that = makeShape(x, y); 
    that.side = side; 
    that.draw = function() { 
     gotoXY(that.x,that.y); lineTo(that.x+that.side, that.y); ... 
    } 
    return that; 
}; 

Answer 4

好的，在JavaScript中重現類/實例風格的系統的技巧是，您只能在實例上使用原型繼承。因此，您需要能夠創建僅用於繼承的「非實例」實例，並且具有與構造函數本身分開的初始化方法。

這是最小的系統予使用，傳遞一個特殊一次性值到構造（添加褶邊之前）將它構造對象而不初始化它：

Function.prototype.subclass= function() { 
    var c= new Function(
     'if (!(this instanceof arguments.callee)) throw(\'Constructor called without "new"\'); '+ 
     'if (arguments[0]!==Function.prototype.subclass._FLAG && this._init) this._init.apply(this, arguments); ' 
    ); 
    if (this!==Object) 
     c.prototype= new this(Function.prototype.subclass._FLAG); 
    return c; 
}; 
Function.prototype.subclass._FLAG= {}; 

使用的new Function()是一個避免在子類（）上形成不必要的閉包。如果您願意，可以用更漂亮的function() {...}表達式替換它。

用法是比較乾淨的，一般像Python風格的對象只略微笨拙的語法：

var Shape= Object.subclass(); 
Shape.prototype._init= function(x, y) { 
    this.x= x; 
    this.y= y; 
}; 
Shape.prototype.draw= function() { 
    throw new Error("Arbitrary shapes cannot be drawn"); 
}; 

var Square= Shape.subclass(); 
Square.prototype._init= function(x, y, side) { 
    Shape.prototype._init.call(this, x, y); 
    this.side= side; 
}; 
Square.prototype.draw= function() { 
    gotoXY(this.x, this.y); 
    lineTo(this.x+this.side, this.y); // ... 
}; 

猴修補一個內置（功能）是有點懷疑，但使得它愉快的閱讀，沒有人可能想通過一個函數for...in。

Answer 5

您可以使用Crockford在他的書「JavaScript the good parts」中提出的功能模式。想法是使用closore來創建私有字段，並使用previleged函數來訪問這些字段。這裏是一個滿足您的要求，6解決方案之一：

var people = function (info) { 
    var that = {}; 
    // private 
    var name = info.name; 
    var age = info.age; 
    // getter and setter 
    that.getName = function() { 
     return name; 
    }; 
    that.setName = function (aName) { 
     name = aName; 
    }; 
    that.getAge = function() { 
     return age; 
    }; 
    that.setAge = function (anAge) { 
     age = anAge; 
    }; 
    return that; 
}; 

var student = function (info) { 
    // super 
    var that = people(info); 
    // private 
    var major = info.major; 
    that.getMajor = function() { 
     return major; 
    }; 
    that.setMajor = function (aMajor) { 
     major = aMajor; 
    }; 
    return that; 
}; 

var itStudent = function (info) { 
    // super 
    var that = student(info); 
    var language = info.language; 
    that.getLanguage = function() { 
     return language; 
    }; 
    that.setLanguage = function (aLanguage) { 
     language = aLanguage; 
    }; 
    return that; 
}; 

var p = person({name : "Alex", age : 24}); 
console.debug(p.age); // undefined 
console.debug(p.getAge()); // 24 

var s = student({name : "Alex", age : 24, major : "IT"}); 
console.debug(s.getName()); // Alex 
console.debug(s.getMajor()); // IT 

var i = itStudent({name : "Alex", age : 24, major : "IT", language : "js"}); 
console.debug(i.language); // Undefined 
console.debug(i.getName()); // Alex 
console.debug(i.getMajor()); // IT 
console.debug(i.getLanguage()); // js 

Answer 6

最常見的模式研究這個問題是在Mozilla Developer Network描述時，我發現。我已經更新了他們的榜樣，包括一個超類方法的調用，並顯示在日誌中的警報消息：

// Shape - superclass 
 
function Shape() { 
 
    this.x = 0; 
 
    this.y = 0; 
 
} 
 

 
// superclass method 
 
Shape.prototype.move = function(x, y) { 
 
    this.x += x; 
 
    this.y += y; 
 
    log += 'Shape moved.\n'; 
 
}; 
 

 
// Rectangle - subclass 
 
function Rectangle() { 
 
    Shape.call(this); // call super constructor. 
 
} 
 

 
// subclass extends superclass 
 
Rectangle.prototype = Object.create(Shape.prototype); 
 
Rectangle.prototype.constructor = Rectangle; 
 

 
// Override method 
 
Rectangle.prototype.move = function(x, y) { 
 
    Shape.prototype.move.call(this, x, y); // call superclass method 
 
    log += 'Rectangle moved.\n'; 
 
} 
 

 
var log = ""; 
 
var rect = new Rectangle(); 
 

 
log += ('Is rect an instance of Rectangle? ' + (rect instanceof Rectangle) + '\n'); // true 
 
log += ('Is rect an instance of Shape? ' + (rect instanceof Shape) + '\n'); // true 
 
rect.move(1, 1); // Outputs, 'Shape moved.' 
 
alert(log);

1. 在五年既然你問這個問題，似乎瀏覽器對繼承的支持得到了改善，所以我不認爲你需要一個外部庫。
2. 這是我見過的最簡單的技術，我不知道你是否考慮過太多的樣板。
3. 它按要求使用原型，因此向父級添加新方法也應將它們提供給子對象。
4. 您可以在示例中看到構造函數鏈接。
5. 超級類型調用也在示例中。
6. 我不確定它是否感覺JavaScript-ish，你必須自己決定。