javascript繼承，無(wú)任是類式繼承，原型式繼承還是滲元式繼承都是通過不同方法去圍繞著prototype轉(zhuǎn)，簡(jiǎn)單分析下三種不同繼承方法是如何圍繞prototype轉(zhuǎn)的

一：類似繼承，先上關(guān)鍵代碼

function extend(subClass,supClass){
　　var fn = function(){};
　　fn.prototype = supClass.prototype;
　　subClass.prototype = new fn();
　　subClass.prototype.constructor = subClass;
　　subClass.supClass = supClass;?? ??? ????
　　if(supClass.prototype.constructor == Object){
　　　　supClass.prototype.constructor = supClass;
　　}?

}

首先通過代碼可以看出這個(gè)是類與類的繼承，通過把子類的prototype設(shè)置成new一個(gè)空的構(gòu)造函數(shù)，改空的構(gòu)造函數(shù)的prototype是父級(jí)類的prototype，好處是類與類之間的結(jié)構(gòu)比較明確，

使用參考代碼：

?

function FormField(){
　　this.init.apply(this,arguments)
}
FormField.prototype = {
　　init:function(){
　　　　console.log("init");
　　　　this.bind();
　　},
　　bind:function(){
　　　　console.log("bind");
　　}
};

function FormArea(){
　　this.constructor.supClass.call(this);

};

extend(FormArea,FormField);
var formArea = new FormArea();

?

二：原型式繼承，先上關(guān)鍵代碼

function clone(obj){
　　var fn = function(){};
　　fn.prototype = obj;
　　return new fn();

}

該方式優(yōu)點(diǎn)是節(jié)約內(nèi)存，無(wú)需上面那些類的各種指向，當(dāng)前方式的有點(diǎn)恰巧也是他的缺點(diǎn)，改方式會(huì)共享他們的指針，特別是當(dāng)指向的是一個(gè)對(duì)象或者數(shù)組的時(shí)候，得小心，clone出來(lái)的同事要重新復(fù)制替換掉之前的指向，另外同類式繼承最大的區(qū)別，是類式繼承是通過prototype = new XXX(某個(gè)父類)，而原型是直接把prototype設(shè)置成一個(gè)字面量對(duì)象，

使用參考代碼：

var formField = {

　　init:function(){

　　}

}

var formArea = clone(formField);

formArea.init();

?

三：滲元式，先上關(guān)鍵代碼

function augment(receveClass,giveClass){
　　if(arguments.length == 2){
　　　　for(var i in giveClass.prototype){
　　　　　　if(!receveClass.prototype[i]){
　　　　　　　　receveClass.prototype[i] = giveClass.prototype[i]
　　　　　?? }
　　　　}
　　}else{
　　　　var args = [].slice.call(arguments,2);
　　　　for(var j=0, len=args.length; j<len; j++){
　　　　if(!receveClass.prototype[args[j]]){
　　　　　　receveClass.prototype[args[j]] = giveClass.prototype[args[j]];
　　　　　　}
　　　　}
　　}
}

由于javascript是不能實(shí)現(xiàn)繼承多個(gè)父類的，因?yàn)樗鸵粋€(gè)prototype，所以可以通過上面的方法去擴(kuò)展prototype的方式去模擬繼承多個(gè)父類的效果，

使用參考代碼：

function Minx(){}
　　Minx.prototype = {
　　sayName:function(){
　　　　p("sayName")
　　},
　　sayAge:function(){
　　　　p(29);
　　}
}?? ????
function Person(){};
augment(Person,Minx,"sayName");
var p1 = new Person();
p1.sayName();

?

總結(jié)：

適應(yīng)場(chǎng)合：方式一適合構(gòu)造過程中需要傳值去區(qū)分不同對(duì)象的情況，方式二適合帶有很多默認(rèn)屬性，而大部分默認(rèn)屬性又都相同場(chǎng)合，且比較節(jié)約內(nèi)存，方式三適合多個(gè)差異度很大的累，但是這些類里的某個(gè)方式又一樣的場(chǎng)合下

?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/samKR/p/3785199.html

總結(jié)

以上是生活随笔為你收集整理的浅谈javascript继承【读javascript设计模式第四章节继承有感】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。