JavaScript Prototype.js 类的定义方式与 constructor 修复

作者:木棉

时间:2026-10-23

浏览:582

本文介绍 Prototype.js 框架中通过 Class.create() 定义类的方法。该方法通过返回构造函数并调用 initialize 实现初始化。由于重写原型对象会导致 constructor 指向错误,文章演示了如何在原型中显式指定 constructor 以修复此问题,确保实例的 constructor 正确指向原类。

文章目录

Prototype.js 类的定义与 constructor 修复

6、Prototype.js 的写类方式


具体实现代码如下:

// 这是 Prototype.js 库中的核心代码片段
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
} 
} 
} 
// 简化后的逻辑示意
function Clazz() {
return function(){
this.initialize.apply(this,arguments);
} 
} 

按照以下步骤定义一个类:


示例代码如下:

// 定义类名 Person
var Person = Class.create();
// 通过覆盖原型对象来定义 Person 的属性和方法
Person.prototype = {
initialize : function(name) {
this.name = name;
}, 
getName : function() {
return this.name;
}, 
setName : function(name) {
this.name = name;
} 
} 
// 创建实例对象
var p = new Person("jack");
console.log(p.constructor == Person);// 输出结果为 false

initialize 方法负责对象的初始化工作,类似于传统构造函数,其他方法按顺序定义在原型中即可。





这里存在一个问题,通过执行 p.constructor == Person 返回 false 可以看出,这是 Prototype.js 的一个小缺陷。原因是直接重写了 Person 的原型对象,导致 constructor 属性丢失或指向错误。为了使 constructor 能正确指向构造器,只需在重写原型时手动维护 constructor 属性即可。


修复代码如下:

Person.prototype = {
constructor : Person,// 注意这里需要显式指定
initialize : function(name) {
this.name = name;
}, 
getName : function() {
return this.name;
}, 
setName : function(name) {
this.name = name;
} 
}

完成上述修改后,再次执行 p.constructor == Person 将返回 true。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章