JS-prototype and prototype chain, object-oriented
1 knowledge points
1.2.1 Class and instance
- Class declaration
1）ES5
Function Animal( ) {
this.name = 'name';
}
2）ES6中class的声明
class Animal2( ) {
constructor( ) {
this.name = 'name';
}
}
- Generate instance
1）new Animal( );
2）new Animal2( );
1.2.2 Classes and inheritance
How many ways are there for inheritance? What are the advantages and disadvantages of each?
- ① With the help of the constructor method (call, apply)
function Child() {Parent.call(this)}
function Parent1( ) {
this.name = 'name1';
};
Parent1.prototype.say = function( ){
};
function Child1( ) {
Parent1.call(this);
this.type = 'child1';
};
console.log(new Child1( ).say( )); //undefined
Advantages: simple;
disadvantages: the this of the call callback points to the content in the parent function, and does not point to the prototype of the parent element.
- ② With the help of the prototype chain
Child.prototype = new Parent()
function Parent2( ) {
this.name = 'name2';
this.play = [1,2,3];
};
function Child2( ) {
this.type = 'child2';
};
Child2.prototype = new Parent2( );
var s1 = new Child2( );
var s2 = new Child2( );
s1.play.push(4);
console.log(s1.play; s2.play) // [1,2,3,4], [1,2,3,4]
Advantages: Solve the situation of local inheritance and point to the prototype of the parent function;
Disadvantages: The prototype of the instance of the new subclass is shared;
- ③ Combination (constructor + prototype chain)
function Child() {Parent.call(this)}
Child.prototype = new Parent()
function Parent3( ) {
this.name = 'name3';
this.play = [1,2,3];
};
function Child3( ) {
Parent3.call(this);
this.type = 'child3';
};
Child3.prototype = new Parent3( );
var s3 = new Child3( );
var s4 = new Child3( );
s3.play.push(4);
console.log(s3.play; s4.play) // [1,2,3,4], [1,2,3]
Advantages: Solve the problem of partial inheritance of the constructor method and the sharing of prototypes with the prototype chain method of the new instance;
Disadvantages: each new instance will call the parent function repeatedly;
- ④ Optimization 1 (prototype inheritance)
function Child() {Parent.call(this)}
Child.prototype = Parent.prototype
function Parent4( ) {
this.name = 'name4';
};
function Child4( ) {
Parent4.call(this);
this.type = 'child4';
};
Child4.prototype = Parent4.prototype;
var s5 = new Child4( );
console.log(s5 instanceof Child4) // true
console.log(s5.constructor) // Parent4
Advantages: directly assign the prototype of the parent function to the prototype of the child function, each new instance does not need to execute the parent function repeatedly;
Disadvantage: the constructor of the child function instance points to the parent function
- ⑤ 优化2（寄生组合式）
function Child() { Parent.call(this) }
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
function Parent5( ) {
this.name = 'name5';
};
function Child5( ) {
Parent5.call(this);
this.type = 'child5';
};
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;
var s6 = new Child5( );
console.log(s6 instanceof Child5) // true
console.log(s6.constructor) // Child5
Advantages:
The new parent function prototype is assigned to the child function prototype through the Object.create method,
and the constructor of the child function prototype points to the child function itself, which
solves the problem that the constructor of the child function instance points to the parent function;
2 Q&A
Topic:
*What are the ways of inheritance? What are the advantages and disadvantages?
