Js?繼承：extend、mixin和plugin（一）

?

簡介：

我們編寫前端控件時，需要給控件建立一個體系，面向對象是一個很合適的方式，但是JS本身對面向對象的一些概念支持偏弱，特別是繼承的特性方面，那么我們就必須通過一系列的方式來實現繼承。

?

Extend方式：

Extend方式非常貼近面向對象語言中的類繼承，這種方式使用原型鏈的方式來實現繼承。原型鏈的繼承方式有幾個缺點：

1）缺少針對父類的引用，例如：

?

function?A(){

//初始化A操作

}

A.prototype?=?{

method1:function(){

//A的一系列操作

}

}

function?B(){

//初始化B的操作

}

B.prototype?=?new?A();

B.method1?=?function(){

//先執行?A.method1的方法

//執行自己的方法

}

?

那么此時如何在調用A的method1方法呢？我們沒有java中的’super’對象也缺少C#中的’base’對象，當然我們可以換一種寫法，來解決這個問題:

?

var??aobj?=?new?A();?

B.prototype?=?aobj;

B.method1?=?function(){

aobj.method1.call(this);//先執行?A.method1的方法

//執行自己的方法

}

?

但是我們必須能緩存剛才的?aobj對象，方便在調用B.method1時取得到，所以我們就引入’superclass’字段，放在構造函數B上作為靜態屬性，調用時：B.superclass.method1.call(this),下面是實現：

?

function?extend(subclass,superclass){

var?superObj?=?new?superclass();

subclass.prototype?=?superObj;

subclass.superclass?=?superObj;

return?subclass;

}

?

上面的函數解決了superclass的問題但是又引入了新的問題，下面我們一一來講。

2）破壞了對象的constructor屬性，這個屬性在使用繼承的過程中非常有用，它指向的是對象的構造函數，例如：

?

function?A(){}

//未繼承?A時

function?B(){}

var?b?=?new?B();

alert(b.constructor?===?B)?//true

?

//B繼承A?

extend(B,A);?

b1?=?new?B();?

alert(b1.constructor?===?B)?//?false?

alert(b1.constructor?===?b.constructor)?//false

?

這樣的結果絕對不是我們需要的，否則我們在編寫方法的過程中調用，B.supercalss.constructor.call(this)?或者?B.superclass.constructor.superclass?會出現混亂，我們怎么辦呢，繼續改進extend方法，矯正constructor?屬性：

?

function?extend(subclass,superclass){

　　var?superObj?=?new?superclass();

　　subclass.prototype?=?superObj;

????superObj.constructor?=?subclass;//矯正?constructor屬性

　　subclass.superclass?=?superObj;

　　return?subclass;

}

?

到這里看似解決了繼承鏈的問題，但是此時我們來看一下下面情形：

?

function?C?(){}?

extend(C,B);

var?c?=?new?C();?

alert(c.constructor.superclass.constructor);//C

?

上面的結果意外的不是B?而是?C,這是什么原因呢，我們看剛才矯正constructor?屬性以及上面一句：

?

subclass.prototype?=?superObj;

superObj.constructor?=?subclass;

?

我們將C的prototype的constructor修改為了C?，由于subclass.superclass?=?superObj;那么C的superclass跟C?的prototype是同一個對象，那么?c.constructor.superclass.constructor等同于C.prototype.constructor?結果就是?C,那么我們需要做一下修改：

?

function?extend(subclass,superclass){

　　var?superObj?=?new?superclass();

　　subclass.prototype?=?superObj;

????superObj.constructor?=?subclass;//矯正?constructor屬性

　　subclass.superclass?=?new?superclass();

　　return?subclass;

}

?

此時我們再來調用一下：

?

alert(c.constructor.superclass.constructor);//B

?

此時的還有什么問題呢？我們來做一下實驗：

?

function?A?(config){

??console.log('a?constructor,config：'?+?config);

}

A.prototype?=?{

??method?:?function(){

????console.log('a?runing');

??}

};

function?B?(config){

??this.constructor.superclass.constructor.call(this,config);

??console.log('b?constructor,config：'?+?config);

}

extend(B,A);

function?C?(config){

??this.constructor.superclass.constructor.call(this,config);

??console.log('c?constructor,config：'?+?config);

}

extend(C,B);

var?c?=?new?C('hello');

c.method();

?

輸出結果：

?

a?constructor,config:undefined?

a?constructor,config:undefined?

b?constructor,config:undefined?

b?constructor,config:undefined?

b?constructor,config:undefined?

Uncaught?RangeError:?Maximum?call?stack?size?exceeded

?

我們看到沒有輸出我們希望的結果，這里有2個問題，

1.?產生了循環調用

2.?未實例化對象前，實例化了多個父類對象，而且這些實例初始化時傳入的參數為空，極易出現錯誤。

解決死循環我們只需要把this.constructor.superclass?替換為?對應的?B.superclass即可:

?

function?B?(config){

??B.superclass.constructor.call(this,config);

??console.log('b?constructor,config：'?+?config);

}

function?C?(config){

??C.superclass.constructor.call(this,config);

??console.log('c?constructor,config：'?+?config);

}

?

針對調用extend時生成多個實例我們引入方法：

?

function?create(proto,?c)?{

????function?F()?{

????}

????F.prototype?=?proto;

????var?o?=?new?F();

????o.constructor?=?c;

????return?o;

}

?

在extend方法中我們這樣調用：

?

var?superObj?=?create(superclass.prototype,subclass);

subclass.prototype?=?superObj;

subclass.superclass?=?create(superclass.prototype,superclass);??

?

此時我們的prototype?屬性和superclass屬性都不需要實例化對象，完整的extend方法如下：

?

function?extend(subclass,superclass){

????function?create(proto,?c)?{

????????function?F()?{

????????}

????????F.prototype?=?proto;

????????var?o?=?new?F();

????????o.constructor?=?c;

????????return?o;

????}

　　var?superObj?=?create(superclass.prototype,subclass);

????subclass.prototype?=?superObj;

????subclass.superclass?=?create(superclass.prototype,superclass);?

　　return?subclass;

}

?

這樣在執行上面的代碼即得到：

?

a?constructor,config:hello

b?constructor,config:hello

c?constructor,config:hello

a?runing?

?

今天先寫到這里，接下來我會把控件的繼承機制一下，如果有時間，把一些編寫js控件的經驗分享出來，希望對大家有幫助。

轉載于:https://www.cnblogs.com/zaohe/archive/2012/10/13/2723148.html

總結

以上是生活随笔為你收集整理的Js 控件编写 继承：extend、mixin和plugin（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。