Describe js inheritance in detail

In order to solve the problem that prototype properties containing reference type values ​​will be shared by all instances, the masters invented the method of calling the supertype constructor inside the subtype constructor and then through apply() and call( ) method implements inheritance by executing the constructor on the (future) newly created object, as follows

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
//调用SuperType 并且通过call()方法修正this指向  
SuperType.call(this);
 }
var instance1 = new SubType();
instance1.colors.push("black");
//"red,blue,green,black"
alert(instance1.colors);
//"red,blue,green"
var instance2 = new SubType();
alert(instance2.colors);

In the above example, the SuperType() constructor is called in SubType(). By using the call() method (or the apply() method as well), we are actually calling the SuperType constructor in the context of (and will be) a newly created SubType instance. As a result, all object initialization code defined in the SuperType() function will be executed on the new SubType object. As a result, each instance of SubType will have its own copy of the colors property (independent of each other).

The benefits of using inheritance in this way:

You can pass parameters in the subtype constructor to the supertype constructor. As follows

function SuperType(name) {
  this.name = name;
}
function SubType() {
//继承了SuperType，同时还传递了参数
SuperType.call(this, "Nicholas");    
//实例属性   
 this.age = 29;
}
var instance = new SubType();
  //"Nicholas";
alert(instance.name);
//29
alert(instance.age);

SuperType only accepts one parameter name, which will be directly assigned to an attribute. When the SuperType constructor is called inside the SubType constructor, the name attribute is actually set for the SubType instance. To ensure that the SuperType constructor does not override the properties of the subtype, you can add properties that should be defined in the subtype after calling the supertype constructor.

Disadvantages of using inheritance in this way:

1. Methods are defined in the constructor
2. Methods defined in the prototype of the super type also apply to subtypes The invisible ones are as follows

function SuperType(name) {
  this.name = name;
}
SuperType.prototype.a=function(){
    alert("aaaa");
}
function SubType() {
//继承了SuperType，同时还传递了参数
SuperType.call(this, "Nicholas");    
//实例属性
 this.age = 29;
}
var instance = new SubType();
console.log(instance);

We can see in the console that the a method of the super type cannot be obtained in the subtype prototype

2 Combination inheritance

It is an inheritance model that combines the technology of prototype chain and borrowed constructor to take full advantage of the two. The main idea is to use the prototype chain to realize the inheritance of prototype properties and methods. Inheritance of instance attributes is achieved by borrowing constructors. In this way, function reuse is achieved by defining methods on the prototype, and each instance is guaranteed to have its own attributes. Let's look at an example

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
//继承name属性    
SuperType.call(this, name);    
this.age = age;
}
//继承方法 （拼接原型链）
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black"); 
//"red,blue,green,black"
alert(instance1.colors);
//"Nicholas";
instance1.sayName();
//29
instance1.sayAge();
var instance2 = new SubType("Greg", 27);
//"red,blue,green"
alert(instance2.colors);
//"27"; 
instance2.sayAge();
//"Greg"; 
instance2.sayName();

We see the methods on the prototype of the supertype that the instance can now access
The SuperType constructor defines two Attributes: name and colors. The prototype of SuperType defines a method sayName(). The Sub-Type constructor passes in the name parameter when calling the SuperType constructor, and then defines its own attribute age. Then, the instance of SuperType is assigned to the prototype of SubType, and then the method sayAge() is defined on the new prototype. In this way, two different SubType instances can have their own attributes - including the colors attribute - and can use the same method. This method is currently the most common method used to implement inheritance in js

Disadvantages of using this inheritance method

SubType.prototype = new SuperType() will indeed create a new object associated with SubType.prototype. But it uses the "constructor call" of SubType(..). If the function SubType has some side effects (such as writing logs, modifying status, registering with other objects, adding data attributes to this, etc.), it will be affected. "Descendants" of SubType().

Improvement method

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
  //继承name属性    
  SuperType.call(this, name);    
  this.age = age;
}
//使用Object.create 生成对象来代替new SuperType()生成的对象

SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
console.log(instance1 )；

This can avoid the impact on SubType descendants
Note

// ES6之前需要抛弃默认的SubType.prototype
SubType.ptototype = Object.create( SuperType.prototype );
// ES6开始可以直接修改现有的
SubType.prototypeObject.setPrototypeOf( SubType.prototype, SuperType.prototype );

Related recommendations:

js inheritance Base class source code analysis_js object-oriented

JavaScript advanced programming reading notes (14) Implementation of js inheritance mechanism_javascript skills

JS inheritance--prototype chain inheritance and class inheritance_basic knowledge

##

The above is the detailed content of Describe js inheritance in detail. For more information, please follow other related articles on the PHP Chinese website!