Js 2 kinds of inheritance method details

Inheritance in js can be divided into two types: object impersonation and prototype chain

One, the object impersonates to include 3 kinds : temporary attribute mode, call(), and apply() mode
1. Temporary attribute mode

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. The call ()/the apply () method
It essentially changes the point of this pointer

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
function F2E(name,id){
     Person.call(this,name); //Apply () mode 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: first look at a memory allocation chart: < img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201403/201434142131193.jpg? 201424142157 ">

In OO concepts, when new is instantiated, the object forms its own space in heap memory, and this code snippet is worth noting. The member methods exist in this code segment, and the methods are Shared. The problem is that when inheritance is done by object impersonation, all member methods point to this, which means that after new, every instance will have this member method, and it is not Shared, which causes a lot of memory waste. Moreover, by means of object impersonation, the variables and methods defined by prototype cannot be inherited. For example, the following code will fail:

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 mode

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 if it is an attribute of itself

Follow the above example to understand the following js prototype chain concepts: < img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201403/201434142223800.png? 201424142242 ">

The prototype chain can be understood as: each object in js has a hidden s/s property. The s/s property of an instantiated object points to the prototype method of its class. The prototype method can be assigned to another instantiated object

F2E.prototype = new Person()

This is the key. When the js object reads a property, it will first look for its own property, and then look for the property of the object on the prototype chain. This means that the methods of the prototype chain can be Shared, which solves the problem of objects pretending to be a waste of memory.

Here's the downside:
The drawback is obvious: prototype chain inheritance means that when instantiating a child class, you can't pass arguments to the parent class, which is why function Person() in this example has no arguments and instead simply writes this.name= "Simon". The following code will not work as expected:

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();  //There is no way to pass a value here, this. Name or name, f2e. prototype = new Person('wood') is ok, but simon.say() becomes My name is wood

var simon = new F2E("Simon",9527);
simon.say();  //My name is undefined
simon.showId(); 

Finally, the author summarizes the better inheritance implementation method. The member variable adopts the object impersonation method, and the member method adopts the prototype chain method. The 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(); 
//One detail to note here is that showId cannot be written in f2e. prototype = new Person(); In front of the
F2E.prototype.showId = function(){
     alert('Good morning,Sir,My work number is '+this.id);
}

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