成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

dack / 2214人閱讀

摘要：導(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é)合起來，取長補(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多個Child時，Parent構(gòu)造函數(shù)中的方法會在每個Child中拷貝一份，浪費(fèi)內(nèi)存
}
Parent.prototype.say = function() {
  console.log("Parent say");
} // 缺點(diǎn)2：Parent原型對象上的方法不會被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的引用屬性會被所有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會指向Parent

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

Child.prototype = Parent.prototype，修改Child.prototype就等于修改Parent.prototype，會干擾所有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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/98009.html

相關(guān)文章

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

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

    Jiavan 評論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)共用同一個。 Java實(shí)現(xiàn)線程的三種方式和區(qū)別 Java實(shí)現(xiàn)線程的三種方式： 繼承Thread 實(shí)現(xiàn)Runnable接口 實(shí)現(xiàn)Callable接口 區(qū)別： 第一種方式繼承T...

    hyuan 評論0 收藏0

  • constructor設(shè)計模式

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

    leanote 評論0 收藏0

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

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

    233jl 評論0 收藏0

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

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

    avwu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<