js知識梳理4.繼承的模式探究

wenshi11019 發(fā)布于2019-08-26 12:16 / 2555人閱讀

摘要：而且在超類型的原型中定義的方法，對子類型而言也是不可見的，結(jié)果所有類型都只能使用構(gòu)造函數(shù)模式。在主要考慮對象而不是自定義類型和構(gòu)造函數(shù)的情況下，這個模式也不錯。

寫在前面

注：這個系列是本人對js知識的一些梳理，其中不少內(nèi)容來自書籍:Javascript高級程序設(shè)計第三版和JavaScript權(quán)威指南第六版，感謝它們的作者和譯者。有發(fā)現(xiàn)什么問題的，歡迎留言指出。

1.原型鏈

將原型鏈作為實現(xiàn)繼承的方法，基本思想就是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法：

function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function () {
    return this.property;
}
function SubType() {
    this.subproperty = false;
}
//繼承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
    return this.subproperty;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true

原型鏈實現(xiàn)繼承的問題：①問題來自包含引用類型值的原型，因為原來的實例屬性變成現(xiàn)在的原型屬性，會被共享，②在創(chuàng)建子類時，不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。

function SuperType() {
    this.colors = ["red","blue","green"];
}
function SubType() {}
//繼承了SuperType
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//["red", "blue", "green", "black"]

var instance2 = new SubType();
console.log(instance2.colors);//["red", "blue", "green", "black"]

2.借用構(gòu)造函數(shù)

即是在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)（還可以傳遞參數(shù)）：

function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
function SubType() {
    SuperType.call(this,"jaychou");
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//["red", "blue", "green", "black"]
console.log(instance1.name);//jaychou

var instance2 = new SubType();
console.log(instance2.colors);//["red", "blue", "green"]
console.log(instance2.name);//jaychou

借用構(gòu)造函數(shù)的問題：方法都在構(gòu)造函數(shù)中定義，沒有進(jìn)行函數(shù)復(fù)用。而且在超類型的原型中定義的方法，對子類型而言也是不可見的，結(jié)果所有類型都只能使用構(gòu)造函數(shù)模式。考慮到這些問題，借用構(gòu)造函數(shù)的技術(shù)也是很少多帶帶使用的。

3.組合繼承

即使用原型鏈實現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。既通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用，又能夠保證每個實例都有它自己的屬性:

function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}

function SubType(name,age) {
    //繼承實例屬性
    SuperType.call(this,name);

    this.age = age;
}
//繼承原型中的方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
    console.log(this.age);
}

var instance1 = new SubType("jaychou",34);
instance1.colors.push("black");
console.log(instance1.colors);//["red", "blue", "green", "black"]
instance1.sayName();//jaychou
instance1.sayAge();//34

var instance2 = new SubType("xiaoming",15);
console.log(instance2.colors);//["red", "blue", "green"]
instance2.sayName();//xiaoming
instance2.sayAge();//15

4.原型式繼承

沒有使用嚴(yán)格意義上的構(gòu)造函數(shù)，借助原型可以基于已有的對象創(chuàng)建新對象的特點。同時還不必因此創(chuàng)建自定義類型：

function inherit(p) {
    if(p==null) throw TypeError();
    if(Object.create) return Object.create(p);
    var t = typeof p;
    if(t !== "object" && t !== "funtion") throw TypeError();
    function f() {};
    f.prototype = p;
    return new f();
}

好處：簡單直接方便，只是簡單地想一個對象與另一個對象保持類似的情況下，原型式繼承是很不錯的做法。注意點：包含引用類型值的屬性始終都會共享相應(yīng)的值，就像使用原型模式一樣，如：

var person = {
    name:"jaychou",
    friends:[1,2]
}
var anotherP = inherit(person);
anotherP.friends.push(3);
console.log(person.friends);//[1, 2, 3]
anotherP.name = "xiaoming";
console.log(anotherP.name);//xiaoming
console.log(person.name);//jaychou

所以從本質(zhì)上講，原型式繼承就是對傳過來的對象執(zhí)行了一次淺復(fù)制。

5.寄生式繼承

即創(chuàng)建一個僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部以某種方式來增強對象，最后返回對象（接上）：

function createAnother(original) {
    var clone = inherit(original);
    clone.sayHi = function () {
        console.log("hi");
    }
    return clone;
}
var person = {
    name:"jaychou",
    friends:[1,2]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

在例子里給傳進(jìn)來的對象增加了方法sayHi，增強了對象。在主要考慮對象而不是自定義類型和構(gòu)造函數(shù)的情況下，這個模式也不錯。缺點：不能做到函數(shù)復(fù)用而降低效率了。

6.寄生組合式繼承

組合繼承的問題就是調(diào)用了兩次超類型構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型的時候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部。解決方案就是：不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù)，我們所需要的無非就是超類型原型的一個副本而已。本質(zhì)上，就是使用寄生式繼承來繼承超類型的原型，然后再將結(jié)果指定給子類型的原型：

//寄生組合式繼承
function inheritPrototype(subType, superType) {
    var prototype = inherit(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}
function SubType(name,age) {
    //借用超類型的構(gòu)造函數(shù)繼承了超類型的實例屬性
    SuperType.call(this,name);
    this.age = age;
}
//寄生式繼承了超類型的原型方法
inheritPrototype(SubType,SuperType);

SubType.prototype.sayAge = function () {
    console.log(this.age);
}

var instance1 = new SubType("jaychou",34);
instance1.sayName();//jaychou
instance1.sayAge();//34

console.log(SuperType.prototype.isPrototypeOf(instance1));//true
console.log(instance1 instanceof SuperType);//true

好處：①只調(diào)用了一處SuperType構(gòu)造函數(shù)，②避免了在SubType.prototype上面創(chuàng)建不必要的、多余的屬性。綜上，寄生組合式繼承是繼承的最理想方式。