javascript的對象與繼承

jone5679 發(fā)布于2019-08-20 17:21 / 998人閱讀

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

1: JavaScript的構(gòu)造函數(shù)是什么?
1: 它是一個普通的函數(shù)
2: 它內(nèi)部用了this關(guān)鍵字
3: 它有一個prototype屬性，這個prototype是一個對象(當然，其實每一個函數(shù)都有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）的例子。接下來看看基于構(gòu)造函數(shù)繼承：
首先假設有兩個構(gòu)造函數(shù)：

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

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

我們希望Apple能繼承Fruit,怎么做？總共有5種繼承方法：
1: 構(gòu)造函數(shù)綁定
在子構(gòu)造函數(shù)中，在父構(gòu)造器身上調(diào)用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賦值
實例化一個父對象，然后把它賦給子構(gòu)造函數(shù)的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，繼承自構(gòu)造函數(shù)的prototype的constructor屬性。在執(zhí)行了

Apple.prototype = new Fruit();

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

Apple.prototype.constructor = Apple；

3: 把父構(gòu)造函數(shù)的prototype直接賦給子構(gòu)造函數(shù)的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

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

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: 中介構(gòu)造函數(shù)的prototype＝父構(gòu)造函數(shù)的prototype；
2: 子構(gòu)造函數(shù)的prototype＝中介構(gòu)造函數(shù)的一個實例;
3: 把子構(gòu)造函數(shù)的constructor復原為自己
5: copy繼承
就是把父構(gòu)造函數(shù)的prototype上的所有屬性和方法拷貝進子構(gòu)造方法。

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);//調(diào)用繼承方法
var appleRed = new Apple("red");
appleRed.taste;//"sweet"