Detailed explanation of the usage and disadvantages of JavaScript prototype chain inheritance method-JS Tutorial-php.cn

Detailed explanation of the usage and disadvantages of JavaScript prototype chain inheritance method

伊谢尔伦

Release： 2017-07-20 15:28:50

Original

3141 people have browsed it

Prototype chain method

function Person(){
     this.name = &#39;Simon&#39;;
}
Person.prototype.say = function(){
     alert(&#39;My name is &#39;+this.name);
}
function F2E(id){
     this.id = id;
     this.showId = function(){
          alert(&#39;Good morning,Sir,My work number is &#39;+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E(9527);
simon.say();
simon.showId();
alert(simon.hasOwnProperty(&#39;id&#39;)); //检查是否为自身属性

Copy after login

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

The prototype chain can be understood as: each object in js There is 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 instantiated object. The __proto__ of this object needs to point to Its class forms a chain, that is, the sentence

F2E.prototype = new Person()

Copy after login

in the previous code 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 prototype chain method can be shared, which solves the problem of object impersonation and wasting memory.

Let’s talk about the shortcomings:
The shortcomings are obvious. Prototype chain inheritance means that parameters cannot be passed to the parent class when instantiating a subclass, which is why function Person is used in this example. () has no parameters, but is directly written as this.name="Simon". The following code will not achieve the expected results:

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert(&#39;My name is &#39;+this.name);
}
function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert(&#39;Good morning,Sir,My work number is &#39;+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(&#39;My name is &#39;+this.name);
}

function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert(&#39;Good morning,Sir,My work number is &#39;+this.id);
     }
}

F2E.prototype = new Person();  //此处无法进行传值，this.name或者name都不行，直接写F2E.prototype = new Person(&#39;wood&#39;)是可以的，但是这样的话simon.say()就变成了My name is wood

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

Copy after login

Finally, let’s summarize the inheritance implementation method that I think is better. Member variables use object impersonation, and member methods use prototype chaining. The code is as follows:

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert(&#39;My name is &#39;+this.name);
}
function F2E(name,id){
     Person.call(this,name);
     this.id = id;
}
F2E.prototype = new Person(); 
//此处注意一个细节，showId不能写在F2E.prototype = new Person();前面
F2E.prototype.showId = function(){
     alert(&#39;Good morning,Sir,My work number is &#39;+this.id);
}
var simon = new F2E("Simon",9527);
simon.say();
simon.showId();

Copy after login

The above is the detailed content of Detailed explanation of the usage and disadvantages of JavaScript prototype chain inheritance method. For more information, please follow other related articles on the PHP Chinese website!