1, Prototype chain inheritance
What I know is the most important about the prototype chain:
Subclass constructor. prototype = instance of parent class;
Subclass constructor. prototype.constructor = subclass constructor
characteristic:
1.js inheritance is to put the prototype of the parent class on the prototype chain of the child class. The instance wants to call these methods based on__ proto__ The mechanism of prototype chain search is completed
2. Subclasses can override properties and methods on the parent class
3. Private or public attributes and methods in the parent class will eventually become public attributes and methods in the child class
//Parent class
function A(x) {
this.x = x
}
A.prototype.getX = function () {
console.log(this.x);
}
//Subclass
function B(y) {
this.y = y
};
B.prototype = new A(100);//{x:100} ==> __proto__.getX =fn
B.prototype.constructor = B
B.prototype.getY = function () {
console.log(this.y);
}
let b = new B(200);
b.x //==> undefined
b.getX(); //==> b.getX is not a function
console.log(a);//{x:100} ==> __proto__.getX =fn
console.log(b);//{y:200} ==> __proto__.getY =fn2, Borrowing constructor inheritance (actually using call method inheritance)
In the subclass constructor, execute the parent constructor as an ordinary function, and replace this in the parent constructor with the subclass instance (this) through the call method, which is equivalent to setting private properties and methods for the subclass instance
(that is, in the constructor of the subclass, the this point of the parent class is modified to the subclass, which has nothing to do with the prototype chain on the parent class itself)
characteristic:
1. Only the private attributes and methods of the parent class can be inherited, and the common attributes of the parent class are not inherited (because the constructor of the parent class is only executed once as an ordinary function, which has nothing to do with the methods and attributes on the prototype of the parent class)
2. The private properties and methods of the parent class will become the private properties and methods of the child class
//Parent class
function A(x) {
this.x = x;
this.seyHello = function (){
console.log("hello world");
}
}
A.prototype.getX = function () {
console.log(this.x);
}
let a = new A(100);
// A(100);//this => window
//Subclass
function B(y,x) {
this.y = y; //this ==> b
// A(100);//this => window
A.call(this, x);//this => b
// this.x = x
}
B.prototype.getY = function () {
console.log(this.y);
}
let b = new B(200, 100);
console.log(b)
// b = {y:200, x:100}3, Composite inheritance (borrowing prototype chain and call method)
characteristic:
(call inheritance)
1. Subclass instances can use properties and methods private to the parent class
2. The private properties and methods of the parent class will become the private properties and methods of the child class instance
(prototype chain inheritance)
3. Subclass instances can access and use the attributes and parties public to the parent class through the prototype chain
4. There will be redundant private attributes and methods of the parent class on the prototype chain of the child class
//Parent class
function A(x) {
this.x = x;
this.seyHello = function () {
console.log("hello world");
}
}
A.prototype.getX = function () {
console.log(this.x);
}
//Subclass
function B(y, x) {
this.y = y;
A.call(this, x);
}
B.prototype = new A();
B.prototype.constructor = B;
B.prototype.getY = function () {
console.log(this.y);
}
let b = new B(200, 100);
console.log(b);4, Parasitic combinatorial inheritance
The important thing about this method is
//B.prototype = Object.create(A.prototype)
//B.prototype.constructor = B;
Combine the methods of prototype chain inheritance and call inheritance, create an object at the same time, and let the prototype of the object point to the prototype of the parent constructor to realize parasitic composite inheritance
characteristic:
1. The most perfect js inheritance solution
2. The private attributes and methods of the parent class become the private attributes and methods of the child class instance
3. The public attributes and methods of the parent class become the public attributes and methods of the child class instance
//Parent class
function A(x) {
this.x = x;
this.seyHello = function () {
console.log("hello world");
}
}
A.prototype.getX = function () {
console.log(this.x);
}
//Subclass
function B(y, x) {
this.y = y;
A.call(this, x);
}
* let obj = {};
obj.__proto__ = A.prototype
//Because IE browser does not support users to directly use or modify in js__ proto__
B.prototype = obj*/
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
B.prototype.getY = function () {
console.log(this.y);
}
let b = new B(200, 100);
console.log(b);5, In ES6
We need to know about the subclass of ES6
Prototype chain inheritance through extensions
If the constructor is not written, no error will be reported, and the inheritance will be implemented normally
If we don't write the constructor, the browser will automatically help us create some code
If the constructor is written in the form of inheritance, you need to use super to inherit the private properties and methods of the parent class,
Otherwise, an error will be reported
//Parent class
class A{
constructor(x) {//Private properties and methods
this.x = x
this.seyHello = function (){
}
}
//Private properties
aa = 123;
//public Method
getX() {
console.log(this.x);
}
}
//Public attribute
A.prototype.aa = 456;
class B extends A{
//Prototype chain inheritance through extensions
//If the constructor is not written, no error will be reported, and the inheritance will be implemented normally
//If we don't write the constructor, the browser will automatically help us create some code
// constructor(...arg){
// super(...arg)
// }
/*constructor(y) {
//The error is Must call super constructor in derived class before accessing 'this' or returning from derived constructor
super(100); // call Inheritance (borrowing constructor inheritance)
this.y = y;
}*/
getY = function () {
console.log(this.y);
}
}
let b = new B(200);
console.log(b)