Article Directory
JavaScript inheritance history
01 Prototype chain (traditional model)
If the prototype chain do not understand, please refer to the definition and use of the prototype and the prototype chain .
Code interpretation
//实例
Father.prototype.lastName = 'wang';
function Father() {
this.name = "dad";
}
var father = new Father();
Son.prototype = father;
function Son() {
}
var son = new Son();
Advantages : The methods and properties of the parent class are reused, and modifying the properties does not affect the parent classes.
Disadvantages : Too many inherited useless properties.
02 borrow constructor
The idea of borrowing the constructor is to call the constructor of the parent class inside the constructor of the subclass, and use the apply() and call() methods to change the execution context of the object.
Code interpretation
//实例
function Person(name, age) {
this.name = name;
this.age = age;
}
function Student(name, age, grade) {
Person.call(this, name, age);
this.grade = grade;
}
var stu = new Student();
Advantages : Solve the problems caused by the inclusion of reference type values in the prototype, and can also pass parameters. And each instance of the subclass has its own attributes and will not affect each other.
Disadvantages : The prototype of the borrowed constructor cannot be inherited, and an extra function must be used each time the constructor.
03 Shared prototype
The method adopted
Son.prototype = Father.prototype;allows the prototypes of son and father to point to the same space, that is, no matter which one of them is changed, the other will also change.
Code interpretation
Father.prototype.lastName = 'wang'
function Father() {
}
function Son() {
}
Son.prototype = Father.prototype;
// son和father的原型都指向同一个空间，即不管改变两者之中的哪一个，另一个也会跟着改变
//实例如下：
var son = new Son();
var father = new Father();
Advantages : simple usage.
Disadvantages : You can't change your prototype casually.
04 Holy Grail Mode (important!)
Improve on the basis of the shared prototype, encapsulate an inherit function, and define a function F in it to act as the function of the middle layer, let F and the prototype of the parent class point to the same address, and let the prototype of the subclass point to this F Object to achieve inheritance. (Due to the existence of the intermediate layer F, the prototype of the parent class is not affected from beginning to end)
Code interpretation
圣杯模式写法1：
function inherit(target, origin) {
function F() {
};
F.prototype = origin.prototype;
target.prototype = new F();
target.prototype.constructor = target;
// 让子类的constructor重新指向自己，若不修改则会发现constructor指向的是父类的构造函数
target.prototype.uber = origin.prototype;
// “uber”即超类，超级父级（这个属性可以查询究竟继承的谁）
// “uber”是某些人在模拟class时用来表示super的（因为super是关键字所以不能直接用）。
}
//实例如下：
Father.prototype.lastName = 'wang'
function Father() {
}
function Son() {
}
inherit(Son, Father);
var son = new Son();
var father = new Father();
圣杯模式写法2：
var inherit = (function () {
// 采用闭包方式实现封装和属性私有化
var F = function () {
};
return function (Target, Origin) {
F.prototype = Origin.prototype;
Target.prototype = new F();
Target.prototype.constructor = Target;
// 让子类的constructor重新指向自己，若不修改则会发现constructor指向的是父类的构造函数
Target.prototype.uber = Origin.prototype;
// “uber”即超类，超级父级（这个属性可以查询究竟继承的谁）
// “uber”是某些人在模拟class时用来表示super的（因为super是关键字所以不能直接用）。
}
}());
//实例如下：
Father.prototype.lastName = 'wang'
function Father() {
}
function Son() {
}
inherit(Son, Father);
var son = new Son();
var father = new Father();
Advantages : An object is generated in the middle, which plays a role of isolation. It can have the attributes and methods of the parents, and when you change yourself, it will not affect the attributes of the parents.
Personal notes, everyone is welcome to exchange and discuss!