JS can be divided into two types of inheritance: Object impersonation and prototype chain mode
One, the object impersonate includes three kinds : temporary attribute way, call () and apply () way
1. Temporary Property mode
Copy Code code 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
Essentially, it changes the point of the this pointer
Copy Code code 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); The Apply () method is changed 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: First look at this memory allocation diagram:
In the OO concept, when new is instantiated, the object forms its own space in the heap memory, notably the code snippet. The member method is the code snippet, and the method is shared. The problem is here, when inheriting by object impersonation, all member methods point to this, that is, after new, each instance will have this member method, not shared, causing a lot of memory waste. And by the way the object is impersonating, the variables and methods defined by the prototype method cannot be inherited, as the following code will error:
Copy Code code 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 (); Tip TypeError:simon.sayAge is not a function
second, the prototype chain mode
Copy Code code 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 of its own
Next, follow the example above to understand the following JS prototype chain concept:
Prototype chain can be understood as: JS each object has a hidden __proto__ attribute, an instantiated object's __proto__ attribute points to its class prototype method, and this prototype method can be assigned to another instantiated object, the object of __ Proto__ also needs to point to its class, thus forming a chain, which is in the preceding code
Copy Code code as follows:
F2e.prototype = new Person ()
This sentence is the key. When a JS object reads a property, it finds its own properties first, and then goes on to find the properties of the objects on the prototype chain in turn. This means that the method of the prototype chain can be shared, thus solving the shortcoming of the object posing as a waste of memory.
Below again the disadvantage:
The disadvantage is obvious, the prototype chain is inherited, that is, the instantiation of subclasses can not pass parameters to the parent class, which is why the function person () in this example has no parameters, but directly written this.name= "Simon" reason. The following code will not achieve the desired effect:
Copy Code code 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 (); It is not possible to pass a value here, either THIS.name or name, and it is ok to write F2e.prototype = new person (' wood '), but then Simon.say () becomes my name is Wood
var simon = new f2e ("Simon", 9527);
Simon.say (); Eject my name is undefined
Simon.showid ();
Finally, the author summarizes the way of inheriting, the member variable adopts the object posing method, the member method adopts the prototype chain, and the code is as follows:
Copy Code code 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 ();
Notice a detail here, Showid cannot be written in 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 ();
