At the end of 9021, suddenly want to prepare in this last month, try the opportunity, whether further. So began to prepare some basic knowledge, but also with a summary of the students want to change jobs. I hope you can find the job you want. Good luck!
First, what is inheritance
A class gets properties or methods of one or more classes. Inheritance allows a child class to have various methods and properties of its parent class. Avoid repeating a lot of code.
Second, the principle of inheritance
Copy the methods and properties of the parent class to override the prototype object of the child class.
Three, prototype chain inheritance
3.1 implementation
function Father() {
this.text = '1';
}
Father.prototype.someFn = function() {
console.log(1);
}
Father.prototype.someValue = '2';
function Son(){
this.text1 = 'text1'; } // Prototype = new Father(); // Prototype = new Father();Copy the code3.2 the advantages
1, simple and easy operation.
3.3 disadvantages
Properties declared by the parent class using this are shared by all instances. The reason for this is that instantiation is a one-time assignment of the parent class to the stereotype of the subclass instance. It will assign the properties declared by the parent class through this to the stereotype of the subclass as well. For example, if an array value in a parent class is changed in multiple instances of a subclass, any change in the array value in one instance will affect the other subclass instances.
2, when creating a subclass instance, can not pass parameters to the parent class constructor, not flexible enough.
4. Borrowing constructor (call)
4.1 implementation
functionFather(... arr) { this.some ='Parent attribute';
this.params = arr;
}
Father.prototype.someFn = function() {
console.log(1);
}
Father.prototype.someValue = '2';
functionSon(fatherParams, ... SonParams) {// this for Father points to this for Son // call the parent class, Father is immediately executed, and this for Father is executed for Son //. Instantiate the subclass, this will point to the new object created during new, and return that new object. Father.call(this, ... fatherParams); this.text ='Subclass properties'; this.sonParams = sonParams; } var fatherParams = []; var sonParams = []; var sonInstance = new Son(fatherParams, ... sonParams);Copy the code4.2 the advantages
1. You can pass arguments to the parent class.
2, resolve the problem that properties declared by the parent class this will be shared by instances.
4.3 disadvantages
1. Only properties/methods declared by the parent class via this can be inherited. It is not possible to inherit properties/methods from parent prototype.
2. The superclass method cannot be reused. Each time a subclass is instantiated, the superclass function is executed. Re-declare a method defined by a parent class, not reusable.
5. Combination inheritance (Call +new)
How it works: Properties and methods on this and prototype are inherited through the prototype chain. Use the borrow constructor to inherit the properties and methods declared by the parent class through this on the instance properties of the subclass.
5.1 implementation
functionFather(... arr) { this.some ='Parent attribute';
this.params = arr;
}
Father.prototype.someFn = function() {
console.log(1);
}
Father.prototype.someValue = '2';
functionSon(fatherParams, ... SonParams) {// The constructor inherits the properties and methods of the parent class this to the instance properties of the subclass father.call (this,... fatherParams); this.text ='Subclass properties'; this.sonParams = sonParams; } // prototype = new Father(); // prototype = new Father(); // prototype = new Father();'xxxxx'); var fatherParams = []; var sonParams = []; var sonInstance = new Son(fatherParams, ... sonParams);Copy the code5.2 the advantages
1. Solve the problem that attributes or methods declared by the prototype chain inherits from the parent class this are shared.
2, Solve the problem of using constructor to solve the problem of not inheriting properties/methods on the parent Prototype object.
5.3 disadvantages
1. The parent function was called twice, causing some performance problems.
2, because the parent class is called twice, the exported parent class properties and methods declared by this are generated twice.
3. The prototype chain context is lost. The properties and methods declared by the subclass and superclass through prototype exist on the subclass prototype.
6. Inheritance of the original type
6.1 implementation
function cloneObj(obj) {
function F() {}; // Prototype f.prototype = obj; // Return the new object created during new. This object's stereotype is the inherited object, and the properties of the inherited object can be retrieved through the stereotype chain lookupreturn new F();
}
Copy the code6.2 the advantages
1, good compatibility, the simplest object inheritance.
6.3 disadvantages
1. How many instances share inherited properties that have been tampered with and cannot pass parameters.
7. Parasitic Inheritance (inheritance process encapsulation)
Create a function that only encapsulates the inheritance process. The function internally enhances the object in some way, and finally returns the object. The object is enhanced on the basis of the original type inheritance.
7.1 implementation
function createAnother(original){
var clone = cloneObject(original); // Inheriting an object returns a new function //doSomething enhances the object clone. Some = in some wayfunction() {}; // Clone. Obkoro1 ='Encapsulate the inheritance process'; / / propertyreturn clone; // Return this object}Copy the code7.2 the advantages
1, good compatibility, the simplest object inheritance.
7.3 disadvantages
1. How many instances share inherited properties that have been tampered with and cannot pass parameters.
8. Parasitic Combinatorial Inheritance (Call + parasitic encapsulation)
Use the borrow constructor to inherit the properties and methods declared by the parent class this. 2. Use parasitic inheritance to set the parent class prototype to the subclass prototype to inherit the properties and methods of the parent class.
8.1 implementation
functionFather(... arr) { this.some ='Parent attribute';
this.params = arr;
}
Father.prototype.someFn = function() {
console.log(1);
}
Father.prototype.someValue = '2';
function Son() {
Father.call(this, 'xxxx');
this.text = '2222';
}
functionVar inhertPro(son, father){var inhertPro(son, father){var inhertPro(son, father){var inhertPro(son, father); // Set son.prototype to father.prototype son.prototype = fatherPrototype; // Constructor returns a reference to the Object constructor that created the instance Object. Here / / keep the constructor to the consistency of the son. The prototype. The constructor = son; } inhertPro(Son, Father); var sonInstance = new Son();Copy the code8.2 the advantages
1, parasitic combinatorial inheritance is the most mature inheritance method, is also the first and commonly used inheritance method, in most Js frameworks are used as inheritance scheme.
Advantages of parasitic combinatorial inheritance over combinatorial inheritance:
The superclass constructor is called only once, saving performance.
2. Avoid generating unnecessary attributes.
3. The use of prototype inheritance ensures that the context of prototype chain is unchanged. The prototype of a subclass has only the properties and methods declared by the subclass through prototype, and the prototype of a superclass has only the properties and methods declared by the superclass through prototype.
ES6-extends inheritance
9.1 implementation
ES6 can use the extends keyword to implement inheritance, which is much cleaner and more methodistic than ES5’s modified prototype chain.
class Point{}
class ColorPoint extends Point{}
Copy the code9.2 pay attention to
The subclass must substitute super method in constructor method, otherwise new instance will report an error, this is because the subclass’s this object must first complete plasticity through the constructor of the superclass, get the properties and methods of the superclass, and then process it, plus the properties and methods of the subclass itself. If the super method is not called, the subclass will not get this object. If no constructor method is defined, this method will be added by default.
9.3 conversion
The principle of ES6 inheritance is the same as parasitic combinatorial inheritance. The advantages and disadvantages are similar.
Replace ES6 code with ES5 www.babeljs.cn/repl
Before conversion:
class Point{}
class ColorPoint extends Point{}
Copy the codeAfter the transformation:
function _inherits(subClass, superClass) {
if(typeof superClass ! = ="function"&& superClass ! == null) { throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass, writable: true, configurable: true}});if (superClass) _setPrototypeOf(subClass, superClass);
}
Copy the code9.4 the difference between
The essence of INHERITANCE in ES5 is to create a subclass instance object called this, and then add methods from the parent class to this.
The inheritance essence of ES6 is to add the methods and properties of the superclass instance object to this, and then modify this using the constructor of the subclass.
reference
- JS foundation – simple inheritance
- JavaScript advanced programming