理解JS構(gòu)造函數(shù)繼承

ninefive 發(fā)布于2019-08-19 18:04 / 2172人閱讀

摘要：對象之間的繼承有以下幾個方法用和不推薦多帶帶使用，定義在中的屬性和方法不能繼承模式注意需要先繼承后定義傳統(tǒng)模式推薦，關(guān)鍵點是以及重新改變利用空對象間接繼承只繼承中的屬性，關(guān)鍵點在于利用一個空的構(gòu)造函數(shù)當(dāng)中介拷貝繼承不推薦多帶帶使用，循環(huán)逐一拷貝

對象之間的繼承有以下幾個方法：

用call和apply(不推薦多帶帶使用，定義在prototype中的屬性和方法不能繼承)

prototype模式(注意prototype需要先繼承后定義)

傳統(tǒng)prototype模式(推薦，關(guān)鍵點是Child.prototype = new Parent.prototype以及重新改變Child.prototype.constructor)

利用空對象間接繼承(只繼承prototype中的屬性，關(guān)鍵點在于利用一個空的構(gòu)造函數(shù)當(dāng)中介)

拷貝繼承(不推薦多帶帶使用，for循環(huán)逐一拷貝)

以上推薦使用傳統(tǒng)prototype模式以及call和apply與拷貝繼承相配合的模式

用call和apply

function Chinese() {
    this.nationality = "Chinese";
}
function Person(name, age) {
    Chinese.apply(this); //這里改變了Chinese中this的指向
    this.name = name;
    this.age = age;
}
var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese

傳統(tǒng)prototype模式

function Chinese() {
    this.nationality = "Chinese";
}
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype = new Chinese(); //這里因為在prototype中使用了new，則會指向Chinese
console.log(Person.prototype.constructor); //Chinese(){}
Person.prototype.constructor = Person; //這里需要把constructor構(gòu)造函數(shù)重新改為Person
console.log(Person.prototype.constructor); //Person(){}
var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese

需要注意的是：在繼承中，如果替換了prototype，那么新的prototype必須修改constructor屬性，將這個屬性指回到原來的構(gòu)造函數(shù)。

利用空對象間接繼承

function Chinese() {}
Chinese.prototype.nationality = "Chinese";

function Person(name, age) {
    this.name = name;
    this.age = age;
}

function F(){}; //空對象幾乎不占用內(nèi)存
F.prototype = Chinese.prototype;
Person.prototype = new F();
Person.prototype.constructor = Person;

Person.prototype.sayName = function() { //Person的prototype中的方法和屬性需要在繼承之后定義
    console.log(this.name);
};

var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese
p1.sayName(); //Oli

可以將該方法定義為函數(shù)：

function extend(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype; //用于訪問父對象的prototype，可用可不用
}

舉例：

function extend(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}

function Chinese() {}
Chinese.prototype.nationality = "Chinese";

function Person(name, age) {
    this.name = name;
    this.age = age;
}

extend(Person, Chinese);

Person.prototype.sayName = function() {
    console.log(this.name);
};

var p1 = new Person("Oli", 18);
console.log(p1.nationality); //Chinese
p1.sayName(); //Oli

拷貝繼承

使用下面的函數(shù)逐一將prototype的屬性和函數(shù)拷貝到對象中：

function extend(Child, Parent) {　　　　
    var p = Parent.prototype;　　　　
    var c = Child.prototype;　　　　
    for (var i in p) {　　　　　　
        c[i] = p[i];　　　　　　
    }　　　　
    c.uber = p;　　
}

不需要先繼承后定義

傳統(tǒng)prototype模式繼承（例子）

function Parent() {
    this.name = "thisIsName";
}
Parent.prototype.sayName = function() {
    return this.name;
};

function Child() {
    this.age = "thisIsAge";
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
    return this.age;
};

var c = new Child();
console.log(c.name);
console.log(c.age);
console.log(c.sayName());
console.log(c.sayAge());

call和apply與拷貝繼承相配合（例子）

function extend(C, P) {
    var p = P.prototype;
    var c = C.prototype;
    for(var i in p){
        c[i] = p[i];
    }
    c.uber = p;
}

function Parent() {
    this.name = "thisIsName";
}
Parent.prototype.sayName = function() {
    return this.name;
};

function Child() {
    Parent.apply(this); //繼承構(gòu)造函數(shù)內(nèi)的屬性和方法
    this.age = "thisIsAge";
}

Child.prototype.sayAge = function() {
    return this.age;
};

extend(Child, Parent); //不需要先繼承后定義

var c = new Child();
console.log(c.name);
console.log(c.age);
console.log(c.sayName());
console.log(c.sayAge());