這篇文章主要講解了“JavaScript中的繼承采用什么方式”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript中的繼承采用什么方式”吧！

創(chuàng)新互聯(lián)公司專注于企業(yè)網(wǎng)絡營銷推廣、網(wǎng)站重做改版、甘南網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5響應式網(wǎng)站、商城網(wǎng)站制作、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為甘南等各大城市提供網(wǎng)站開發(fā)制作服務。

采用的方式有：1、原型鏈繼承，每一個AO對象都有一個prototype，返回對象類型原型的引用，所以可以給它賦值一個對象；2、原型冒充繼承，把父類的構(gòu)造函數(shù)拿過來執(zhí)行一遍；3、復制繼承，把父類所有的屬性和方法復制過來；ES6標準類的繼承。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

1、原型鏈繼承

這個繼承最為簡單，它的實現(xiàn)原理是，每一個AO對象都有一個prototype，返回對象類型原型的引用，所以可以給它賦值一個對象，就可以實現(xiàn)簡單的原型鏈繼承。

function Animal(){    this.eat = function(){
        alert("我會吃");
    }
}function Bird(){    this.fly = function(){
        alert("我會飛");
    }
}
//設置Bird類的原型為一個Animal對象
Bird.prototype = new Animal();var pigeon = new Bird();
pigeon.fly();
pigeon.eat();

結(jié)果出現(xiàn)了，實現(xiàn)了鳥類繼承動物會吃的特性。打印一下console.info(pigeon)我們可以看到：

當前對象的__proto__屬性為一個Animal對象，而eat方法在這個Animal對象也就是它的父類里，如果一個屬性或方法在當前對象里無法找到的話，就會照著原型鏈一步一步找上去。

這里Bird的父類是Animal，Animal的父類是Object，或者說所有沒有直接指定prototype的對象，它的父類都是Object。因為toString()方法就是在Object里，所以所有對象都可以調(diào)用它。而Object的父類是null。

還有一個需要注意的問題是，原型鏈繼承中，所有的子類的父類對象都是同一個。只要任意一個子類改變了父類對象的屬性，那所有對象都會受到影響。這點可能是缺點，也可能是優(yōu)點。

注：prototype和__proto__的區(qū)別可以看我另外一篇博客 http://www.cnblogs.com/shamoyuu/p/prototype.html

2、原型冒充繼承

原型冒充的原理是：把父類的構(gòu)造函數(shù)拿過來執(zhí)行一遍。下面看代碼：

function Animal(){    this.eat = function(){
        alert("我會吃");
    }
}function Bird(){    Animal.apply(this, arguments);this.fly = function(){
        alert("我會飛");
    }
}var pigeon = new Bird();
pigeon.fly();
pigeon.eat();

效果跟上面是一樣一樣的，但是這個時候eat方法已經(jīng)不在原型鏈上，而是在pigeon對象上。

3、復制繼承

復制繼承的原理是：把父類所有的屬性和方法復制過來。下面看代碼。

function Animal(){    this.eat = function(){
        alert("我會吃");
    }
}function Bird(){    this.fly = function(){
        alert("我會飛");
    }    //這里寫一個繼承的方法，用來復制所有父類的屬性或方法
    this.extend = function(parent){        for(var key in parent){            this[key] = parent[key];
        }
    }
}var pigeon = new Bird();//執(zhí)行繼承的方法pigeon.extend(new Animal());

pigeon.fly();
pigeon.eat();

這個也和上面一樣一樣的。

4、ES6標準類的繼承

ES6中引入了class的概念，新的class能幫助我們寫出更好更直觀的面向?qū)ο蟮拇a。

下面這是ES6中類與類的繼承，實現(xiàn)的效果跟上面是一樣的。

class Animal {
    constructor(name){        this.name = name;        this.type = "動物";
    }
    
    says(say){
        console.info(this.type + "【" + this.name + "】" + "說 " + say);
    }
}

let dog = new Animal("狗狗");
dog.says("汪汪汪");


class Bird extends Animal {
    constructor(name){
        super(name);        this.type = "小鳥";
    }
}

let pigeon = new Bird("鴿子");
pigeon.says("我是一只小鳥");

實現(xiàn)是非常簡單直觀的，而且不會再被人稱為這是“模擬繼承”。

擴展資料

原型鏈繼承利弊

1、只能單繼承。2、繼承后會影響所有的對象。3、速度略慢。

原型冒充繼承利弊

1、雖然可以多繼承，但是無法在運行的時候動態(tài)繼承，只能修改父類的構(gòu)造函數(shù)。

復制繼承（非ES6推薦）

因為上面兩個所擁有的缺點它都很好地避開了，它可以實現(xiàn)多繼承，繼承只影響當前對象，而且速度快，不必修改父類的構(gòu)造函數(shù)等等等等，所以最推薦的還是這種繼承方式。

注：jQuery的繼承也是采取復制繼承實現(xiàn)的，不過jQuery加了很多的驗證判斷，但是原理是一樣的。

ES6標準類的繼承

如果能使用最新的ES6的特性，這種繼承是最好的，通俗易懂，是標準的面向?qū)ο蟮恼Z言該有的繼承方式。

但是需要注意：

子類的contructor里，“this”必須放在super()調(diào)用之后

子類的contructor里必須調(diào)用super()，或者明確地返回一個對象

不能多繼承

-- Java在繼承的時候會自動生成一個父類對象，但是js里并不會

感謝各位的閱讀，以上就是“JavaScript中的繼承采用什么方式”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對JavaScript中的繼承采用什么方式這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

當前題目：JavaScript中的繼承采用什么方式
文章路徑：http://jinyejixie.com/article36/poessg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、微信公眾號、企業(yè)建站、移動網(wǎng)站建設、網(wǎng)站導航、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)