继承的实现方式

通过一些基础的构造方法来构造一个具有独立属性与方法的构造函数

通过原型链继承

Grand.prototype.surname = "wang";
function Grand() {
    this.name = 'grand';
    this.hobby = 'drink';
}
var grand = new Grand();

Father.prototype = grand;
function Father() {
    this.name = 'father';
    this.skill = "baskball";
}
var father = new Father();

Son.prototype = father;
function Son() {
    this.name = 'son';
}
var child = new Son();
console.log('child:' , child.name, child.surname, child.skill, child.hobby);
// child: son wang baskball drink

解析:

• 1. 原型属性会被所有实例共享，导致对一个实例的修改会影响另一个实例。

通过Call/Apply来借用构造函数的方法

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

function Student(name, age, sex, skill, grade) {
    Person.call(this, name, age, sex);
    this.skill = skill;
    this.grade = grade;
}
var student = new Student('wangfpp', 20, 'male', 'coding', 2019);
console.log(student)
console.log(student.__proto__.constructor)
//Student {name: "wangfpp", age: 20, sex: "male", skill: "coding", grade: 2019}
/*ƒ Student(name, age, sex, skill, grade) {
    Person.call(this, name, age, sex);
    this.skill = skill;
    this.grade = grade;
}
*/

解析：

• 1. 不能继承借用构造函数的原型
• 2. 每次构造都多调用了一次构造函数 －－－ 第八行

共享原型及圣杯模式

Teacher.prototype = {
    school: 'my school'
}
function Teacher() {} 
function Student() {}
Student.prototype = Teacher.prototype
var student = new Student()
console.log(student);

此种模式再加以修饰

Teacher.prototype.school = 'my school';
function Teacher() {} 
function Student() {}

var student = new Student()

var inherit  = (function() {
    var F = function() {}
    return function(Target, Origin) {
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.prototype.constructor = Target;
        Target.prototype.uber = Origin.prototype;
    }
}())
inherit(Student, Teacher);
var student = new Student();
console.log(student, student.school);
console.log(student.__proto__)
/*
Student {}
 "my school"
index.html:80 
Teacher {uber: {…}, constructor: ƒ}
constructor: ƒ Student()
uber: {school: "my school", constructor: ƒ}
__proto__: Object
*/

解析:

• 1. 通过一个中间函数把原型委托到中间函数上
• 2. 把中间函数作为一个私有变量封存起来
• 3. 原型之间既不会相互影响又可以找到器原始构造函数

 我的公众号