javascript關於繼承的範例程式碼

來源:互聯網
上載者:User

例子

 代碼如下 複製代碼

/**
* 實現子類繼承父類,但不會產生多餘的屬性和方法
* @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。所以當子類執行個體化的時候,所有非基礎資料型別 (Elementary Data Type)都是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又一次

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.