本文實例匯總了javascript關于繼承的用法。分享給大家供大家參考。具體如下：
例子：
/**
* 實現子類繼承父類,但不會產生多余的屬性和方法
* @returns {Function}
*/
define(function(){
return function(subType, superType){
var proto = new Object(superType.prototype);
proto.constructor = subType;
subType.prototype = proto;
};
});
//――――――――――――――――――――――――――
define(function(){
function ostring(s)
{
this.str = s;
this.length = this.str.length;
}
ostring.prototype.show = function(){
alert(this.str);
};
return ostring;
});
//――――――――――――――――――――――――――
define(['inherit', 'ostring'], function(inherit, ostring){
function wstring(s){
//用call實現調用父類構造函數
ostring.call(this, s);
this.chlength = 2 * s.length;
}
//繼承其他的屬性
inherit(wstring, ostring);
wstring.prototype.add = function(w)
{
alert(this.str + w);
};
return wstring;
});
再看例子
一、用function實現：
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.inherit=person;
this.inherit(name);
this.books = books;
}
var au=new Author("dororo","Learn much");
au.name
或者同等效力的：
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
Person.call(this, name);
this.books = books;
}
var au=new Author("dororo","Learn much");
au.getName
由于這只是將this作為參數，調用父類Person的構造函數，把賦予父類的所有域賦予Author子類，所以任何父類Person構造函數之外的定義的域（原型prototype），子類都不會繼承。所以上面例子中，au.getName將是沒有被定義的（undefined），因為getName是在Person的原型對象中定義的。而且，子類的構造函數要在定義自己的域之前調用父類構造函數，免得子類的定義被父類覆蓋掉。也就是說，Author定義屬性book要在Person.call之后，否則會被Person中屬性覆蓋。同時，在子類中也最好不要用prototype來定義子類的函數域，因為在一個子類被new，實例化之后就要執行prototype，然后才是調用父類的構造函數，這樣也容易被父類的屬性覆蓋掉。
二、用prototype實現：
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.books = books;
}
Author.prototype=new Person(name);
Author.prototype.constructor=Author;
Author.prototype.getBooks = function() {
return this.books;
}
var au1=new Author("dororo1","Learn much");
var au2=new Author("dororo2","Learn less");
alert(au1.getName());
alert(au2.getName());
這種方法避免了function實現中，無法繼承prototype的問題。因為 Author.prototype=new Person(name);new Person（）實例會調用Person構造和原型的所有屬性。但是缺點是已經實例化了Author.prototype。所以當子類實例化的時候，所有非基本數據類型都是reference copy。所以上面例子中，無論實例au1,還是au2返回的值都是dororo1.三、用“混合”實現
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.base = new Person(name);
for(var key in this.base){
if(!this[key]){
this[key]=this.base[key];
}
}
this.book=books;
}
var au1=new Author("dororo1","work");
var au2=new Author("dororo2","play");
alert(au1.getName());
alert(au2.getName());
au1.book;
au2.book;
屬于擴展，把父類的所有域都拷貝到子類。完全沒有上述兩方面的問題。
寄生組合模式）JS的繼承包括屬性的繼承和方法的繼承，他們分別通過不同的方法來實現。
1.屬性的繼承
屬性的繼承通過改變函數的執行環境來實現的。而改變函數的執行環境可以使用call()和apply()兩種方法來實現。
我們首先創建一個Animal“類”（因為JS中沒有類的概念，這里只是一個模擬，它實際上只是一個Function函數對象）。
function Animal(typeName) {
//為當前方法的執行環境(this)添加一個屬性typeName
//但是執行環境(this)要執行這個函數的時候才能確定
this.typeName = typeName;
this.colors = ["red","while"];
}
//想函數的原型里 添加 兩個（對象共享的）的方法
Animal.prototype.Shout = function () { alert("我是：--" + this.typeName);};
Animal.prototype.Eat = function () { alert("我是：--" + this.typeName) };
//--定義一個獅子--“類”（其實就是一個函數）
function Lion(tn) {
//--執行Animal方法，并通過apply的第一個參數 修改了Animal的執行環境為Lion的this
//同樣的，Lion的this，也要在執行的時候才能確定是誰
Animal.apply(this,["獅子"]);//--繼承了父類的變量屬性，this因為是new了Lion，this是Lion
}
Lion.prototype = Animal.prototype; //繼承父類的方法，搞定--但是這寫不好，當子類再添加方法時候，父類同樣也有此方法，這是指針引用
Lion.prototype.Hunt = function () {
alert("我是：獅子，我要去捕獵~~?~");
}
var aminm = new Animal();
aminm.Hunt(); //---可以訪問到子類的方法，這樣就不好了
//----那么如何解決這個問題呢》？？？？？？
//---解決方案：繼承方法時候可以這樣寫：
Lion.prototype = new Animal();//繼承父類的方法，把Animal對象賦給了prototype原型，其實它里面也有屬性
var lion = new Lion(); //new 關鍵字除了創建的，還會修改Lion對象的執行環境為Lion對象本身
// ---換句話說，就是new完了之后，Lion函數里的this就是Lion函數本身了，然后調用Lion函數
分析一下new關鍵字：
而new關鍵字是十分偉大的，在上段代碼中，new關鍵字完成了以下幾項工作:
1)開辟堆空間，以準備存儲Lion對象
2)修改Lion對象本身的執行環境，使得Lion函數的this指向了Lion函數對象本身。
3)調用Lion“類”的“構造函數”，創建Lion對象
4)將Lion函數對象的堆地址賦值給變量l，這個時候l就指向了這個Lion函數對象
lion.Shout();
lion.Eat();
但是這種繼承有個缺點：就是父類的構造函數的被調用了兩次，call一次，然后new又一次。
希望本文所述對大家的javascript程序設計有所幫助。
