Detailed introduction to the various methods of JavaScript inheritance and their advantages and disadvantages

This article mainly introduces the various ways and advantages and disadvantages of in-depth understanding of JavaScript inheritance. It has certain reference value. Interested friends can refer to it

Written in front

This article explains the various inheritance methods and advantages and disadvantages of JavaScript.

Note:

is the same as "JavaScript In-depth Creating Objects", more like notes.

Hey, let me sigh again: "JavaScript Advanced Programming" is really well written!

1. Prototype chain inheritance

function Parent () {
  this.name = 'kevin';
}

Parent.prototype.getName = function () {
  console.log(this.name);
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin

Problem:

1.Referenceproperty of type Shared by all instances, for example:

function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy", "yayu"]

2. When creating an instance of Child, parameters cannot be passed to Parent

2. Borrow the constructor (Classic inheritance)

function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {
  Parent.call(this);
}

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]

Advantages:

1. Avoid reference type properties being shared by all instances

2. Can be used in Passing parameters to Parent in Child

For example:

function Parent (name) {
  this.name = name;
}

function Child (name) {
  Parent.call(this, name);
}

var child1 = new Child('kevin');

console.log(child1.name); // kevin

var child2 = new Child('daisy');

console.log(child2.name); // daisy

Disadvantages:

Methods are all defined in the constructor, and each time an instance is created, the method will be created.

3. Combination inheritance

Prototype chain inheritance and classic inheritance are two swords in one.

function Parent (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name)
}

function Child (name, age) {

  Parent.call(this, name);
  
  this.age = age;

}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

Advantages: Combining the advantages of prototype chain inheritance and constructors, it is the most commonly used inheritance pattern in JavaScript.

4. Prototypal inheritance

function createObj(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

is the simulation implementation of ES5 Object.create, using the passed in object as the prototype of the created object .

Disadvantages:

Attribute values ​​containing reference types will always share the corresponding value, which is the same as prototype chain inheritance.

var person = {
  name: 'kevin',
  friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.firends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

Note: After modifying the value of person1.name, the value of person2.name has not changed, not because of person1 and person2 has an independent name value, but because person1.name = 'person1', the name value is added to person1, not the name value on the prototype is modified. .

5. Parasitic inheritance

Create a function that is only used to encapsulate the inheritance process. This function is used to enhance the object in some form internally. Finally the object is returned.

function createObj (o) {
  var clone = object.create(o);
  clone.sayName = function () {
    console.log('hi');
  }
  return clone;
}

Disadvantages: Like the borrowed constructor pattern, a method will be created every time an object is created.

6. Parasitic combined inheritance

For the convenience of everyone’s reading, the code of combined inheritance is repeated here:

function Parent (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name)
}

function Child (name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

console.log(child1)

Combined inheritance The biggest disadvantage is that the parent constructor is called twice.

Once when setting the prototype of a subtype instance:

Child.prototype = new Parent();

Once when creating a subtype instance:

var child1 = new Child('kevin', '18');

Recall the simulation implementation of new, in fact, here In the sentence, we will execute:

Parent.call(this, name);

Here, we will call the Parent constructor again.

So, in this example, if we print the child1 object, we will find that both Child.prototype and child1 have an attribute called colors, and the attribute values ​​are ['red', 'blue', 'green'] .

So how can we keep improving and avoid repeated calls this time?

What if we don’t use Child.prototype = new Parent(), but indirectly let Child.prototype access Parent.prototype?

Let’s see how to implement it:

function Parent (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name)
}

function Child (name, age) {
  Parent.call(this, name);
  this.age = age;
}

// 关键的三步
var F = function () {};

F.prototype = Parent.prototype;

Child.prototype = new F();


var child1 = new Child('kevin', '18');

console.log(child1);

Finally, let’s encapsulate this inheritance method:

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

function prototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

// 当我们使用的时候：
prototype(Child, Parent);

To quote the praise of parasitic combined inheritance in "JavaScript Advanced Programming":

The high efficiency of this method reflects that it only calls the Parent constructor once, and therefore avoids creating unnecessary and redundant properties on Parent.prototype. At the same time, the prototype chain remains unchanged; therefore, instanceof and isPrototypeOf can still be used normally. Developers generally believe that parasitic compositional inheritance is the most ideal inheritance paradigm for reference types.

The above is the detailed content of Detailed introduction to the various methods of JavaScript inheritance and their advantages and disadvantages. For more information, please follow other related articles on the PHP Chinese website!