(Super classic) Summary of object inheritance methods in JavaScript

This article brings you a summary of the (super classic) object inheritance method in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Prototype chain inheritance

Key points: Use prototypes to let one reference type inherit the properties and methods of another reference type. The relationship between constructors, prototypes, and instances: Each constructor has a prototype object, the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};

function SubType(){
  this.subproperty = false;
}
// 继承自SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
  return this.subproperty;
};

var example = new SubType();
alert(example.getSuperValue());//true

Using prototypes to create objects will cause the problem that multiple instances' operations on reference types will be tampered with. This problem also exists above, as follows:

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){}//即使没有写，也不会影响结果

SubType.prototype = new SuperType();

var example1 = new SubType();
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"

var example2 = new SubType(); 
alert(example.colors); //"red,blue,green,black"

Two instance objects example1 and example2 The colors properties point to the same property, changing one will affect the other instance.

Disadvantages:
①The reference type attributes of multiple instances inherited by the prototype chain point to the same point. If one instance modifies the prototype attribute, the prototype attribute of the other instance will also be modified;
②Parameters cannot be passed ;
③Single inheritance.

2. Borrowing constructor inheritance

Key points: Use .call() and .apply() to introduce the parent class constructor into the child class function, and use the parent class’s Constructor to enhance the subclass instance, which is equivalent to copying the instance of the parent class to the subclass.

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

function SubType(name, age){
  // 继承自SuperType
  SuperType.call(this, name);  
  this.age = age;
}

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors);//"red,blue,green,black"

var example2 = new SubType();
alert(example2.colors);//"red,blue,green"

alert(example1.name); // "Mike"
alert(example1.age); // 23

The key point of borrowing constructor inheritance is that SuperType.call(this, name) calls the SuperType constructor. In this way, each instance of SubType will copy the properties in SuperType. One serving.

Disadvantages:
①Only the instance properties and methods of the parent class can be inherited, and prototype properties/methods cannot be inherited;
②The reuse of constructors cannot be realized, and each subclass has a parent class instance. Copies of functions affect performance and the code will be bloated.

3. Combined inheritance

Key points: Prototype chain inheritance and Constructor inheritanceThe advantages of these two modes Combined together, by calling the parent class constructor, inheriting the properties of the parent class and retaining the passed parameters, and then using the parent class instance as the prototype of the subclass to achieve function reuse.

The idea behind it is Using the prototype chain to realize the inheritance of prototype properties and methods, and Borrowing the constructor to realize the inheritance of instance properties, so, It not only realizes function reuse by defining methods on the prototype, but also ensures that each instance has its own attributes.

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;
}

// 继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"
example1.sayName(); //"Mike";
example1.sayAge(); //23

var example2 = new SubType("Jack", 22);
alert(example2.colors); //"red,blue,green"
example2.sayName(); //"Jack";
example2.sayAge(); //22

Defects:
Instance attributes and methods in the parent class exist both in the instance of the subclass and in the prototype of the subclass, but they only occupy memory. Therefore, when using the subclass to create When instantiating an object, there will be two copies of the same properties/methods in its prototype. -------This method is the most commonly used inheritance pattern in JavaScript.

4. Prototypal inheritance

Key point: wrap an object with a function, and then return the call of this function. This function becomes a function that can add attributes at will. instance or object. This is the principle of object.create(), which directly assigns an object to the prototype of the constructor.

function object(obj){
  function O(){}
  O.prototype = obj;
  return new O();
}

object() performs a shallow copy of the object passed in, pointing the prototype of O directly to the passed object.

var person = {
  name: "Mike",
  friends: ["Jack", "Tom", "Joes"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Peter");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("BoBo");

alert(person.friends);   //"Jack,Tom,Joes,Peter,BoBo"

ECMAScript5 standardizes prototypal inheritance through the new Object.create() method, which receives two parameters: an object used as the prototype of the new object and an object used as the new object to define additional properties.

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

Disadvantages:
①The prototype chain inherits the reference type attributes of multiple instances to the same point (all instances will inherit the attributes on the prototype), and there is the possibility of tampering;
②Unable to pass parameters, cannot Achieve reuse. (New instance attributes are added later).

5. Parasitic inheritance

Key point: Create a function that is only used to encapsulate the inheritance process. This function enhances the object in some way internally and finally returns Constructor. (It's like putting a shell around prototypal inheritance and then returning it)

function createAnother(original){ 
  varclone=object(original); // 过调用函数创建一个新对象
  clone.sayHi = function(){ // 以某种方式增强这个对象
    alert("hi");
  };
  return clone; // 返回对象
}

The main function of the function is to add attributes and methods to the constructor to enhance the function.

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

Disadvantages:
① The reference type attributes of multiple instances inherited by the prototype chain point to the same point, and there is the possibility of tampering;
② Parameters cannot be passed, the prototype is not used, and cannot be reused.

6. Parasitic combined inheritance

Key points: inherit attributes by borrowing constructors to pass parameters and parasitic mode, and inherit methods through the hybrid form of the prototype chain. Use apply or call to introduce another constructor in the function, and parameters can be passed.

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //Object.create创建对象
  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);
}

var example1 = new SubType("abc", 21);
var example2 = new SubType("def", 22);

example1.colors.push("pink"); // ["red", "blue", "green", "pink"]
example1.colors.push("black"); // ["red", "blue", "green", "black"]

Parasitic combination inheritance combines the advantages of the previous inheritance methods and avoids almost all the shortcomings of the above inheritance methods. It has the highest execution efficiency and the widest application range.

Disadvantages:
The implementation process is relatively cumbersome.

Why do we need to learn these inheritance methods? Why do we have to go through so much trouble when we can directly inherit? Mainly to learn their ideas and lay a better foundation, which will be of great benefit for reading the source code of the framework in the future, or encapsulating components or even frameworks yourself.

The time is a bit rushed, and the ES6 extensions are not added.

related suggestion:

JavaScript object-oriented inheritance method

Three ways to implement inheritance in JavaScript_js object-oriented

The above is the detailed content of (Super classic) Summary of object inheritance methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!