Understanding N modes inherited by js objects-javascript skills

This article provides examples of several methods of js object inheritance. the content is comprehensive. interested partners can refer to this article to share N methods 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.