JavaScript class and inheritance: constructor attributes

The constructor attribute always points to the constructor that creates the current object. For example:

 
 

  
  
// Equivalent to var foo = new Array (1, 56, 34, 12 ); 
  
  
Var arr = [1,56,34,12];
  
  
Console. log (arr. constructor === Array );// True 
  
  
// Equivalent to var foo = new Function (); 
  
  
Var Foo = function (){};
  
  
Console. log (Foo. constructor === Function );// True 
  
  
// Instantiate an obj object by the constructor 
  
  
Var obj =NewFoo ();
  
  
Console. log (obj. constructor === Foo );// True 
  
  
 
  
  
// Combine the above two pieces of code to get the following conclusion: 
  
  
Console. log (obj. constructor. constructor === Function );// True 
 
 

But when constructor encounters prototype, interesting things happen.

We know that each function has a default prototype attribute, and the constructor of this prototype points to this function by default. For example:

 
 

  
  
Function Person (name ){
  
  
This. Name = name;
  
  
};
  
  
Person. prototype. getName = function (){
  
  
Return This. Name;
  
  
};
  
  
Var p =NewPerson ("ZhangSan");
  
  
 
  
  
Console. log (p. constructor === Person );// True 
  
  
Console. log (Person. prototype. constructor = Person );// True 
  
  
// Merge the above two lines of code to obtain the following results: 
  
  
Console. log (p. constructor. prototype. constructor = Person );// True 
 
 

At that time, when we re-define the prototype of the function, note: the difference with the previous example is that it is not modified but overwritten). The behavior of the constructor attribute is a bit strange, as shown in the following example:

 
 

  
  
function Person(name) {  
  
  
    this.name = name;  
  
  
};  
  
  
Person.prototype = {  
  
  
    getName: function() {  
  
  
        return this.name;  
  
  
    }  
  
  
};  
  
  
var p = new Person("ZhangSan");  
  
  
console.log(p.constructor === Person);  // false  
  
  
console.log(Person.prototype.constructor === Person); // false  
  
  
console.log(p.constructor.prototype.constructor === Person); // false 
 
 

Why?

It turns out that when people. prototype is overwritten, it is equivalent to performing the following code operations:

 
 

  
  
Person.prototype = new Object({  
  
  
    getName: function() {  
  
  
        return this.name;  
  
  
    }  
  
  
}); 
 
 

The constructor attribute always points to the creation of its own constructor, so at this time Person. prototype. constructor = Object, that is:

 
 

  
  
function Person(name) {  
  
  
    this.name = name;  
  
  
};  
  
  
Person.prototype = {  
  
  
    getName: function() {  
  
  
        return this.name;  
  
  
    }  
  
  
};  
  
  
var p = new Person("ZhangSan");  
  
  
console.log(p.constructor === Object);  // true  
  
  
console.log(Person.prototype.constructor === Object); // true  
  
  
console.log(p.constructor.prototype.constructor === Object); // true 
 
 

How can we fix this problem? The method is also very simple. Just overwrite Person. prototype. constructor again:

 
 

  
  
function Person(name) {  
  
  
    this.name = name;  
  
  
};  
  
  
Person.prototype = new Object({  
  
  
    getName: function() {  
  
  
        return this.name;  
  
  
    }  
  
  
});  
  
  
Person.prototype.constructor = Person;  
  
  
var p = new Person("ZhangSan");  
  
  
console.log(p.constructor === Person);  // true  
  
  
console.log(Person.prototype.constructor === Person); // true  
  
  
console.log(p.constructor.prototype.constructor === Person); // true 
 
 

1. JavaScript class and inheritance: prototype attribute
2. JavaScript class and inheritance: this property
3. Summary of three + 1 implementation methods of ExtJS Grid Tooltip
4. Implementation of JavaScript asynchronous call framework chain
5. JQuery-style chained call of JavaScript asynchronous call framework