javascript的對象與繼承

jone5679 發布于2019-08-20 17:21 / 999人閱讀

摘要：的構造函數是什么它是一個普通的函數它內部用了關鍵字它有一個屬性，這個是一個對象當然，其實每一個函數都有屬性這個上面是可以被繼承的屬性可被繼承的屬性以上是一個從原型對象生成實例對象的例子。

1: JavaScript的構造函數是什么?
1: 它是一個普通的函數
2: 它內部用了this關鍵字
3: 它有一個prototype屬性，這個prototype是一個對象(當然，其實每一個函數都有prototype屬性)
4: 這個prototype上面是可以被繼承的屬性

function Apple(price, colour){
    this.price = price;
    this.colour = colour;
}
Apple.prototype.type = "fruit"; //可被繼承的屬性

var appleRed = new Apple(10, "red");
var appleGreen = new Apple(20, "green");

appleRed.colour;//red
appleGreen.colour;//green
appleRed.type; //fruit
appleGreen.type;//fruit

以上是一個從原型對象（Apple）生成實例對象（appleGreen, appleRed）的例子。接下來看看基于構造函數繼承：
首先假設有兩個構造函數：

function Fruit(){
    this.taste = "sweet";
}

function Apple(color){
    this.color = "red"
}

我們希望Apple能繼承Fruit,怎么做？總共有5種繼承方法：
1: 構造函數綁定
在子構造函數中，在父構造器身上調用call或者apply方法

function Fruit(){
    this.taste = "sweet";
}

function Apple(color){
    Fruit.apply(this, arguments);
    this.color = "red"
}

var appleRed = new Apple("red");
appleRed.taste;// "sweet"

2: prototype賦值
實例化一個父對象，然后把它賦給子構造函數的prototype屬性

function Fruit(){
    this.taste = "sweet";
}

function Apple(color){
    this.color = "red"
}

Apple.prototype = new Fruit();
Apple.prototype.constructor = Apple;//特別注意這一行

var appleRed = new Apple("red");
appleRed.taste;//"sweet"
appleRed.constructor === Apple;//true

每一個實例都有一個constructor，繼承自構造函數的prototype的constructor屬性。在執行了

Apple.prototype = new Fruit();

之后，相當于是把Apple的prototype這個對象整個覆蓋了，這個時候 Apple.prototype.constructor是Fruit這個方法。這樣子就意味這appleRed.constructor也是Fruit，這樣繼承就混亂了，因為appleRed明明是由Apple這個構造方法實例化出來的。所以我們要把Apple正確的constructor重新設置回去：

Apple.prototype.constructor = Apple；

3: 把父構造函數的prototype直接賦給子構造函數的prototype

function Fruit(){}
Fruit.prototype.taste = "sweet";

function Apple(color){
    this.color = "red"
}

Apple.prototype = Fruit.prototype;
Apple.prototype.constructor = Apple;

var appleRed = new Apple("red");
appleRed.taste;//"sweet"
Fruit.prototype.constructor === Apple;//true

雖然實現了繼承，但是現在Apple和Fruit的prototype指向了同一段內存，任何對Apple.prototype的修改都會影響到Fruit.prototype,所以代碼最后一行的這種結果，是我們不愿意看到的。
4: 利用一個空的中介構造函數
其實第四種是第二種和第三種的結合

function Fruit(){}
Fruit.prototype.taste = "sweet";

function Apple(color){
    this.color = "red"
}

var F = function(){};
F.prototype = Fruit.prototype;
Apple.prototype = new F();
Apple.prototype.constructor = Apple;

var appleRed = new Apple("red");
appleRed.taste;//"sweet"
appleRed.constructor === Apple;//true

1: 中介構造函數的prototype＝父構造函數的prototype；
2: 子構造函數的prototype＝中介構造函數的一個實例;
3: 把子構造函數的constructor復原為自己
5: copy繼承
就是把父構造函數的prototype上的所有屬性和方法拷貝進子構造方法。

function Fruit(){}
Fruit.prototype.taste = "sweet";

function Apple(color){
    this.color = "red"
}

function extend(child, parent){
    var c = child.prototype;
    var p = parent.prototype;
    for(var i in p){
        c[i] = p[i]
    }
}
extend(Apple, Fruit);//調用繼承方法
var appleRed = new Apple("red");
appleRed.taste;//"sweet"

云服務器 GPU云服務器 javascript類的繼承 javascript的dom對象 javascript繼承 javascript繼承方法

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

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

理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0
徹底搞懂JavaScript中的繼承

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

_ivan 2019-08-21 17:48 評論0 收藏0
繼承與原型

摘要：既然構造函數有屬于自己的原型對象，那么我們應該能讓另一個構造函數來繼承他的原型對象咯我們在構造函數內部執行了函數并改變了函數內部的指向其實這個指向的是實例化之后的對象。我們在討（mian）論（shi）JavaScript這門語言時，總是繞不過的一個話題就是繼承與原型鏈。那么繼承與原型鏈到底是什么呢？我很喜歡的一個聊天模式是：我不能說XX是什么，我只能說XX像什么。也就是說我不直接跟...

My_Oh_My 2019-08-26 11:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0