Vernacular understand

  • JavaScript is based on the inheritance of the stereotype chain. When an object’s property is accessed, if it cannot be found, it will be searched up the stereotype chain and so on until it cannot be found
  • Each constructor has oneprototypeProperty that represents the prototype object for the constructor
  • prototypeThere is aconstructorProperty that points to its constructorconstructorPoint to their own
  • The instantiated object has a__proto__, pointing to its prototypeprototype
  • No matter what kind of inheritance,prototypeAll properties on the prototype are shared, so the best thing to add to the prototype chain is to add methods, base properties to the constructor, unless you are sure that your base properties need to be shared across all instance objects

Several ways of inheritance

The constructor implements inheritance

  • Only constructor properties can be inherited, not stereotype properties
  • Each new instance has a copy of the superclass constructor
  • Each instance is a reinstantiation constructor and there are no shared properties
  • Can be achieved byParent.call(this,params)Pass arguments to the superclass constructor
function Person() {
  this.name = "live";
  this.friends = ["hello"];
}
Person.prototype.sex = "Male";

function Child() {
  Person.call(this);
  this.age = 12;
}

const child = new Child();
child.friends.push("world");
console.log(child.name, "child");
console.log(child.sex, "child"); // The stereotype properties cannot be inherited
console.log(child.friends, "child");

const child2 = new Child();
console.log(child2.friends, "child2");

//live child
//undefined child
//[ 'hello', 'world' ] child
//[ 'hello' ] child2 
Copy the code

Prototype chain inheritance

  • All instances share the parent instance properties, all of which are changed when the reference properties are modified
  • You can get the parent constructor as well as the stereotype properties
  • Cannot pass arguments like a parent class
  • When the stereotype chain inherits, when the stereotype chain property changes, other instantiated objects also change
function Person() {
    this.name = "live";
    this.friends = ["hello"];
}
Person.prototype.sex = "Male";

function Child() {
    this.age = 12;
}
Child.prototype = new Person();

const child = new Child()
child.friends.push("world");
console.log(child.name,"child"); // You can inherit the properties of the superclass constructor
console.log(child.sex,"child"); // You can inherit attributes from stereotypes
console.log(child.friends,"child");
Person.prototype.sex = "nv"; // The prototype chain properties have been modified
console.log(child.sex); // The instantiated object synchronization is modified


const child2 = new Child()
console.log(child2.friends,"child2"); // Reference attribute sharing
Copy the code

Combination of inheritance

  • The constructor inherits +prototypeInstance object inherits composition inheritance
  • Constructors inherit passable arguments
  • Instance object prototype chain inheritance, ensuring that properties are unique to each object
  • However, the superclass constructor is called twice
function Person(name) {
    this.name = name;
    this.colors = ["red"];
}
Person.prototype.sex = "Male";

function Child(name) {
    Person.call(this,name); // The constructor is inherited, and the parent constructor is called once for arguments passed
}
Child.prototype = new Person(); // Instantiate stereotype chain inheritance to avoid sharing attributes

const child = new Child("live");
child.colors.push("blue"); New blue / / the child
console.log(child.name,"child");
console.log(child.colors,"child");

const child2 = new Child("lily");
child2.colors.push("yellow");
console.log(child2.name,"child2");
console.log(child2.colors,"child2"); / / child2 not Shared

//live child
//[ 'red', 'blue' ] child
//lily child2
//[ 'red', 'yellow' ] child2
Copy the code

Parasitic inheritance

  • You can extend the original object and return inherited
  • As with the prototype chain inheritance, the constructor property cannot be obtained at this point
  • A parasitic inheritance that points directly to a parent classprototype, so there will be no repeated calls to the parent class
function Person() {
    this.name = "live";
}
Person.prototype.sex = "nan"; // Attributes of the prototype chain
Person.prototype.friends = ["hello"];

function Child() {
    this.age = 12;
}
// The key to parasitic inheritance
let fn  = function() {}; // Create an empty constructor
fn.prototype = Person.prototype; // Inherit the prototype chain of Person
/ / extension
fn.prototype.sayName = function() {
    return "name";
}
// The prototype chain inherits the parasitic object fn
Child.prototype = new fn();

// The above steps are equivalent to
//Child.prototype = Object.create(Person.prototye);

const child = new Child();
child.friends.push("world"); // Since friends are properties of the stereotype chain, all properties of the stereotype chain are shared
console.log(child.friends,"child");
console.log(child.name,"child"); // The constructor property cannot be obtained
console.log(child.age,"child");
console.log(child.sex,"child");
console.log(child.sayName());

const child2 = new Child();
console.log(child2.friends,"child2"); // Returns ['hello', 'world'] child2
Copy the code

Parasitic combination inheritance

  • Constructor inheritance + parasitic inheritance
  • Constructor inheritance calls the parent class once, parasitic inheritance does not call the parent class, by direct delegate prototype, so to solve the combination inheritance calls the parent class twice
function Person() {
  this.name = "live";
}
Person.prototype.sex = "nan";
Person.prototype.friends = ["hello"];

function Child() {
  this.age = 12;
}
let f = function () {};
f.prototype = Person.prototype;
f.prototype.sayName = function () {
  return "name";
};
Child.prototype = new f();

function Person() {
  this.name = "live";
}
Person.prototype.sex = "nan"; // Attributes of the prototype chain
Person.prototype.friends = ["hello"];

function Child() {
  Person.call(this); // Constructor inheritance
  this.age = 12;
}
// The key to parasitic inheritance
let fn = function () {}; // Create an empty constructor
fn.prototype = Person.prototype; // Inherit the prototype chain of Person
/ / extension
fn.prototype.sayName = function () {
  return "name";
};
// The prototype chain inherits the parasitic object fn
Child.prototype = new fn();

// The above steps are equivalent to
//Child.prototype = Object.create(Person.prototye);

const child = new Child();
child.friends.push("world"); // Since friends are properties of the stereotype chain, all properties of the stereotype chain are shared
console.log(child.friends, "child");
console.log(child.name, "child"); // You can get the property on the constructor
console.log(child.age, "child");
console.log(child.sex, "child");
console.log(child.sayName());

const child2 = new Child();
console.log(child2.friends, "child2"); // Returns ['hello', 'world'] child2

Copy the code