Inheritance in js can be divided into two types: object impersonation and prototype chaining.
1. Object impersonation includes three types : temporary attribute method, call() and apply() method
1. Temporary attribute method
Copy the 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 pointer of this pointer.
Copy the 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); //apply() method 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();
Disadvantages: Let’s first look at this memory allocation diagram:
In the OO concept, after new is instantiated, the object forms its own space in the heap memory. It is worth noting that this code segment. The member methods exist in this code segment, and the methods are shared. The problem is here. When inheriting through object impersonation, all member methods point to this. That is to say, after new, each instance will have this member method, which is not shared, which results in a large amount of memory. waste. And through object impersonation, variables and methods defined through prototype cannot be inherited. For example, the following code will cause an error:
Copy the 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(); //Prompt TypeError: simon.sayAge is not a function
2. Prototype chain method
Copy the 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 its own property
Next, follow the above example to understand the following js prototype chain concepts:
The prototype chain can be understood as: each object in js has a hidden __proto__ attribute. The __proto__ attribute of an instantiated object points to the prototype method of its class, and this prototype method can be assigned to another instantiation. Object, the __proto__ of this object needs to point to its class, thus forming a chain, which is the
Copy the code code as follows:
F2E.prototype = new Person()
This sentence is the key. When a js object reads a certain attribute, it will first search for its own attributes. If there are no attributes, it will then search for the attributes of the object on the prototype chain. In other words, the methods of the prototype chain can be shared, which solves the problem of object impersonation and wasting memory.
Now let’s talk about the disadvantages:
The disadvantage is obvious. Prototype chain inheritance means that parameters cannot be passed to the parent class when instantiating a subclass. This is why function Person() in this example has no parameters and is directly written as this.name="Simon". The following code will not achieve the desired effect:
Copy the 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(); //Value cannot be passed here, neither this.name nor name will work. It is possible to directly write F2E.prototype = new Person('wood'), but in this case simon.say( ) becomes My name is wood
var simon = new F2E("Simon",9527);
simon.say(); //Pop up My name is undefined
simon.showId();
Finally, let me summarize what I think is a better way to implement inheritance. Member variables use object impersonation, and member methods use prototype chaining. The code is as follows:
Copy the 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();
//Note one detail 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();