SoFunction
Updated on 2025-03-01

Understand N patterns of js object inheritance

This article shares N modes of js object inheritance for your reference.

1. Prototype chain inheritance

function Person(){};

 = {
  constructor: Person,
  name: "Oliver"
};
    
function People(){};

 = new Person();
 = People;
 = function(){
  return ;
};

var ins = new People();

(());

2. Borrow constructor (forgetting objects, classical inheritance)

1. No parameters

function SuperType(){
   = ["red","yellow","white"];
}
function SubType(){
  (this);
}

var instance1 = new SubType();
var instance2 = new SubType();

();
(); //["red", "yellow"]
(); //["red", "yellow", "white"]

2. There are parameters

function SuperType(name){
   = name;
   = [21,32,14,1];
}
function SubType(name,age){
  (this,name);
   = age;
}

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);

();

( +  + ); //Oliver1821,32,14,1
( +  + ); //Troy2421,32,14

3. Combination inheritance (pseudo-classic inheritance)

1. No parameters

function SuperType(){
   = ["red","yellow","white"];
}
 = function(){
  return ;
};

function SubType(){
  (this);
   = 321;
}
 = new SuperType();
 = SubType;
 = function(){
  return ;
};

var instance1 = new SubType();
var instance2 = new SubType();

();
( + ); //red,yellow,white321
( + ); //red,yellow321

2. There are parameters

function SuperType(name){
   = name;
   = [32,1342,11,1];
}
 = function(){
  return ;
};

function SubType(name,age){
  (this,name);
   = age;
}
 = new SuperType();
 = SubType;
 = function(){
  return ;
};

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);

();
(() + () + ); //Oliver1832,1342,11,1
(() + () + ); //Troy2432,1342,11

3. Parasitic combination inheritance (the most ideal paradigm for reference types)

function inheritPrototype(subType,superType){
  var prototype = Object();
   = subType;
   = prototype;
}

function SuperType(name){
   = name;
   = [321,321,43];
}
 = function(){
  return ;
};

function SubType(name,age){
  (this,name);
   = age;
}
inheritPrototype(SubType,SuperType);
 = function(){
  return ;
};

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);
();

(() + () + ); //Oliver18321,321,43
(() + () + ); //Troy24321,321

Or you can write the inheritPrototype function as follows:

function inheritPrototype(SubType,SuperType){
   = new SuperType();
   = SubType;
}

4. Prototype inheritance (used to share reference type values, similar to parasitic)

1. Traditional version (first define the object() function, then inherit)

function object(o){
  function F(){};
   = o;
  return new F();
}

var SuperType = {
  name: "Oliver",
  number: [321,321,4532,1]
};

var SubType1 = object(SuperType);
var SubType2 = object(SuperType);

 = "Troy";
();

 = "Alice";
();

( +  +  +  +  + ); //TroyAlice321,321321,321Oliver321,321

ECMAScript version 5 (use directly () and then inherit)

var SuperType = {
  name: "Oliver",
  number: [321,321,4532,1]
};

var SubType1 = (SuperType); //Definition object() function is omittedvar SubType2 = (SuperType);

 = "Troy";
();

 = "Alice";
();

( +  +  +  +  + ); //TroyAlice321,321321,321Oliver321,321

ECMAScript 5 abbreviation version (define the second parameter of(), and then inherit it)

var SuperType = {
  name: "Oliver",
  number: [321,321,4532,1]
};

var SubType1 = (SuperType,{
  name: {
    value : "Troy"
  }
});
var SubType2 = (SuperType,{
  name: {
    value : "Alice"
  }
});

();
();

( +  +  +  +  + ); //TroyAlice321,321321,321Oliver321,321

Parasitic inheritance (used to share reference type values, similar to prototypes)

function createAnother(original){
  var clone = Object(original);
   = function(){
    return "Hi";
  };
  return clone;
}

var person = {
  name: "Oliver",
  number: [13,21,31,1]
};

var anotherPerson = createAnother(person);
();

(() + ); //Hi13,21,31
(); //13,21,31

The above is all about this article, I hope it will be helpful to everyone's learning.