JavaScript classes and inheritance constructor attribute_js object-oriented-JS Tutorial-php.cn

JavaScript classes and inheritance constructor attribute_js object-oriented

WBOY

Release： 2016-05-16 18:33:14

Original

954 people have browsed it

The constructor property always points to the constructor that created the current object. For example, the following example:

Copy the code The code is as follows:

 
// Equivalent In 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 = new Foo(); 
console.log(obj.constructor === Foo); // true 
// Replace the above two paragraphs Putting the code together, we get the following conclusion 
console.log(obj.constructor.constructor === Function); // true 

But when the constructor encounters prototype, something interesting happens It just happened.
We know that each function has a default attribute prototype, and the constructor of this prototype points to this function by default. As shown in the following example:

Copy code The code is as follows:

 
function Person(name) { 
this.name = name; 
}; 
Person.prototype.getName = function() { 
return this.name; 
}; 
var p = new Person("ZhangSan "); 
console.log(p.constructor === Person); // true 
console.log(Person.prototype.constructor === Person); // true 
// will be above The two lines of code are combined to get the following result 
console.log(p.constructor.prototype.constructor === Person); // true 

When we redefine the prototype of the function ( Note: The difference from the above example, here is not to modify but to overwrite), the behavior of the constructor attribute is a bit strange, as shown in the following example:

Copy code The code is as follows:

 
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 overwriting Person.prototype, it is equivalent to the following code operation:

Copy the code The code is as follows:

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

The constructor attribute always points to the constructor that creates itself, so at this time Person.prototype.constructor === Object, that is:

Copy code The code is as follows:

 
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 to fix this problem? The method is also very simple, just re-overwrite Person.prototype.constructor:

Copy the code The code is as follows:

 
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 