JavaScript中的繼承

pekonchan 發(fā)布于2019-08-20 16:17 / 1918人閱讀

JavaScript中的繼承

以下討論中，我們以Animal作為父類(lèi)，Cat作為子類(lèi)，使Cat繼承Animal。

//父類(lèi)Animal
function Animal(){
    this.species="動(dòng)物";
}

//子類(lèi)Cat
function Cat(name, color){
    this.name=name;
    this.color=color;
}

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

使用call、apply方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上.

代碼如下：

function Cat(name, color){
    Animal.call(this, arguments);
    this.name=name;
    this.color=color;
}

二、prototype模式

如果Cat.prototype對(duì)象指向一個(gè)Animal實(shí)例，那么所有的Cat的實(shí)例就能繼承Animal了.

代碼如下：

/**
*每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象(prototype)，這個(gè)原型對(duì)象是這個(gè)函數(shù)所有實(shí)例的原型（proto）.
*每個(gè)原型對(duì)象都有一個(gè)constructor屬性，指向它的構(gòu)造函數(shù).
*每個(gè)實(shí)例也有一個(gè)constructor屬性，默認(rèn)調(diào)用prototype的constructor屬性.
*/

//將Cat的原型對(duì)象設(shè)置為Animal的實(shí)例
Cat.prototype=new Animal();

//手動(dòng)糾正Cat.prototype.constructor , 如果不糾正將指向Animal
Cat.prototype.constructor=Cat;

三、直接繼承prototype

由于Animal對(duì)象中，不變的屬性都可以直接寫(xiě)入Animal.prototype中，所以我們可以讓Cat跳過(guò)Animal，直接繼承Animal.prototype.

代碼如下：

//改寫(xiě)Animal
function Animal(){}
Animal.prototype.species="動(dòng)物";

//將Cat.prototype指向Animal.prototype，就完成了繼承
Cat.prototype=Animal.prototype;

//手動(dòng)糾正constructor指向
Cat.prototype.constructor=Cat;

四、利用空對(duì)象作為中介

空對(duì)象幾乎不占用空間，且這時(shí)修改Cat的prototype對(duì)象，不會(huì)影響Animal的prototype對(duì)象.

代碼如下：

var F=function(){};
F.prototype=Animal.prototype;

//將原型執(zhí)行一個(gè)空對(duì)象
Cat.prototype=new F();

//還是手動(dòng)修改constructor的指向
Cat.prototype.constructor=Cat;

可以將上面的方法封裝成一個(gè)函數(shù)

function extend(child, parent){
    var F=function(){};
    F.prototype=parent.prototype;
    child.prototype=new F();
    child.prototype.constructor=child;
}

總結(jié)：繼承的方法有多種，核心思想是控制prototype指向，切記糾正constructor的指向。

GPU云服務(wù)器云服務(wù)器 java中的繼承 javascript繼承 javascript繼承方法 Javascript實(shí)現(xiàn)繼承

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

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

相關(guān)文章

徹底搞懂JavaScript中的繼承

摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱(chēng)為構(gòu)造函數(shù)繼承，在中是一種關(guān)鍵的實(shí)現(xiàn)的繼承方法，相信你已經(jīng)很好的掌握了。你應(yīng)該知道，JavaScript是一門(mén)基于原型鏈的語(yǔ)言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關(guān)。甚至可以說(shuō)，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。一、構(gòu)造函數(shù)，原型屬性與實(shí)例對(duì)象要搞清楚如何在JavaScript中實(shí)現(xiàn)繼承，...

_ivan 2019-08-21 17:48 評(píng)論0 收藏0
Javascript 設(shè)計(jì)模式讀書(shū)筆記(三)——繼承

摘要：的繼承方式屬于原型式繼承，非常靈活。當(dāng)使用關(guān)鍵字執(zhí)行類(lèi)的構(gòu)造函數(shù)時(shí)，系統(tǒng)首先創(chuàng)建一個(gè)新對(duì)象，這個(gè)對(duì)象會(huì)繼承自構(gòu)造函數(shù)的原型對(duì)象新對(duì)象的原型就是構(gòu)造函數(shù)的屬性。也就是說(shuō)，構(gòu)造函數(shù)用來(lái)對(duì)生成的新對(duì)象進(jìn)行一些處理，使這個(gè)新對(duì)象具有某些特定的屬性。繼承這個(gè)東西在Javascript中尤其復(fù)雜，我掌握得也不好，找工作面試的時(shí)候在這個(gè)問(wèn)題上栽過(guò)跟頭。Javascript的繼承方式屬于原型式繼承，...

cangck_X 2019-08-21 12:16 評(píng)論0 收藏0
javascript的繼承你了解多少？

摘要：和構(gòu)造函數(shù)前面提到，是個(gè)內(nèi)置隱藏屬性，雖然在可以通過(guò)訪問(wèn)，但是其設(shè)計(jì)本意是不可被讀取和修改的，那么我們?nèi)绾卫迷玩渷?lái)建立繼承關(guān)系提供了關(guān)鍵字。到這兒，思路就清晰了，怎么讓對(duì)象和對(duì)象的相連實(shí)現(xiàn)繼承只需把的構(gòu)造函數(shù)的連接到就行了。什么是繼承? 大多數(shù)人使用繼承不外乎是為了獲得這兩點(diǎn)好處，代碼的抽象和代碼的復(fù)用。代碼的抽象就不用說(shuō)了，交通工具和汽車(chē)這類(lèi)的例子數(shù)不勝數(shù)，在傳統(tǒng)的OO語(yǔ)言中(...

baishancloud 2019-08-23 14:08 評(píng)論0 收藏0
白話解釋 Javascript 原型繼承(prototype inheritance)

摘要：我們有了構(gòu)造函數(shù)之后，第二步開(kāi)始使用它構(gòu)造一個(gè)函數(shù)。來(lái)個(gè)例子這種方式很簡(jiǎn)單也很直接，你在構(gòu)造函數(shù)的原型上定義方法，那么用該構(gòu)造函數(shù)實(shí)例化出來(lái)的對(duì)象都可以通過(guò)原型繼承鏈訪問(wèn)到定義在構(gòu)造函數(shù)原型上的方法。來(lái)源: 個(gè)人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承? 學(xué)過(guò)面向?qū)ο蟮耐瑢W(xué)們是否還記得，老師整天掛在嘴邊的面向?qū)ο笕筇?..

kid143 2019-08-21 15:09 評(píng)論0 收藏0
JavaScript中的繼承

摘要：前言作為中最重要的內(nèi)容之一，繼承問(wèn)題一直是我們關(guān)注的重點(diǎn)。如果一個(gè)類(lèi)別繼承自另一個(gè)類(lèi)別，就把這個(gè)稱(chēng)為的子類(lèi)，而把稱(chēng)為的父類(lèi)別也可以稱(chēng)是的超類(lèi)。前言作為 JavaScript 中最重要的內(nèi)容之一，繼承問(wèn)題一直是我們關(guān)注的重點(diǎn)。那么你是否清晰地知道它的原理以及各種實(shí)現(xiàn)方式呢閱讀這篇文章，你將知道：什么是繼承實(shí)現(xiàn)繼承有哪幾種方式它們各有什么特點(diǎn) 這里默認(rèn)你已經(jīng)清楚的知道構(gòu)造函...

guyan0319 2019-08-23 17:02 評(píng)論0 收藏0
[譯] 為什么原型繼承很重要

摘要：使用構(gòu)造函數(shù)的原型繼承相比使用原型的原型繼承更加復(fù)雜，我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的，使用構(gòu)造函數(shù)的原型繼承像下面這樣當(dāng)然，構(gòu)造函數(shù)的方式更簡(jiǎn)單。五天之前我寫(xiě)了一個(gè)關(guān)于ES6標(biāo)準(zhǔn)中Class的文章。在里面我介紹了如何用現(xiàn)有的Javascript來(lái)模擬類(lèi)并且介紹了ES6中類(lèi)的用法，其實(shí)它只是一個(gè)語(yǔ)法糖。感謝Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 評(píng)論0 收藏0