js繼承的6種方式

想要繼承，就必須要提供個父類，（繼承誰，提供繼承的屬性）

function
person
(name)
}          person.prototype.age=10;
//給建構函式新增了原型屬性

function
per(
)          per.prototype=
newperson()
;var per1=
newper()
;          console.
log(per1.age)
;//10
//instanceof 判斷元素是否在另乙個元素的原型鏈上
//per1繼承了person的屬性，返回true
console.
log(per1 instanceof
person);
//true

重要的是讓per.prototype=new person();

特點：

function
con(
)var con1=
newcon()
;         console.
log(con1.name)
;//jer
console.
log(con1.age)
;//12
console.
log(con1 instanceof
person);
//false

特點：只繼承了父類建構函式的屬性，沒有繼承父類原型的屬性；可以繼承多個建構函式屬性，在子例項中可向父例項傳參；

//組合原型鏈和建構函式繼承
function
subtype
(name)
subtype.prototype=
newperson()
;//原型鏈繼承
var sub=
newsubtype
("gar");
console.
log(sub.name)
;//"gar"繼承了建構函式屬性
console.
log(sub.age)
;//10繼承了父類原型的屬性

結合了兩種模式的優點，

特點：1.可以繼承父類原型上的屬性，可以傳參，可復用。

2.每個新例項引入的建構函式屬性式私有的。

function
content
(obj)
f.prototype=obj;
return
newf()
;}var sup =
newperson()
;//拿到了父類的例項
var sup1=
content
(sup)
;         console.
log(sup1.age)
;//繼承了父類函式的屬性

function
content
(obj)
f.prototype=obj;
//繼承了傳入的引數
return
newf()
;//返回函式物件
}var sup=
newperson()
;//以上式原型式繼承，給原型式繼承再套個殼子傳遞引數
function
subobject
(obj)
var sup2=
subobject
(sup)
;//這個函式經過宣告之後就成了可增添屬性的物件
console.
log(
typeof subobject)
;//function
console.
log(
typeof sup2)
;//object
console.
log(sup2.name)
;//"gar",返回了sub物件，繼承了sub的屬性

重點：就是給原型式繼承外面套了個殼子。

優點：沒有建立自定義型別，因為只是套了個殼子返回物件（這個），這個函式順理成章就成了建立的新物件。

缺點：沒用到原型，無法復用。

//寄生
function
content
(obj)
f.prototype=obj;
return
newf()
;}//content就是f例項的另一種表示法
var con=
content
(person.prototype)
;//con例項(f例項)的原型繼承了父類函式的原型
//上述更像是原型鏈繼承，只不過只繼承了原型屬性
//組合
function
sub(
)//解決了組合式兩次呼叫建構函式屬性的缺點
//重點
sub.prototype=con;
//繼承了con例項
con.constructor=sub;
//一定要修復例項
var sub1=
newsub()
;//sub的例項就繼承了建構函式屬性，父類例項，con的函式屬性
console.
log(sub1.age)
;//10

重點：修復了組合繼承的問題

繼承這些知識點與其說是物件的繼承，更像是函式的功能用法，如何用函式做到復用，組合，這些和使用繼承的思考是一樣的。上述幾個繼承的方法都可以手動修復他們的缺點，但就是多了這個手動修復就變成了另一種繼承模式。

這些繼承模式的學習重點是學它們的思想，不然你會在coding書本上的例子的時候，會覺得明明可以直接繼承為什麼還要搞這麼麻煩。就像原型式繼承它用函式複製了內部物件的乙個副本，這樣不僅可以繼承內部物件的屬性，還能把函式（物件，**內部物件的返回）隨意呼叫，給它們新增屬性，改個引數就可以改變原型物件，而這些新增的屬性也不會相互影響。

js繼承的6種方式

js繼承6種方式實現

JS 6種繼承方式

理解js繼承的6種方式

js繼承的6種方式

js繼承6種方式實現

JS 6種繼承方式

理解js繼承的6種方式

相關推薦