To tell the truth, I just need to know before "parasitic combination inheritance" is the best, there is a code template with ancestral line. Recently because of some things, care deeply for weeks has been wanted sorted out. In this paper, the contents of the "JavaScript Advanced Programming" for the skeleton, that enriched the content of the ES6 Class, I think it is easier to understand from the perspective of narrative will inherit it out, I hope you can gain something.
Inheritance classification
JS may be inherited according to whether the object function (will be mentioned hereinafter), will inherit divided into two parts (ES5 is the Object.create new method for normalization function).
Wherein the prototype and prototype inheritance chain have the same advantages and disadvantages of formula succession, inheritance and constructors Parasitic Inheritance also correspond to each other. Based on a combination of parasitic inheritance Object.create, while optimizing the combination of inheritance, it became the perfect way of inheritance. ES6 Class Extends the result of a combination of inheritance and parasitic basically the same, but the implementation is slightly different.
Inheritance
Prototype Formula 1 Inheritance
core: the instance of the parent class as a prototype subclass
SubType.prototype = new SuperType()
// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向，否则子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;
Advantages: The method of the parent class can reuse
disadvantages:
A reference to the parent class attributes will be shared by all sub-class instance
Subclasses can not pass parameters to build the parent instance
2 constructors inherited
core: Copy the contents of the parent class constructor to constructor subclass. This is all inherit only one not related to inherit the prototype.
SuperType.call(SubType);
Advantages: full turn and prototype inheritance chain.
A reference to the parent class property will not be shared
Subclasses can pass parameters to build the parent instance
Disadvantages: The method of the parent class can not be reused, the method of sub-class instance is created every time a single.
Inheritance composition 3
Core: Prototype inherited, inherited and constructors combination, both the advantages of both
function SuperType() {
this.name = 'parent';
this.arr = [1, 2, 3];
}
SuperType.prototype.say = function() {
console.log('this is parent')
}
function SubType() {
SuperType.call(this) // 第二次调用SuperType
}
SubType.prototype = new SuperType() // 第一次调用SuperType
advantage:
The method of the parent class may be multiplexed
A reference to the parent class property will not be shared
Subclasses can pass parameters to build the parent instance
Cons:
call the parent class constructor twice, first to add a prototype of a subclass of parent class name, arr property, and the second gave the sub-class constructor add the parent class name, arr property, thereby covering the same name in the parameter sub-class prototype. This condition is caused by the waste covered by the performance.
Prototype Formula 4 Inheritance
core: a shallow copy of the object on the object parameters method essentially prototypal inheritance.
Advantages: The method of the parent class can reuse
disadvantages:
A reference to the parent class attributes will be shared by all sub-class instance
Subclasses can not pass parameters to build the parent instance
function object(o){
function F(){}
F.prototype = o;
return new F();
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
ECMAScript 5 through new Object.create () method standardized prototypal inheritance. This method takes two parameters: First
th as new object prototype objects and additional objects define a new object attribute (optional). In the case of a passed parameter, Object.create () with the
same behavior object () method. - "JAVASCript Advanced Programming"
Therefore, the above code can be converted into
var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);
5 Parasitic inheritance
core: Use prototypal inheritance as a pale copy of a target object, and then enhance the ability of light to copy.
Advantages and disadvantages: only an idea, no advantage
function createAnother(original){
var clone=object(original); //通过调用函数创建一个新对象
clone.sayHi = function(){ //以某种方式来增强这个对象
alert("hi");
};
return clone; //返回这个对象
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"
6 parasitic combination of inheritance
just said that there is a combination of inheritance will be two calls to the parent class constructor disadvantages caused by waste, parasitic combination of inheritance can solve this problem.
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); // 创建了父类原型的浅复制
prototype.constructor = subType; // 修正原型的构造函数
subType.prototype = prototype; // 将子类的原型替换为这个原型
}
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
// 核心：因为是对父类原型的复制，所以不包含父类的构造函数，也就不会调用两次父类的构造函数造成浪费
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
}
Advantages and disadvantages: It is a perfect way of inheritance.
ES6 Class extends
core: ES6 result of inheritance and succession combination of parasitic similar, in essence, ES6 Inheritance is a syntax sugar. However, a combination of parasitic inheritance is to create a subclass instance of this object before its enhanced; and the properties and methods of the parent class ES6 first instance of an object, and this added to the above (so you must call the super method), then with child constructor for the class to modify this.
class A {}
class B extends A {
constructor() {
super();
}
}
ES6 achieve specific principles of inheritance:
class A {
}
class B {
}
Object.setPrototypeOf = function (obj, proto) {
obj.__proto__ = proto;
return obj;
}
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
ES5 and ES6 similarities and differences inherit inheritance:
the same point: ES6 inherited essentially inherited ES5 syntactic sugar
differences:
Constructor prototype chain subclasses in succession ES6 point of the parent class constructor, the ES5 constructor is used to copy, no point prototype chain.
ES6 construct subclass instance, based on the parent class instance, the ES5 is not.
