This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

2. Inherit from constructors

Basic idea: Call a supertype constructor inside a subtype constructor (you can pass arguments to a superclass in a subclass constructor)

function SuperType() {
  this.colors = ["red"."blue"."green"];
}
function SubType() {
  // SuperType is inherited
  SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.colors); //"red,blue,green"
Copy the code
function SuperType(name) {
  this.name = name;
}
function SubType() {
  // SuperType is inherited, and arguments are passed
  SuperType.call(this."Nicholas");
  // Instance properties
  this.age = 29;
}

var instance = new SubType();
console.log(instance.name); //"Nicholas";
console.log(instance.age); / / 29
Copy the code
  • Principle: Supertype constructors are called inside subtype constructors
  • Advantages: Solves the problem of changing private properties in superType to public, and can pass arguments.
  • Disadvantages: Methods are defined in constructors and cannot be reused.

Combination inheritance

Combine prototype chain inheritance with borrowing constructor inheritance

function SuperType(name) {
  this.name = name;
  this.colors = ["red"."blue"."green"];
}
SuperType.prototype.sayName = function () {
  console.log(this.name);
};

function SubType(name, age) {
  // The property is inherited from the constructor
  // Call SuperType() the second time
  SuperType.call(this, name); 
  this.age = age;
}
// Borrow the prototype chain inheritance method
// Call SuperType() the second time
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
  console.log(this.age);
};

var instance1 = new SubType("Nicholas".29);
instance1.colors.push("black");
console.log(instance1.colors); //"red,blue,green,black"

instance1.sayName(); //"Nicholas";
instance1.sayAge(); / / 29

var instance2 = new SubType("Greg".27);
console.log(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); / / 27
Copy the code
  • Principle: Inheritance of stereotype properties and methods is achieved using stereotype chains, and inheritance of instance properties is achieved by borrowing constructors. In this way, function reuse is achieved by defining methods on the prototype, while ensuring that each instance has its own properties.
  • Advantages: Function reuse through methods defined on the prototype, while ensuring that each instance has its properties. Is the most common inheritance pattern in JavaScript.
  • Disadvantages: Calling parent constructor function twice, wasting memory.

Iv. Inheritance of the original type

Make a shallow copy of the passed object

function object(o){        
  function F();
  F.prototype = o;
  return new F();
}
Copy the code

ECMAScript5 normalizes the original type inheritance by adding the object.create () method. This method takes two arguments: an object that is used as a prototype for the new object and (optionally) an object that defines additional properties for the new object. With one argument passed, object.create () behaves the same as the Object () method.

  • Disadvantages: If you just want one object to be similar to another, prototype inheritance works, but attributes containing reference type values are shared.
  • Scenario: There is no need to build a constructor, just when you want to simulate an object.

Title | | | | JavaScript series of inheritance in August (a) | more article challenges – | — – | | | |