Two inheritance methods of js

Js inheritance can be divided into two types: Object impersonating and prototype chain.

I. Object impersonating includes three types: Temporary attributes, call (), and apply ()
1. Temporary attribute Method
Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
This. say = function (){
Alert ('My name is '+ this. name );
}
}
Function F2E (name, id ){
This. temp = Person;
This. temp (name );
Delete this. temp;
This. id = id;
This. showId = function (){
Alert ('Good morning, Sir, My work number is '+ this. id );
}
}
Var simon = new F2E ('simon, 9527 );
Simon. say ();
Simon. showId ();

2. call ()/apply () method
In essence, this pointer is changed
Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
This. say = function (){
Alert ('My name is '+ this. name );
}
}
Function F2E (name, id ){
Person. call (this, name); // change the apply () method to Person. apply (this, new Array (name ));
This. id = id;
This. showId = function (){
Alert ('Good morning, Sir, My work number is '+ this. id );
}
}
Var simon = new F2E ('simon, 9527 );
Simon. say ();
Simon. showId ();

Disadvantage: Let's look at this memory distribution chart:

In the concept of OO, after the new is instantiated, the object forms its own space in the heap memory. It is worth noting that this code segment. The member method exists in this code segment, and the methods are shared. This is where all member Methods point to this when inherited by object impersonating. That is to say, after new, each instance will have this member method, which is not shared, this results in a large amount of memory waste. In addition, variables and methods defined by prototype cannot be inherited through the object impersonating method. The following code will cause errors:
Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
This. say = function (){
Alert ('My name is '+ this. name );
}
}
Person. prototype. age = 20;
Person. prototype. sayAge = function () {alert ('My age is '+ this. age )};

Function F2E (name, id ){
Person. apply (this, new Array (name ));
This. id = id;
This. showId = function (){
Alert ('Good morning, Sir, My work number is '+ this. id );
}
}

Var simon = new F2E ('simon, 9527 );
Simon. sayAge (); // TypeError: simon. sayAge is not a function

Ii. prototype chain
Copy codeThe Code is as follows:
Function Person (){
This. name = 'simon ';
}
Person. prototype. say = function (){
Alert ('My name is '+ this. name );
}

Function F2E (id ){
This. id = id;
This. showId = function (){
Alert ('Good morning, Sir, My work number is '+ this. id );
}
}
F2E. prototype = new Person ();

Var simon = new F2E (9527 );
Simon. say ();
Simon. showId ();
Alert (simon. hasOwnProperty ('id'); // check whether it is a property.

Next, follow the example above to understand the following js prototype chain concept:

The prototype chain can be understood as: each object in js has a hidden _ proto _ attribute, and the _ proto _ attribute of an instantiated object points to the prototype method of its class, the prototype method can be assigned to another instantiated object. The _ proto _ of this object needs to point to its class, thus forming a chain, that is,
Copy codeThe Code is as follows:
F2E. prototype = new Person ()

This sentence is the key. When a js object reads an attribute, it first looks for its own attribute. If it does not, it then searches for the attribute of the object on the prototype chain in sequence. That is to say, the prototype chain method can be shared, which solves the disadvantage of the object impersonating and wasting memory.

The following describes the disadvantages:
The disadvantage is that the prototype chain inheritance method means that parameters cannot be passed to the parent class during subclass instantiation, that is, in this example, function Person () is directly written as this. name = "Simon. The following code cannot achieve the expected results:
Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
}
Person. prototype. say = function (){
Alert ('My name is '+ this. name );
}

Function F2E (name, id ){
This. id = id;
This. showId = function (){
Alert ('Good morning, Sir, My work number is '+ this. id );
}
}
F2E. prototype = new Person ();

Var simon = new F2E ("Simon", 9527 );
Simon. say ();
Simon. showId ();

 
Function Person (name ){
This. name = name;
}

Person. prototype. say = function (){
Alert ('My name is '+ this. name );
}

Function F2E (name, id ){
This. id = id;
This. showId = function (){
Alert ('Good morning, Sir, My work number is '+ this. id );
}
}

F2E. prototype = new Person (); // The value cannot be passed here. this. neither name nor name works. You can directly write F2E. prototype = new Person ('wood ') is acceptable, but simon. say () becomes My name is wood

Var simon = new F2E ("Simon", 9527 );
Simon. say (); // the pop-up My name is undefined
Simon. showId ();

Finally, we will summarize the self-defined inheritance implementation method. The member variables adopt the object impersonating method, and the member Methods Adopt the prototype chain method. The Code is as follows:
Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
}

Person. prototype. say = function (){
Alert ('My name is '+ this. name );
}

Function F2E (name, id ){
Person. call (this, name );
This. id = id;
}

F2E. prototype = new Person ();
// Pay attention to the details here. showId cannot be written in front of F2E. prototype = new Person ();
F2E. prototype. showId = function (){
Alert ('Good morning, Sir, My work number is '+ this. id );
}

Var simon = new F2E ("Simon", 9527 );
Simon. say ();
Simon. showId ();