JavaScript构造函数与constructor属性深度解析
本文深入解析JavaScript中构造函数的作用及其自动设置原型对象的机制,详细阐述constructor属性的定义、语法及返回值。通过代码示例说明如何获取创建对象的函数引用,并探讨原型链中constructor的指向关系,帮助开发者理解ECMAScript面向对象编程的核心概念。
构造函数与原型对象的关系
构造函数(constructor)除了用于创建对象外,还会自动为新对象设置原型对象(prototype object)。该原型对象存储在 ConstructorFunction.prototype 属性中。
以之前的例子重写,若使用构造函数创建对象“b”和“c”,则对象“a”在此扮演了“Foo.prototype”的角色。
// 构造函数
function Foo(y) {
// 构造函数将会以特定模式创建对象:被创建的对象都会有"y"属性
this.y = y;
}
// "Foo.prototype"存放了新建对象的原型引用
// 所以我们可以将之用于定义继承和共享属性或方法
// 所以,和上例一样,我们有了如下代码:
// 继承属性"x"
Foo.prototype.x = ;
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
return this.x + this.y + z;
};
// 使用foo模式创建 "b" and "c"
var b = new Foo();
var c = new Foo();
// 调用继承的方法
b.calculate(); //
c.calculate(); //
// 让我们看看是否使用了预期的属性
console.log(
b.__proto__ === Foo.prototype, // true
c.__proto__ === Foo.prototype, // true
// "Foo.prototype"自动创建了一个特殊的属性"constructor"
// 指向a的构造函数本身
// 实例"b"和"c"可以通过授权找到它并用以检测自己的构造函数
b.constructor === Foo, // true
c.constructor === Foo, // true
Foo.prototype.constructor === Foo // true
b.calculate === b.__proto__.calculate, // true
b.__proto__.calculate === Foo.prototype.calculate // true
);
上述代码逻辑可表示为如下关系结构。

构造函数与对象之间的关联关系。
从上述图示可见,每个 object 都拥有 prototype。构造函数 Foo 自身也拥有 __proto__,即 Function.prototype,而 Function.prototype 的 __proto__ 指向 Object.prototype。需重申,Foo.prototype 仅是一个显式属性,它对应 b 和 c 的 __proto__ 属性。
对该问题的完整且详细解释包含两个部分:
面向对象编程的一般理论(OOP. The general theory),描述了不同的面向对象范式与风格(OOP paradigms and stylistics),并与 ECMAScript 进行对比。
面向对象编程在 ECMAScript 中的实现(OOP. ECMAScript implementation),专门讲述 ECMAScript 中的面向对象编程。目前我们已掌握基本的 object 原理,接下来探讨 ECMAScript 中的程序执行环境(runtime program execution),即通常所说的“执行上下文堆栈”(execution context stack)。每个元素均可抽象理解为 object。或许你已发现,在 ECMAScript 中几乎处处可见 object 的身影。
constructor属性详解
以下详细介绍 JavaScript 的 constructor 属性。
对象的 constructor 属性用于返回创建该对象的函数,即我们常说的构造函数。
在 JavaScript 中,每个具有原型的对象都会自动获得 constructor 属性。除 arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression 等特殊对象外,其他所有 JavaScript 内置对象均具备 constructor 属性,例如:Array、Boolean、Date、Function、Number、Object、String 等。所有主流浏览器均支持该属性。
语法格式如下。
object.constructor
返回值说明。
对象的 constructor 属性返回创建该对象的函数的引用。
示例与说明。
以下代码中的 [native code] 表示这是 JavaScript 的底层内部代码实现,无法显示具体代码细节。
// 字符串:String()
var str = "张三";
document.writeln(str.constructor); // function String() { [native code] }
document.writeln(str.constructor === String); // true
// 数组:Array()
var arr = [1, 2, 3];
document.writeln(arr.constructor); // function Array() { [native code] }
document.writeln(arr.constructor === Array); // true
// 数字:Number()
var num = 5;
document.writeln(num.constructor); // function Number() { [native code] }
document.writeln(num.constructor === Number); // true
// 自定义对象:Person()
function Person(){
this.name = "CodePlayer";
}
var p = new Person();
document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; }
document.writeln(p.constructor === Person); // true
// JSON对象:Object()
var o = { "name" : "张三"};
document.writeln(o.constructor); // function Object() { [native code] }
document.writeln(o.constructor === Object); // true
// 自定义函数:Function()
function foo(){
alert("CodePlayer");
}
document.writeln(foo.constructor); // function Function() { [native code] }
document.writeln(foo.constructor === Function); // true
// 函数的原型:bar()
function bar(){
alert("CodePlayer");
}
document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }
document.writeln(bar.prototype.constructor === bar); // true
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
