Redo JS Virtuoso Eighth bullet: object-oriented and inheritance

JS There is no language grammar level inheritance mechanism, but this does not mean that JS can not achieve inheritance, the use of JS properties and dynamic method to simulate the implementation of inheritance, through a summary of the following methods to achieve:

1 prototype chain inheritance

We know that the prototype plays an important role in the object, the function itself has a prototype object, the object is created by the object has a pointer to the prototype object, re-prototype properties and methods of the search coverage mechanism, as well as the dynamics of the prototype properties and methods

Implementation Principle : Manually modify the object's prototype object to the object to be inherited, such as:

function Person (name,sex) {

This.name=name;

Person.prototype.say=function () {

Console.log (' Speak Chinese ');

}

}

Prototype inheritance

function Child () {

Child.prototype=new person ();

}

var child=new child (); Child.name;child.say ();

1) Manually modify the object's prototype object to achieve the purpose of inheritance

2) due to the static nature of the prototype, there is also the advantages and disadvantages of prototype static

3) prototype chain, all objects are from object, the natural prototype chain will also search for the object level, this bottom-up search mechanism constitutes the prototype chain;

4) Cons: Prototype sharing and no constructors pass parameters to the base class;

2 borrowing constructors

Since the prototype chain is not able to pass parameters like the base class, this is done using the Call,apply,bind method of the function:

Borrowing constructor inheritance

function Child (Name,sex) {

Person.call (This,name,sex);

}

1) In this case, this is passed into the base class, which is essentially just the extension of the base class.

2) Now the subclass child's prototype has not been changed, so the prototype method of the base class is not searched;

3) Borrowing the implementation of the constructor to know, lost the base class interface method, in the avoidance of prototype chain inheritance, but also lost the advantages of the prototype chain inheritance;

3 Combination Inheritance

Since the main purpose of the prototype chain is to inherit the prototype method, and the use of the structure to achieve the smooth inheritance of attributes, then the two combined to take the director;

function Child (Name,sex) {

Person.call (This,name,sex);

Child.prototype=new person ();

}

1) Very good implementation of the borrowing structure and the advantages of the prototype chain, it becomes a very common inheritance mode

2) However, the constructor of the base class is executed 2 times through 2 calls to the base class constructor;

4 prototype Inheritance

What this means is that the object is used as a prototype object for other objects, which needs to be distinguished from the prototype chain inheritance;

function Object (o) {

function F ();

F.prototype=o;

return new F ();//Copy a pointer to o through the constructor;

}

1) This process does not create a new type

2) This process is to encapsulate existing objects to extend

3) Suitable for objects that do not require a type, and are suitable for relatively temporary creation;

var obj={

Name: ' Zhangsan ',

friends:[' Lishi ', ' Wangwu ']

};

var person=object (obj);

Person.friends.push (' Maliu ');

This is equivalent to a copy of the Obj object so that: var person= copy obj, get the same copy as obj, create an extension method, or directly to the member previously owned, but the copy here is just the copy of the pointer does not change the object itself;

Therefore, obj is shared for sub-objects;

4) This type of inheritance is rarely used because there is no obvious advantage

5 Parasitic inheritance

Parasitic inheritance is essentially the same as the prototype inherited above, except that it expands the point method and returns

function Object (o) {

function F ();

F.prototype=o;

var f= new F ();//Copy a pointer to o through the constructor;

Return to the previous extension method, so that we call parasitic, the concept is very high, the essence is very simple, is not it;

F.say=function () {console.log (' xxxx ')};

return F;

}

Needless to say, the return is similar to the prototype inheritance application;

6 Parasitic combined inheritance

This is to solve the shortcomings of the combination of inheritance mode proposed, because the combined inheritance mode will call the constructor 2 times, and for the parent class property will exist 2 copies, naturally in the repeated call to the constructor, but also caused a waste of memory, because the prototype is always placed on the property of the instance is overwritten

How to solve this problem?

This is a combination of inheritance

function Child (Name,sex) {

Person.call (this,name,sex);//The constructor is called the second time

Child.prototype=new person ();//First Call constructor

}

This process we know that the properties of the prototype will be overwritten by the second call to the property of the borrowed constructor, which means that we only need the method of the parent class in the prototype, and the prototype method can be accessed through the prototype property of the function to the

Person.prototype; Then we just throw the prototype attribute to the subclass.

the principle process is as follows :

function Child (Name,sex) {

Person.call (this,name,sex);//The constructor is called the second time

child.prototype=person.prototype;//directly throws the prototype to the subclass, but there's a problem because the prototype has a constructor attribute that points to the person

There is also a need to manually modify the

Child.prototype.constructor=child;

}

We can also understand that pseudo-code

function (Supertype,subtype) {

subtype.prototype=supertype.prototype;//successfully got the prototype object of the parent class

subtype.constructor=subtype;//because of possible loss of type, here again point back

}

Further encapsulation

function (Supertype,subtype) {

Using a prototype to get a temporary object

var obj=object (Supertype.prototype);//Look, it's just a prototype out here.

Obj.constructor=subtype;

subtype.prototype=obj;//successfully got the prototype object of the parent class

}

JS inheritance and object-oriented ideas same strain, there are temporary and Classic mode, just look at the use of the situation and choose which mode.

Redo JS Virtuoso Eighth bullet: object-oriented and inheritance