幾種常見的繼承

2021-07-24 22:21:09 字數 2336 閱讀 8254

常見的繼承有擴充套件原型物件實現繼承、替換原型物件實現繼承、混入繼承、混入+原型繼承、經典繼承、借用建構函式實現繼承這六種。每個人的叫法可能不同,但是原理都一樣。

實現原理:函式有乙個prototype的屬性(原型物件),通過給這個原型物件新增乙個屬性、方法,從而可以讓建構函式的例項可以訪問到

function

person

(){}

person.prototype.name="jim";

person.prototype.sayhello=function

() var p1=new person();

console.log(p1.name) //輸出"jim"

上面這種方式是最簡單的也是最好理解的,但是有缺點,設定少數的屬性或者方法還可以,但是要是設定多個呢?這種繼承方法就不行了,太麻煩了,於是有了這種繼承方式:替換原型物件實現繼承。用於多個屬性、方法的實現。

function

person

() {}

person.prototype=,

a2:function

() {},

a3:function

() {},

a4:function

() {},

a5:function

() {},

.......

}var p1=new person();

p1.a1();

p1.a2();

.......

注意:使用這種方式繼承,必須要加上constructor:person:person這個屬性,因為person.prototype會將原型物件的這個屬性替換掉,如果不加上,值將不指向建構函式。

使用場景:已知物件o1,o3,需要將o1中的屬性、方法拷貝到o3裡面。

var o1=;

var o2=function

() {};

o2.prototype.a="a";

var o3=new o2();

//功能封裝

function

mixin

(target,source)

return target;

}mixin(o3,o1)//這樣o3裡面就有了o1的屬性和方法了。

注意:jquery裡面的extend方法就是這個原理實現的。

利用混入繼承向原型物件中新增屬性和方法,其本質還是用了混入繼承封裝的方法

function

person

(){};

person.prototype.extend=function

(source)

person.prototype.extend

();//其實就相當於person.prototype.a=20;person.prototype.b=25......

var p1=new person();

//p1就可以直接訪問p1.a;p1.b了。

注意:在jq中,如果你想要在jq上面新增方法,用的是$.fn.extend(),其實它就相當於jquery.prototype.extend()

由道格拉斯提出。使用場景:已知乙個物件o,需要建立乙個新的物件,這個新的物件繼承自物件o。

//功能封裝

function

create

(o)

f.prototype=o;

return

new f();

}var o=;

var o2=create(o);//這樣o2就繼承自o了

使用場景:子類建構函式借用父類建構函式來完成,給子類的例項新增屬性。

function

f1(name,age)

function

f2(name,age,length)

var ff2=new f2("張三",23,180);

總結:這幾種方法原理雖然不難,但是難的是如何靈活運用,這個也沒辦法,只能自己實踐。

js繼承常見的幾種方式

function parent parent.prototype.get function function son name son.prototype newparent var son1 newson 奧特曼 關鍵 把子類的原型指向父類的例項,從而繼承父類的私有屬性和原型屬性 優點 父類新增的...

繼承的幾種方式

繼承的幾種方式封裝 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 原型鏈繼承 核心 將父類的例項作為子類的原型 function cat cat.prototype new animal cat.protot...

繼承的幾種方式

一.拷貝繼承 通用型的 有new或沒有new的時候都可以 拷貝繼承 屬性通過 父構造器.call this 來繼承屬性。方法通過 for in 來講乙個父 prototype 的屬性傳遞給子 prototype 如下圖 2原型繼承 適合無new的物件 3 類式繼承 bbb.prototype new...