Six inheritance methods of JavaScript

This article will help you better understand the six inheritance methods of JavaScript, which are of great reference value, for more information, see the following Section. This article will help you better understand the six inheritance methods of JavaScript. It is very good and has reference value. For more information, see

Class inheritance (constructor)

In JS, there is no concept of classes, and the so-called classes are also simulated. Especially when we use the new Keyword, the concept of "class" becomes more like a class in other languages. Class Inheritance refers to calling the constructor of the parent class within the function object, so that you can obtain the methods and attributes of the parent class. The call and apply methods provide support for class inheritance. By changing the environment of this, the subclass itself has various attributes of the parent class.

var father = function() {this.age = 52;this.say = function() {alert('hello i am '+ this.name ' and i am '+this.age + 'years old');}}var child = function() {this.name = 'bill';father.call(this);}var man = new child();man.say();

Prototype inheritance

Prototype inheritance is often used in development. It is different from class inheritance because inheritance does not exist in the object itself, but in the prototype of the object ). Each object has its original type, which is embodied in a hidden proto attribute in the browser. You can change them in some modern browsers. For example, in zepto, the fn object of zepto is added to the proto attribute of an empty array, so that the array becomes a zepto object and has all the methods. In other words, when an object needs to call a method, it goes back to the latest prototype to find the method. If not, it will continue searching again. In this way, the search method is always found. The prototypes of these searches constitute the prototype chain of the object. The prototype finally points to null. Prototype Inheritance refers to the prototype that grants the parent object method to the subclass. The constructor of a subclass does not have these methods and attributes.

Var father = function () {} father. prototype. a = function () {} var child = function () {} // start inheriting child. prototype = new father (); var man = new child (); man. a ();

The seventh row implements prototype inheritance. Many people are not familiar with this method. Print man in the browser to view the inheritance relationship of each prototype.

You can see the step-by-step relationship child-> object (the object instantiated by father)-> father. Child inherits from the father prototype through the middle layer. But why is there another layer of objects in the middle? Why not use child. prototype = father. prototype. The answer is that there is no difference between child and father. You should remember that there is a constructor attribute in prototype, pointing to the constructor. Normally, we need to change the constructor value back to the child constructor. But if father. prototype is assigned to child. prototype, who should the constructor point? Therefore, it is clear that child and father can be kept as independent objects only through the middle layer.

Comparison between class inheritance and prototype inheritance

Constructor (class) type inheritance

First, the methods inherited by the constructor will all exist in the parent object, and every instance will save funciton in the memory. This method will not bring performance problems.

Second, class inheritance is immutable. It cannot be reused. during runtime, it cannot be modified or new methods can be added. This method is a self-blocking method. It is rarely used in practice.

Prototype inheritance

Advantages:

The prototype chain can be changed: the parent class on the prototype chain can be replaced with eXtensible

You can modify the subclass by changing the prototype link. In addition, class inheritance does not support multiple inheritance. For prototype inheritance, you only need to write extend to expand the object.

However, there are two problems with prototype chain inheritance.

First, the prototype Property containing the reference type value will be shared by all instances (it can be understood as follows: Run sub1.arr. push (2); first, search for the attributes of sub1 and find the attributes of the Instance (there is no instance attribute in this example). If it is not found, start searching up along the prototype chain, the sub1 prototype object was found to have the arr attribute. Therefore, 2 is inserted at the end of arr, so sub2.arr is also changed ).

Second, when creating a child-type instance, you cannot pass parameters to a super-Type constructor. (In fact, it should be said that there is no way to pass parameters to super-type constructors without affecting all object instances.) In practice, prototype chains are rarely used.

Function Super () {this. val = 1; this. arr = [1];} function Sub (){//...} sub. prototype = new Super (); // core var sub1 = new Sub (); var sub2 = new Sub (); sub1.val = 2; sub1.arr. push (2); alert (sub1.val); // 2 alert (sub2.val); // 1 alert (sub1.arr); // 1, 2 alert (sub2.arr); // 1, 2

Summary:

Class inheritance during instantiation, the parent class can pass parameters and cannot be reused (the parent class is unchangeable, and the content of the parent class is saved in the memory every time the instance runs)

When prototype inheritance is instantiated, the parent class cannot pass parameters and can be reused (the prototype chain can be changed (the parent class can be replaced with eXtensible). The parent class is not stored in the memory, instead, search for the prototype chain, but the result is that the prototype property is shared by all instances (especially the reference type value ))

Combination inheritance (most commonly used)

The combination inheritance combines the prototype chain and the borrow constructor technology to take full advantage of an inheritance mode.

The idea is to use the prototype chain to inherit the prototype attributes and methods, and use the constructor to inherit the instance attributes.

function SuperType(name){this.name = name;this.numbers = [1,2,3];}SuperType.prototype.sayName = function(){console.log(this.name);}function SubType(name,age){SuperType.call(this,name);this.age = age;}SubType.prototype = new SuperType();SubType.prototype.sayAge = function(){console.log(this.age);}var instance1 = new SubType('aaa',21);instance1.numbers.push(666);console.log(instance1.numbers);instance1.sayName();instance1.sayAge();var instance2 = new SubType('bbb',22);console.log(instance2.numbers);instance2.sayName();instance2.sayAge();

Put all Instance functions on the prototype object and inherit the parent class functions through Sub. prototype = new Super (); To achieve function reuse.

Retain the advantages of the borrow constructor method, and inherit the basic attributes and reference attributes of the parent class through Super. call (this) to transmit parameters;

Advantages and disadvantages

Advantages:

1. Parameter passing

2. Function reusability

3. No reference Property Sharing Problem (drawing)

Disadvantages:

(A little flaw) There is a redundant parent class instance attribute on the subclass prototype, because the parent class constructor is called twice and two copies are generated, the subset of the subclass instance shields the prototype of the subclass instance... It is a waste of memory, which is better than the previous situation, but it is indeed a defect.

The above is a detailed understanding of the six inheritance methods (text) of JavaScript. For more information, see other related articles in the first PHP community!