无码一区二区三区中文字幕

js學習中的總結——幾種繼承模式

2018-6-29 seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

js中構造函數(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('小叮當', 200);//實例化一個People類，并賦值給Cat類的原型鏈 var cat = new Cat('藍白色') console.log(cat.name)//'小叮當' cat.eat();//'小叮當賊能吃'

二、混合模式繼承

用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('藍白色', '小叮當', 1); console.log(cat.name);//'小叮當' 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('藍白色', '小叮當', 200) console.log(cat) console.log(cat.name); //'小叮當'，在原型鏈繼承的時候，就近原則,cat.name 先找到'小叮當'，就不往下找了 cat.eat(); //'小叮當賊能吃'

三、拷貝繼承

優(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('藍白色', '小叮當', 2); console.log(cat.name); //小叮當 cat.eat(); //小叮當賊能吃

四、寄生組合方式繼承

優(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)建一個中間構造函數(shù)，用來接收People的公有屬性，為了防止創(chuàng)建實例Cat實例是影響原來的people構造函數(shù) Fn.prototype = People.prototype; Cat.prototype = new Fn(); //將中間構造函數(shù)Fn繼承people的公有屬性傳給Cat的原型鏈 Cat.prototype.constructor = Cat; //由于上一步重置了Cat原型鏈的constructor屬性，所以要重新給賦回來； var cat = new Cat('藍白色', '小叮當', 3); console.log(cat.name); //'小叮當' cat.eat() //'小叮當賊能吃

注：若有不嚴謹與錯誤的地方，請多指教！