ExtJS底層繼承機(jī)制實(shí)現(xiàn)

mayaohua 發(fā)布于2019-08-21 10:32 / 3326人閱讀

摘要：是個(gè)基于對(duì)象的語(yǔ)言，沒(méi)有類(lèi)的概念。而且語(yǔ)言特點(diǎn)就是松散和自由，實(shí)現(xiàn)一個(gè)同樣的功能，可以有很多種方式面向?qū)ο缶幊探^大部分都是基于類(lèi)的所以我們可以借助原型鏈繼承的方式來(lái)在中實(shí)現(xiàn)高級(jí)程序語(yǔ)言中的繼承機(jī)制關(guān)鍵點(diǎn)就是你一定要了解中的。

JavaScript是個(gè)基于對(duì)象的語(yǔ)言，沒(méi)有類(lèi)的概念。而且JavaScript語(yǔ)言特點(diǎn)就是松散和自由，實(shí)現(xiàn)一個(gè)同樣的功能，可以有很多種方式.面向?qū)ο缶幊探^大部分都是基于類(lèi)的.所以我們可以借助原型鏈繼承的方式,來(lái)在JavaScript中實(shí)現(xiàn)高級(jí)程序語(yǔ)言中的繼承機(jī)制.關(guān)鍵點(diǎn)就是你一定要了解js中的prototype。模擬ExtJS底層方法,來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的繼承機(jī)制

function extend(sub,sup){
    //實(shí)現(xiàn)只繼承父類(lèi)的原型對(duì)象

    //1.用一個(gè)空函數(shù)進(jìn)行中轉(zhuǎn)
    var F = new Function();
    //2.實(shí)現(xiàn)空函數(shù)的原型對(duì)象和超類(lèi)的原型對(duì)象轉(zhuǎn)換
    F.prototype = sup.prototype;
    //3.原型繼承
    sup.prototype = new F();
    //4.還原子類(lèi)的構(gòu)造器
    sub.prototype.constructor = sub;
    //5.保存一下父類(lèi)的原型對(duì)象,一方面方便解耦,另一方面方便獲取父類(lèi)的原型對(duì)象,實(shí)現(xiàn)方法重載
    sub.superClass = sup.prototype; //自定義一個(gè)子類(lèi)的靜態(tài)屬性,接收父類(lèi)的原型對(duì)象
    //6.判斷父類(lèi)原型對(duì)象的構(gòu)造器
    if(sup.prototype.constructor == Object.prototype.constructor){
        sup.prototype.constructor = sup; //手動(dòng)還原父類(lèi)對(duì)象的構(gòu)造器
    }
}

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    constructor: Person,    //還原構(gòu)造器,這里其實(shí)可以不用還原,因?yàn)樵趀xtend方法中已經(jīng)實(shí)現(xiàn)了
    sayHello: function(){
        alert("hello world!");
    }
}
function Boy(name,age,sex){
    //綁定父類(lèi)函數(shù)模版,實(shí)現(xiàn)構(gòu)造函數(shù)繼承,只復(fù)制了父類(lèi)的模版
    Boy.superClass.constructor.call(this,name,age);
    this.sex = sex;
}
extend(Boy,Person);
//給子類(lèi)添加一個(gè)原型對(duì)象方法
Boy.prototype.sayHello = function(){
    alert("hello,javascript");
}
Boy.superClass.sayHello.call(b);    //實(shí)現(xiàn)方法重載,調(diào)用父類(lèi)的方法
var b = new Boy("z3",20,"nan");
alert(b.name);
alert(b.sex);
b.sayHello();   //調(diào)用子類(lèi)重載的方法

轉(zhuǎn)摘自我的博客：ExtJS底層繼承機(jī)制實(shí)現(xiàn)