成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript實(shí)現(xiàn)繼承的三種方式

dack / 2165人閱讀

摘要：導(dǎo)讀中主要有三種實(shí)現(xiàn)繼承的方式，分別是構(gòu)造函數(shù)繼承原型繼承組合繼承其中前兩種方式都有其缺陷。方法使用原型繼承避免了構(gòu)造函數(shù)繼承中方法重復(fù)拷貝浪費(fèi)內(nèi)存的缺陷。

導(dǎo)讀

JavaScript中主要有三種實(shí)現(xiàn)繼承的方式，分別是

構(gòu)造函數(shù)繼承

原型繼承

組合繼承

其中前兩種方式都有其缺陷。第三種方式組合繼承則將前兩種方式結(jié)合起來，取長(zhǎng)補(bǔ)短，是JS繼承最常用的最佳實(shí)踐。本文結(jié)合代碼和注釋逐一闡述三種繼承方式。

構(gòu)造函數(shù)繼承

構(gòu)造函數(shù)繼承的關(guān)鍵： 在Child構(gòu)造函數(shù)中執(zhí)行Parent.call(this)。

function Parent(name) {
  this.name = name;
  this.hobby = [];
  this.speak = function() {
    console.log("Parent speak");
  } // 缺點(diǎn)1：new多個(gè)Child時(shí)，Parent構(gòu)造函數(shù)中的方法會(huì)在每個(gè)Child中拷貝一份，浪費(fèi)內(nèi)存
}
Parent.prototype.say = function() {
  console.log("Parent say");
} // 缺點(diǎn)2：Parent原型對(duì)象上的方法不會(huì)被Child繼承
function Child(name, type) {
  Parent.call(this, name); // 構(gòu)造函數(shù)繼承的關(guān)鍵
  this.type = type;
}
原型繼承

原型繼承的關(guān)鍵： 設(shè)置Child原型指向ParentChild.prototype = new Parent()。

function Parent(name) {
  this.name = name;
  this.hobby = []; // 缺點(diǎn)：Parent的引用屬性會(huì)被所有Child實(shí)例共享，互相干擾
}
Parent.prototype.say = function() {
  console.log("Parent say");
}
function Child(type) {
  this.type = type;
}
Child.prototype = new Parent(); // 原型繼承的關(guān)鍵
組合繼承（最佳實(shí)踐）

組合繼承的關(guān)鍵：

屬性使用構(gòu)造函數(shù)繼承 —— 避免了原型繼承中Parent引用屬性被所有Child實(shí)例共享的缺陷。

方法使用原型繼承 —— 避免了構(gòu)造函數(shù)繼承中方法重復(fù)拷貝、浪費(fèi)內(nèi)存的缺陷。

function Parent(name) {
  this.name = name; 
  this.hobby = []; // 屬性放在構(gòu)造函數(shù)中
}
Parent.prototype.say = function() { // 方法放在原型中
  console.log("Parent say");
}
function Child(name, type) {
  Parent.call(this, name);  // Child繼承Parent屬性（構(gòu)造函數(shù)繼承）
  this.type = type;  // Child擴(kuò)展屬性
}
Child.prototype = Object.create(Parent.prototype);  // Child繼承Parent方法（原型繼承）
Child.prototype.speak = function() { // Child擴(kuò)展方法
  console.log("Child speak");
}
Child.prototype.constructor = Child; // 修復(fù)Child的constructor指向，否則Child的constructor會(huì)指向Parent

補(bǔ)充：
對(duì)于組合繼承代碼中的Child.prototype = Object.create(Parent.prototype)，還有兩種常見的類似寫法是Child.prototype = Parent.prototype和Child.prototype = new Parent()，但這兩種寫法都是有缺陷的，需要避免：

Child.prototype = Parent.prototype，修改Child.prototype就等于修改Parent.prototype，會(huì)干擾所有Parent實(shí)例。

Child.prototype = new Parent()，Parent構(gòu)造函數(shù)重復(fù)調(diào)用了兩次（另一處調(diào)用是Child構(gòu)造函數(shù)中的Parent.call(this)），浪費(fèi)效率，且如果Parent構(gòu)造函數(shù)有副作用，重復(fù)調(diào)用可能造成不良后果。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98009.html

相關(guān)文章

  • 關(guān)于創(chuàng)建對(duì)象的三種寫法 ---- 字面量,new構(gòu)造器和Object.create()

    摘要：前言重新梳理一下發(fā)現(xiàn)以前說的有問題順便比較兩兩寫法之間的差異性使用對(duì)象字面量表示法函數(shù)字面量運(yùn)行時(shí)間嵌套函數(shù)字面量調(diào)用方法函數(shù)字面量運(yùn)行時(shí)間函數(shù)字面量運(yùn)行時(shí)間使用操作符后跟構(gòu)造函數(shù)詳情可參考關(guān)于中的運(yùn)算符構(gòu)造函數(shù)與原型鏈一些理解構(gòu)造函數(shù)原型 前言 PS:2018/04/14: 重新梳理一下發(fā)現(xiàn)以前說的有問題,順便比較兩兩寫法之間的差異性. 1、使用對(duì)象字面量表示法 console.ti...

    Jiavan 評(píng)論0 收藏0

  • Java實(shí)現(xiàn)線程的三種方式和區(qū)別

    摘要：下面我們通過代碼來看一下實(shí)現(xiàn)和區(qū)別三種實(shí)現(xiàn)繼承，重寫方法實(shí)現(xiàn)接口，實(shí)現(xiàn)方法實(shí)現(xiàn)接口，實(shí)現(xiàn)方法，帶有返回值和異常如何使用第一種實(shí)現(xiàn)方式第二種實(shí)現(xiàn)方式第三種實(shí)現(xiàn)從代碼可以看出以上提到的區(qū)別，，。第二種方式并沒有體現(xiàn)共用同一個(gè)。 Java實(shí)現(xiàn)線程的三種方式和區(qū)別 Java實(shí)現(xiàn)線程的三種方式： 繼承Thread 實(shí)現(xiàn)Runnable接口 實(shí)現(xiàn)Callable接口 區(qū)別： 第一種方式繼承T...

    hyuan 評(píng)論0 收藏0

  • constructor設(shè)計(jì)模式

    摘要：對(duì)象的構(gòu)造函數(shù)用于創(chuàng)建特定類型的對(duì)象既要準(zhǔn)備使用對(duì)象，也要接收參數(shù)，構(gòu)造函數(shù)在創(chuàng)建對(duì)象時(shí)可以用來設(shè)置成員屬性和方法的值。 在經(jīng)典的面向?qū)ο缶幊陶Z言中，constructor是一個(gè)特殊的方法，被用來初始化一個(gè)新建的對(duì)象，一旦該對(duì)象被分配內(nèi)存話。 在JavaScript中幾乎所有的東西都是一個(gè)對(duì)象，然而常常引起我們興趣的是對(duì)象的constructor。 對(duì)象的構(gòu)造函數(shù)用于創(chuàng)建特定類型的對(duì)象...

    leanote 評(píng)論0 收藏0

  • 面試題：增強(qiáng)一個(gè)對(duì)象的方法的三種方式

    摘要：面試題增強(qiáng)一個(gè)對(duì)象的方法的三種方式繼承使用這種方式必須滿足的條件是被增強(qiáng)的方法的所在類能被繼承，并且這個(gè)對(duì)象已經(jīng)明確知道。所以創(chuàng)建一個(gè)類繼承重寫了父類的方法增強(qiáng)了，變成飛了。。。 面試題：增強(qiáng)一個(gè)對(duì)象的方法的三種方式 1. 繼承 使用這種方式必須滿足的條件是：被增強(qiáng)的方法的所在類能被繼承，并且這個(gè)對(duì)象已經(jīng)明確知道。 舉例： 有一個(gè)接口Person，里面有一個(gè)方法run（） pack...

    233jl 評(píng)論0 收藏0

  • javascript高程3 學(xué)習(xí)筆記(三)

    摘要：與執(zhí)行環(huán)境相關(guān)的變量對(duì)象中有執(zhí)行環(huán)境定義的所有變量和函數(shù)作用域鏈代碼在一個(gè)環(huán)境中執(zhí)行，便會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈。 執(zhí)行環(huán)境 執(zhí)行環(huán)境是什么？ javascript的解釋器每次開始執(zhí)行一個(gè)函數(shù)時(shí)，都會(huì)為每個(gè)函數(shù)創(chuàng)建一個(gè)執(zhí)行環(huán)境（execution context）。 執(zhí)行環(huán)境定義了變量或者函數(shù)有權(quán)訪問的其他數(shù)據(jù)，決定了他們各自的行為。 與執(zhí)行環(huán)境相關(guān)的變量對(duì)象(...

    avwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<