JavaScript中的繼承

pekonchan 發布于2019-08-20 16:17 / 1910人閱讀

JavaScript中的繼承

以下討論中，我們以Animal作為父類，Cat作為子類，使Cat繼承Animal。

//父類Animal
function Animal(){
    this.species="動物";
}

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

一、構造函數繼承

使用call、apply方法，將父對象的構造函數綁定在子對象上.

代碼如下：

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

二、prototype模式

如果Cat.prototype對象指向一個Animal實例，那么所有的Cat的實例就能繼承Animal了.

代碼如下：

/**
*每個構造函數都有一個原型對象(prototype)，這個原型對象是這個函數所有實例的原型（proto）.
*每個原型對象都有一個constructor屬性，指向它的構造函數.
*每個實例也有一個constructor屬性，默認調用prototype的constructor屬性.
*/

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

//手動糾正Cat.prototype.constructor , 如果不糾正將指向Animal
Cat.prototype.constructor=Cat;

三、直接繼承prototype

由于Animal對象中，不變的屬性都可以直接寫入Animal.prototype中，所以我們可以讓Cat跳過Animal，直接繼承Animal.prototype.

代碼如下：

//改寫Animal
function Animal(){}
Animal.prototype.species="動物";

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

//手動糾正constructor指向
Cat.prototype.constructor=Cat;

四、利用空對象作為中介

空對象幾乎不占用空間，且這時修改Cat的prototype對象，不會影響Animal的prototype對象.

代碼如下：

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

//將原型執行一個空對象
Cat.prototype=new F();

//還是手動修改constructor的指向
Cat.prototype.constructor=Cat;

可以將上面的方法封裝成一個函數

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

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

GPU云服務器云服務器 java中的繼承 javascript繼承 javascript繼承方法 Javascript實現繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82840.html

徹底搞懂JavaScript中的繼承

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

_ivan 2019-08-21 17:48 評論0 收藏0
Javascript 設計模式讀書筆記(三)——繼承

摘要：的繼承方式屬于原型式繼承，非常靈活。當使用關鍵字執行類的構造函數時，系統首先創建一個新對象，這個對象會繼承自構造函數的原型對象新對象的原型就是構造函數的屬性。也就是說，構造函數用來對生成的新對象進行一些處理，使這個新對象具有某些特定的屬性。繼承這個東西在Javascript中尤其復雜，我掌握得也不好，找工作面試的時候在這個問題上栽過跟頭。Javascript的繼承方式屬于原型式繼承，...

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

摘要：和構造函數前面提到，是個內置隱藏屬性，雖然在可以通過訪問，但是其設計本意是不可被讀取和修改的，那么我們如何利用原型鏈來建立繼承關系提供了關鍵字。到這兒，思路就清晰了，怎么讓對象和對象的相連實現繼承只需把的構造函數的連接到就行了。什么是繼承? 大多數人使用繼承不外乎是為了獲得這兩點好處，代碼的抽象和代碼的復用。代碼的抽象就不用說了，交通工具和汽車這類的例子數不勝數，在傳統的OO語言中(...

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

摘要：我們有了構造函數之后，第二步開始使用它構造一個函數。來個例子這種方式很簡單也很直接，你在構造函數的原型上定義方法，那么用該構造函數實例化出來的對象都可以通過原型繼承鏈訪問到定義在構造函數原型上的方法。來源: 個人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承? 學過面向對象的同學們是否還記得，老師整天掛在嘴邊的面向對象三大特...

kid143 2019-08-21 15:09 評論0 收藏0
JavaScript中的繼承

摘要：前言作為中最重要的內容之一，繼承問題一直是我們關注的重點。如果一個類別繼承自另一個類別，就把這個稱為的子類，而把稱為的父類別也可以稱是的超類。前言作為 JavaScript 中最重要的內容之一，繼承問題一直是我們關注的重點。那么你是否清晰地知道它的原理以及各種實現方式呢閱讀這篇文章，你將知道：什么是繼承實現繼承有哪幾種方式它們各有什么特點這里默認你已經清楚的知道構造函...

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

摘要：使用構造函數的原型繼承相比使用原型的原型繼承更加復雜，我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的，使用構造函數的原型繼承像下面這樣當然，構造函數的方式更簡單。五天之前我寫了一個關于ES6標準中Class的文章。在里面我介紹了如何用現有的Javascript來模擬類并且介紹了ES6中類的用法，其實它只是一個語法糖。感謝Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 評論0 收藏0