JavaScript中constructor属性的原理与修正方法

作者:拾光

时间:2026-10-30

浏览:654

本文解析JavaScript中constructor属性的定义与用法,重点探讨修改prototype后constructor指向Object的异常现象及其原理,并提供通过直接赋值修复constructor指向的正确代码方案。

文章目录

constructor属性概述

定义和用法

constructor属性用于返回对创建当前对象的构造函数(Constructor Function)的引用。

语法

object.constructor

对于constructor这一名称,开发者通常并不陌生。它始终指向创建当前实例对象的那个构造函数。

修改prototype导致的指向异常

这里需要特别注意一个细节:每个函数都拥有一个prototype属性,该属性的constructor默认指向这个函数本身。然而,当我们直接修改函数的prototype时,原有的指向关系会被打破,从而产生意外情况。例如:


function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.getAge = function(){
return this.age;
}
Person.prototype.getName = function(){
return this.name;
}
var p = new Person("Nicholas",18);
console.log(p.constructor); //Person(name, age)
console.log(p.getAge()); //18
console.log(p.getName()); //Nicholas 

但如果采用如下写法:


function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
}
var p = new Person("Nicholas",18);
console.log(p.constructor); //Object()
console.log(p.getAge()); //18
console.log(p.getName()); //Nicholas 

此时,结果中的constructor指向发生了改变。

造成这一现象的原因是,prototype本身也是一个对象。上述代码在逻辑上等价于:


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

由于constructor始终指向创建当前对象的构造函数,因此不难理解,在上述代码中,p.constructor的输出结果变为Object。

修复constructor指向的方法

如果希望在使用修改后的prototype时,让constructor依然指向Person构造函数,解决方法很简单:直接为Person.prototype.constructor进行赋值即可:


Person.prototype = {
constructor:Person,
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
}

以上所述是小编给大家介绍的JavaScript中的constructor ,希望对大家有所帮助!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章