6 ways to understand JS inheritance

To inherit, you have to provide a parent class (who inherits, provides inherited properties)

　　　　

　　First, the prototype chain inheritance

　　　　

Focus: Make the prototype of the new instance equal to the instance of the parent class.

Features: 1. An instance can inherit attributes from the properties of the instance's constructor, the parent class constructor property, and the parent class prototype. (The new instance does not inherit the properties of the parent class instance!) ）

Cons: 1. The new instance cannot pass arguments to the parent class constructor.

2, inherit a single.

3. All new instances share the properties of the parent class instance. (The properties on the prototype are shared, one instance modifies the prototype property, and the prototype property of the other instance is modified!) ）

　　

　　Second, borrowing constructor inheritance

　　　　

　　　　Focus: Use. Call () and. Apply () to introduce a parent class constructor into a subclass function (a self-executing (copy) of a parent function in a subclass function)

Features: 1, inherited only the attributes of the parent class constructor, not the attributes that inherit the parent class prototype.

2, solved the prototype chain inheritance disadvantage 1, 2, 3.

3, you can inherit multiple constructor properties (call multiple).

4. You can pass parameters to the parent instance in the child instance.

Cons: 1. You can inherit only the properties of the parent class constructor.

2. The reuse of constructors is not possible. (call back each time with each use)

3, each new instance has a copy of the parent class constructor, bloated.

　　Iii. combination Inheritance (combined prototype chain inheritance and borrowing constructor inheritance) (common)

　　　　

Emphasis: Combining the advantages of both modes, the transfer of parameters and multiplexing

Features: 1, can inherit the parent class on the prototype property, you can pass the parameter, can be reused.

2. The constructor properties introduced by each new instance are private.

Cons: A two-time parent constructor (consuming memory) is called, and the subclass constructor replaces that parent constructor on the prototype.

　Iv.. prototype-Type Inheritance

　　　　

　　Emphasis: Wrapping an object with a function and then returning the call to that function, which becomes an instance or an object that can optionally add properties. Object.create () is the principle.

Features: Similar to copying an object, wrapping it with a function.

Cons: 1, all instances inherit the properties on the prototype.

2. No reuse is possible. (The new instance properties are all added later)

　　

　　V. Parasitic inheritance

　　　　

The key point: is to give the prototype inheritance outside to set a shell.

Pros: No custom type is created, because it's just a shell return object (this), and this function is a logical new object to create.

Cons: No use to prototypes, no reuse.

　　　　

　Vi. Parasitic combined inheritance (common)

　　　　Parasitic: Returns an object within a function and then calls

Combination: 1, the prototype of the function equals another instance. 2, in the function with apply or call to introduce another constructor, can be passed the parameter

　　

　　　　

　　　　Focus: Fixed the problem of combinatorial inheritance

Inheriting these knowledge points is not so much an object's inheritance as it is more like functional usage of functions, how to use functions for reuse, and combinations, which are the same as the thinking of using inheritance. Several of these inherited methods can fix their shortcomings manually, but this manual fix becomes another inheritance mode.

The learning focus of these inheritance patterns is to learn their ideas, or else you will be in the coding Book of examples, you will feel clearly can directly inherit why still have to engage in such trouble. It's like a prototype. It replicates a copy of the internal object with a function that not only inherits the properties of the inner object, but also invokes the function (object, the return of the source's internal object) at will, adds attributes to it, and changes the prototype object by changing the parameters, and the new attributes do not affect each other.

6 ways to understand JS inheritance