對js原型的思考

Pocher 發(fā)布于2019-08-22 15:59 / 3294人閱讀

摘要：原型鏈上有兩個關(guān)鍵詞和比較重要，是設(shè)置構(gòu)造函數(shù)的原型對象，是聲明原型的構(gòu)造函數(shù)，不管是對象還是函數(shù)，都有一個隱式屬性用來構(gòu)成一條完整原型鏈的指向。

思考

說到原型，不得不提到原型鏈,js中不管是對象還是方法（也是對象）都有個隱藏屬性_proto_，來表示原型鏈的下一個指向，一般對象是指向Object.prototype,方法是指向Function.prototype,構(gòu)造函數(shù)new出來的對象指向想構(gòu)造函數(shù)的prototype

原型鏈的思考

因為原型鏈的存在，當(dāng)前對象或者方法可以共用原型鏈上的上級屬性和方法

var obj = {};
obj.toString() //[object Object]

obj對象上是沒有toString方法的，因為obj._proto_指向Object.prototype,具體上是調(diào)用Object.prototype方法：Object.prototype.toString.apply(obj)

function Foo() {

}
Foo.toString();//function Foo() {}

方法的原型鏈?zhǔn)荈oo->Function.prototype->Object.prototype,所以Foo調(diào)用toString方法是引用Function上的toString方法，具體上是調(diào)用Function.prototype方法：Function.prototype.toString.apply(obj)

有時候我們?yōu)榱死^承父類（其實js并沒有類這個概念），會通過原型繼承去繼承父類的一些方法，在此之前，先簡單敘述下通過構(gòu)造函數(shù)實例化一個對象的過程，比如以下創(chuàng)建一個obj對象，

var obj = new Object();

先創(chuàng)建一個空對象{}

空對象{}._proto_指向Object.prototype

Object.apply({})

再執(zhí)行構(gòu)造方法里面的代碼

所以當(dāng)es5繼承方法時，可以選擇原型繼承，通過修改prototype的值，如：
ES5的情況：

var Father = function(name) {
    this.name = name;
}

Father.prototype.say = function() {
    return "my name is " + this.name;
}

var Child = function(name) {
    this.name = name;
}

Child.prototype = new Father();

var child = new Child("Nico");
child.say();//my name is Nico

但是在上面原型繼承的情況，我們還要對Child的構(gòu)造函數(shù)的constructor做一個聲明

Child.prototype.constructor = Child;

因為Child原型是Father實例的一個引用，當(dāng)想修改Child原型的方法時，會被掛在Father的實例對象上。

ES6的情況:

class Father {
    constructor(name) {
        this.name = name;
    }
    say() {
        return "my name is " + this.name;
    }
}

class Child extends Father {
    constructor(name) {
        super(name)
    }
}

var child = new Child("Nico");
child.say()//my name is Nico

es6的class類中，Child類的原型構(gòu)造器不用做額外聲明，因為，es6的class的constructor指向自身

繼承的思考

子類能使用父類的方法

除了上面提及到的原型鏈繼承，還有例如構(gòu)造函數(shù)繼承：

function Veticle(name) {
    this.name = name || null

    this.drive = function() {
        console.log(this.name + " drives! --from Veticle ");
    }
}

function Car(name) {
    Veticle.call(this)
    this.name = name;
}

var car = new Car("a car");
car.drive();//a car drives! --from Veticle

這種方法核心就通過改變構(gòu)造函數(shù)的上下文(context)，達(dá)到子類能夠使用父類方法，但是這種方法不能使用父類原型方法。

除此之外，還可以遍歷父類實例繼承父類方法：

function Veticle(name) {
    this.name = name || null

    this.drive = function() {
        console.log(this.name + "drives! --from Veticle ");
    }
}

Veticle.prototype.getName = function() {
    return this.name;
}

function Car(name) {
    var veticle = new Veticle();
    for (var p in veticle) {
        console.log(p)
        Car.prototype[p] = veticle[p];
    }
    this.name = name;
}

var car = new Car("a car");
car.getName();//a car

這種方法可以獲取實例能調(diào)用的所有方法，除了不可枚舉（ES6 class方法是不可枚舉的）

其實關(guān)于繼承js已經(jīng)有個很好的的實現(xiàn)方法叫寄生組合繼承，大概原理是用構(gòu)造函數(shù)繼承實例屬性，用原型繼承原型方法，而寄生組合繼承是在組合繼承的基礎(chǔ)上強(qiáng)化，兩者的區(qū)別是前者避免了兩次實例化父類，是目前比較好的es5實現(xiàn)繼承的方法：

function Veticle(name) {
    this.name = name || null

    this.drive = function() {
        console.log(this.name + "drives! --from Veticle ");
    }
}

Veticle.prototype.getName = function() {
    return this.name;
}

function Car(name) {
    Veticle.call(this)

    this.name = name || "car"
}

function inheritProto(subType, superType) {
    var prototype = Object.create(superType.prototype);
    subType.prototype.constructor = subType;
    subType.prototype = prototype;
}

inheritProto(Car, Veticle)

var car = new Car("siip");

總結(jié)

????js中有一些構(gòu)造方法諸如Object、Function、String、Number等等，當(dāng)當(dāng)前對象調(diào)用方法或獲取屬性時，會順著自身對象到構(gòu)造函數(shù)原型，再到Object原型，最后到Null這么一條原型鏈上查找。原型鏈上有兩個關(guān)鍵詞prototype和constructor比較重要，prototype是設(shè)置構(gòu)造函數(shù)的原型對象，constructor是聲明原型的構(gòu)造函數(shù)，不管是對象還是函數(shù)，都有一個隱式屬性_proto_用來構(gòu)成一條完整原型鏈的指向。
????繼承有繼承屬性和繼承方法，很多時候es5實現(xiàn)繼承比es6要稍微簡單一點，es6的class的原型方法是不可枚舉的，有時候，掛載方法時需要通過Object.getOwnPropertyNames方法獲取。