2018-6-29 seo達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
js中構(gòu)造函數(shù)的幾種繼承模式淺析
一、原型鏈模式繼承
利用原型讓一個引用類型繼承另一個引用類型的屬性和方法 。
用的最多。
缺點：不可傳參，不可多繼承。
-
function People(name, age) {//添加公有屬性
-
name = name || 'xiaolan';
-
age = age || 18;
-
this.name = name;
-
this.age = age;
-
}//創(chuàng)建一個名為People的類
-
People.prototype.eat = function() {//添加私有屬性
-
console.log(this.name + '賊能吃');
-
}
-
function Cat(color) {//創(chuàng)建一個名為Cat的類
-
this.color = color;
-
}
-
Cat.prototype = new People('小叮當(dāng)', 200);//實例化一個People類，并賦值給Cat類的原型鏈
-
var cat = new Cat('藍白色')
-
console.log(cat.name)//'小叮當(dāng)'
-
cat.eat();//'小叮當(dāng)賊能吃'
二、混合模式繼承
用call的方法只能繼承私有屬性，所以再加一遍一遍原型鏈模式繼承，原型鏈模式繼承又把私有屬性和公有屬性都繼承了一遍。
-
function People(name, age) { //創(chuàng)建一個父級People類
-
name = name || 'xiaolan';
-
age = age || 18;
-
this.name = name;
-
this.age = age;
-
}
-
People.prototype.eat = function() {
-
console.log(this.name + '賊能吃');
-
}
-
-
function Cat(color, name, age) {
-
this.color = color;
-
People.call(this, name, age); //通過call的形式繼承
-
//通過call(this),將People的指向改為Cat的實例
-
}
-
var cat = new Cat('藍白色', '小叮當(dāng)', 1);
-
console.log(cat.name);//'小叮當(dāng)'
-
cat.eat();//報錯，
-
//繼承不了公有屬性，所以cat.eat()會報錯；
為了繼承公有屬性，用原型鏈模式在把公有屬性和方法繼承過來，
-
function People(name, age) { //創(chuàng)建一個父級People類
-
name = name || 'xiaolan';
-
age = age || 18;
-
this.name = name;
-
this.age = age;
-
}
-
People.prototype.eat = function() {
-
console.log(this.name + '賊能吃');
-
}
-
-
function Cat(color, name, age) {
-
this.color = color;
-
People.call(this, name, age); //通過call的形式繼承
-
//通過call(this),將People的指向改為Cat的實例
-
}
-
Cat.prototype = new People()
-
var cat = new Cat('藍白色', '小叮當(dāng)', 200)
-
console.log(cat)
-
console.log(cat.name); //'小叮當(dāng)'，在原型鏈繼承的時候，就近原則,cat.name 先找到'小叮當(dāng)'，就不往下找了
-
cat.eat(); //'小叮當(dāng)賊能吃'
三、拷貝繼承
優(yōu)點：可以多繼承，可傳參；
缺點：浪費資源，不能判斷父級；
-
function People(name, age) { //創(chuàng)建一個父級People類
-
name = name || 'xiaolan';
-
age = age || 18;
-
this.name = name;
-
this.age = age;
-
}
-
People.prototype.eat = function() {
-
console.log(this.name + '賊能吃');
-
}
-
-
function Cat(color, name, age) {
-
this.color = color;
-
var people = new People(name, age) //實例化一個People類
-
for (let i in people) {
-
this[i] = people[i]; //將people中的可枚舉屬性和方法遍歷并附給Cat類，公有屬性和私有屬性都是可枚舉屬性；
-
}
-
}
-
var cat = new Cat('藍白色', '小叮當(dāng)', 2);
-
console.log(cat.name); //小叮當(dāng)
-
cat.eat(); //小叮當(dāng)賊能吃
四、寄生組合方式繼承
優(yōu)點：私有屬性和公有屬性都單獨繼承，可以傳參；
私有屬性可以多繼承，公有屬性不可多繼承；
-
function People(name, age) {
-
name = name || 'xiaolan';
-
age = age || 18;
-
this.name = name;
-
this.age = age;
-
}
-
People.prototype.eat = function() {
-
console.log(this.name + '賊能吃');
-
}
-
-
function Cat(color, name, age) {
-
this.color = color;
-
People.call(this, name, age) //用call的形式把私有屬性繼承過來
-
}
-
-
function Fn() {} //創(chuàng)建一個中間構(gòu)造函數(shù)，用來接收People的公有屬性，為了防止創(chuàng)建實例Cat實例是影響原來的people構(gòu)造函數(shù)
-
Fn.prototype = People.prototype;
-
Cat.prototype = new Fn(); //將中間構(gòu)造函數(shù)Fn繼承people的公有屬性傳給Cat的原型鏈
-
Cat.prototype.constructor = Cat; //由于上一步重置了Cat原型鏈的constructor屬性，所以要重新給賦回來；
-
var cat = new Cat('藍白色', '小叮當(dāng)', 3);
-
console.log(cat.name); //'小叮當(dāng)'
-
cat.eat() //'小叮當(dāng)賊能吃
注：若有不嚴謹與錯誤的地方，請多指教！
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://tweetduck.com