Detailed explanation of the basic pattern usage and improvement methods of JavaScript prototypal inheritance with examples

In Javascript, each function has a prototype attribute prototype pointing to its own prototype, and the object created by this function also has a __proto__ attribute pointing to this prototype, and the prototype of the function is an object, so this object also There will be a __proto__ pointing to its own prototype, and this goes layer by layer until the prototype of the Object object, thus forming a prototype chain.

Each function is an object created by the Function function, so each function also has a __proto__ attribute pointing to the prototype of the Function function. What needs to be pointed out here is that it is the __proto__ attribute of each object that actually forms the prototype chain, not the prototype attribute of the function, which is very important.

Basic mode:

var Parent = function(){
    this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
    this.name = 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

This is the simplest way to implement prototypal inheritance. Directly assign the object of the parent class to the prototype of the subclass constructor, so that the object of the subclass can be accessed. To the attributes in the prototype of the parent class and the parent class constructor. The advantages of this method are obvious. The implementation is very simple and does not require any special operations. At the same time, the disadvantages are also obvious. If the subclass needs to do the same initialization action as in the parent class constructor, then it must be done in the subclass constructor. Repeat the operation in the parent class again:

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

In the above case, only the name attribute needs to be initialized. If the initialization work continues to increase, this method is very inconvenient. Therefore, there is the following improved way: Borrowing the constructor

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

The above method is performed by applying in the subclass constructor to call the parent class's constructor. The same initialization work, so that no matter how much initialization work is done in the parent class, the subclass can also perform the same initialization work. But there is still a problem with the above implementation. The parent class constructor is executed twice, once in the subclass constructor and once when assigning the subclass prototype. This is very redundant, so we still need to make an improvement. ：

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

In this way, we only need to execute the constructor of the parent class once in the constructor of the subclass, and at the same time, we can inherit the attributes in the prototype of the parent class, which is also relatively In line with the original intention of the prototype, it is to put the content that needs to be reused in the prototype.

The above is the detailed content of Detailed explanation of the basic pattern usage and improvement methods of JavaScript prototypal inheritance with examples. For more information, please follow other related articles on the PHP Chinese website!