繼承的6中方式

2021-09-12 06:48:24 字數 2997 閱讀 7031

想要繼承,就必須要提供乙個父類(繼承誰,提供繼承的屬性)

// 父類

function person(name)

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

function per() 

per.prototype = new person();

var per1 = new per();

console.log(per1.age);//10

// instanceof 判斷元素是否在另乙個元素的原型鏈上

// per1 繼承了person 的屬性,返回true

console.log(per1 instanceof person) //true

重點:讓新例項的原型等於父類的例項

特點:1、例項可繼承的屬性有:例項的建構函式的屬性,父類建構函式屬性,父類原型的屬性(新例項不會繼承父類例項的屬性)

缺點:1、新例項無法向父類建構函式傳參

2、繼承單一

3、所有新例項都會共享父類例項的屬性。(原型上的屬性是共享的,乙個例項修改了原型屬性,另乙個例項的原型屬性也會被修改)

function con()

var con1 = new con();

console.log(con1.name); // 'zhou'

console.log(con1.age); //21

console.log(con1 instanceof person); //false

function subtype(name)

subtype.prototype = new person(); //原型鏈繼承

var sub = new subtype('zhou');

console.log(sub.name); // 'zhou' 繼承了建構函式屬性

console.log(sub.age); // 10 繼承了父元素原型的屬性

重點:結合了兩種模式的有點,傳參和復用

特點:1、可以繼承父類原型上的屬性,可以傳參,可復用

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

缺點:呼叫了兩次父類建構函式(耗記憶體),子類的建構函式會代替原型上的那個父類建構函式

// 先封裝乙個函式容器,用來輸出物件和承載繼承的原型

function content(obj)

f.prototype = obj; //繼承了傳入的引數

return new f(); // 返回函式物件

var sup = new person(); //拿到父類的例項

var sup1 = content(sup);

console.log(sup1.age); // 21 繼承了父類函式的屬性

}

重點:用乙個函式包裝乙個物件,然後返回這個函式的呼叫,這個函式就變成了可以隨意增添屬性的例項或物件。object.create() 就是這個原理

特點:類似於複製乙個物件,用函式來包裝

缺點:1:所有例項都會繼承原型上的屬性

2、無法實現復用。(新例項屬性都是後面新增的)

function content(obj)

f.prototype = obj; // 繼承了傳入的引數

return new f(); // 返回函式物件

}var sup = new person();

// 以上是原型式繼承,給原型式繼承再套乙個殼子傳遞引數

function subobject(obj)

var sup2 = subobject(sup);

// 這個函式經過宣告之後就成了可添增屬性的物件

console.log(typeof subobject); //function

console.log(typeof sup2); // object

console.log(sup2.name); //'zhou' 返回了sub物件,繼承了sub屬性

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

優點:沒有建立自定義型別,因為只是套了個殼子返回物件(這個),這個函式順理成章就成了建立的新物件

缺點:沒用到原型,無法復用

// 寄生

function content(obj)

f.prototype = obj;

return new f();

}// content 就是f例項的另一種表示法

var con = content(person.prototype);

// con 例項(f 例項)的原型繼承了父類函式的原型

// 上述更像是原型鏈繼承 只不過只繼承了原型屬性

// 組合

function sub()//解決了組合式兩次呼叫建構函式屬性的缺點

// 重點

sub.prototype = con; //繼承了con例項

con.constructor = sub;//一定要修復例項

var sub1 = new sub();

// sub 的例項就繼承了建構函式屬性,父類例項,con的函式屬性

console.log(sub1.age); //21

// 上述和以下例子的效果一樣的

function f(){}

f.prototype = person.prototype;

function sub()

sub.prototype = newf();

var sub2 = new sub();

console.log(sub2.age)

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

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

javascript的6種繼承方式

1.原型鏈繼承 原型鏈繼承的主要思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。警告 通過原型鏈繼承是,不能使用物件字面量建立原型方法,這樣會重寫原型鏈!function supertype function subtype subtype.prototype new supertype...

js繼承的6種方式

想要繼承,就必須要提供個父類,繼承誰,提供繼承的屬性 function person name person.prototype.age 10 給建構函式新增了原型屬性function per per.prototype newperson var per1 newper console.log p...

清除浮動的6中方法

額外標籤法 使用 after 偽元素 給父元素定高 利用overflow hidden 屬性 父元素浮動 父元素處於絕對定位 在開發網頁的時候經常需要用到各種浮動,此時便需要及時的清除浮動,否則將會導致布局出現問題 引出問題 title outer inner footer style head d...