Analysis of 5 ways to implement object-oriented inheritance by JS

This article describes five ways JS implements object-oriented inheritance. Share it for your reference, as follows:

js is a flexible language, and there are often multiple ways to implement a function. ECMAScript does not have a clear inheritance mechanism, but is implemented through imitation. According to the characteristics of the js language itself, js can be inherited in the following general ways.

1. Use object impersonation to achieve inheritance(This way of implementationMultiple inheritance can be achieved)

Implementation principle:Let the constructor of the parent class become a method of the subclass, and then call the method of the subclass to assign values ​​to all attributes and methods through this keyword

function Parent(firstname)
{
  =firstname;
  =40;
  =function()
  {
    ();
  }
}
function Child(firstname)
{
  =Parent;
  (firstname);
  delete ;
  =function()
  {
    ();
    ();
  }
}
var mychild=new Child("plum");
();

2. Use call method to change the function context to achieve inheritance(This methodThe prototype chain cannot be inherited. If you want to inherit the prototype chain, you will use the 5-mixed mode.)

Implementation principle:Change the function context inside the functionthis, make it point to the specific object passed to the function

function Parent(firstname)
{
  =firstname;
  =40;
  =function()
  {
    ();
  }
}
function Child(firstname)
{
  =function()
  {
    ();
    ();
  }
  =function()
  {
    return firstname;
  }
}
var child=new Child("open");
(child,());
();

3. Use Apply method to change the function context to achieve inheritance(This methodThe prototype chain cannot be inherited. If you want to inherit the prototype chain, you will use the 5-mixed mode.)

Implementation principle:Change the function context inside the functionthis, make it point to the specific object passed to the function

function Parent(firstname)
{
  =firstname;
  =40;
  =function()
  {
    ();
  }
}
function Child(firstname)
{
  =function()
  {
    ();
    ();
  }
  =function()
  {
    return firstname;
  }
}
var child=new Child("open");
(child,[()]);
();

4. Use prototype chain to achieve inheritance

Implementation principle:Make the child class prototype object point to the instance of the parent class to achieve inheritance, that is, rewrite the prototype of the class. The disadvantage is that it cannot directly implement multiple inheritance.

function Parent()
{
  =function()
  {
    ();
  }
}
function Child(firstname)
{
  =firstname;
  =40;
  =function()
  {
    ();
    ();
  }
}
=new Parent();
var child=new Child("open");
();

5. Use hybrid mode to achieve inheritance

function Parent()
{
  =function()
  {
    ();
  }
}
=function()
{
  alert("this is parentmethod!!!");
}
function Child(firstname)
{
  (this);
  =firstname;
  =40;
  =function()
  {
    ();
    ();
  }
}
=new Parent();
var child=new Child("open");
();
();

For more information about JavaScript, readers who are interested in reading this site's special topic:JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.