Understand N models of js Object Inheritance, and js Object Inheritance

Understand N models of js Object Inheritance, and js Object Inheritance

This article shares N models of js Object Inheritance for your reference.

1. prototype chain inheritance

function Person(){};Person.prototype = {  constructor: Person,  name: "Oliver"};    function People(){};People.prototype = new Person();People.prototype.constructor = People;People.prototype.sayName = function(){  return this.name;};var ins = new People();console.log(ins.sayName());

Ii. Borrow Constructors (forged objects, classic inheritance)

1. No Parameters

function SuperType(){  this.color = ["red","yellow","white"];}function SubType(){  SuperType.call(this);}var instance1 = new SubType();var instance2 = new SubType();instance1.color.pop();console.log(instance1.color); //["red", "yellow"]console.log(instance2.color); //["red", "yellow", "white"]

2. Parameters

function SuperType(name){  this.name = name;  this.number = [21,32,14,1];}function SubType(name,age){  SuperType.call(this,name);  this.age = age;}var instance1 = new SubType("Oliver",18);var instance2 = new SubType("Troy",24);instance2.number.pop();console.log(instance1.name + instance1.age + instance1.number); //Oliver1821,32,14,1console.log(instance2.name + instance2.age + instance2.number); //Troy2421,32,14

Iii. Combination inheritance (pseudo-classic inheritance)

1. No Parameters

function SuperType(){  this.color = ["red","yellow","white"];}SuperType.prototype.sayColor = function(){  return this.color;};function SubType(){  SuperType.call(this);  this.number = 321;}SubType.prototype = new SuperType();SubType.prototype.constructor = SubType;SubType.prototype.sayNumber = function(){  return this.number;};var instance1 = new SubType();var instance2 = new SubType();instance2.color.pop();console.log(instance1.color + instance1.number); //red,yellow,white321console.log(instance2.color + instance2.number); //red,yellow321

2. Parameters

function SuperType(name){  this.name = name;  this.number = [32,1342,11,1];}SuperType.prototype.sayName = function(){  return 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(){  return this.age;};var instance1 = new SubType("Oliver",18);var instance2 = new SubType("Troy",24);instance2.number.pop();console.log(instance1.sayName() + instance1.sayAge() + instance1.number); //Oliver1832,1342,11,1console.log(instance2.sayName() + instance2.sayAge() + instance2.number); //Troy2432,1342,11

Iii. Parasitic combined inheritance (the most ideal paradigm of the reference type)

function inheritPrototype(subType,superType){  var prototype = Object(superType.prototype);  prototype.constructor = subType;  subType.prototype = prototype;}function SuperType(name){  this.name = name;  this.number = [321,321,43];}SuperType.prototype.sayName = function(){  return this.name;};function SubType(name,age){  SuperType.call(this,name);  this.age = age;}inheritPrototype(SubType,SuperType);SubType.prototype.sayAge = function(){  return this.age;};var instance1 = new SubType("Oliver",18);var instance2 = new SubType("Troy",24);instance2.number.pop();console.log(instance1.sayName() + instance1.sayAge() + instance1.number); //Oliver18321,321,43console.log(instance2.sayName() + instance2.sayAge() + instance2.number); //Troy24321,321

You can also write the inheritPrototype function as follows:

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

Iv. Original Type inheritance (used to share the value of the reference type, similar to the parasitic type)

1. Traditional edition (first defining the object () function and then inheriting)

function object(o){  function F(){};  F.prototype = o;  return new F();}var SuperType = {  name: "Oliver",  number: [321,321,4532,1]};var SubType1 = object(SuperType);var SubType2 = object(SuperType);SubType1.name = "Troy";SubType1.number.pop();SubType2.name = "Alice";SubType2.number.pop();console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321

ECMAScript version 5 (directly use Object. create () and then inherit from it)

Var SuperType = {name: "Oliver", number: [321,321,453,]}; var SubType1 = Object. create (SuperType); // omitting the Defined object () function var SubType2 = Object. create (SuperType); SubType1.name = "Troy"; SubType1.number. pop (); SubType2.name = "Alice"; SubType2.number. pop (); console. log (SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType. name + SuperType. number); // TroyAlice321, 321321,321 Oliver321, 321

ECMAScript 5 short version (defines the second parameter of Object. create (), and then inherits)

var SuperType = {  name: "Oliver",  number: [321,321,4532,1]};var SubType1 = Object.create(SuperType,{  name: {    value : "Troy"  }});var SubType2 = Object.create(SuperType,{  name: {    value : "Alice"  }});SubType1.number.pop();SubType2.number.pop();console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321

Parasitic inheritance (used to share the value of the reference type, similar to the original type)

function createAnother(original){  var clone = Object(original);  clone.sayHi = function(){    return "Hi";  };  return clone;}var person = {  name: "Oliver",  number: [13,21,31,1]};var anotherPerson = createAnother(person);anotherPerson.number.pop();console.log(anotherPerson.sayHi() + anotherPerson.number); //Hi13,21,31console.log(person.number); //13,21,31

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Javascript Object-oriented Inheritance
• Thoughts on the call mechanism caused by the call () method in JavaScript
• Typical Implementation of javaScript Object-oriented Inheritance
• Use the apply method to implement Object Inheritance in javascript
• Implementation example of Object Inheritance in Javascript
• Prototype chain inheritance instance of js Object Inheritance