JavaScript prototype使用注意事项

一、在prototype上保存方法

在使用构造函数创建对象时，如果直接在构造函数内部定义方法，例如：

function User(name, passwordHash) { 
 this.name = name; 
 this.passwordHash = passwordHash;
 // 每个实例都会生成独立的方法副本
 this.toString = function() { 
  return "[User " + this.name + "]"; 
 }; 
 this.checkPassword = function(password) { 
  return hash(password) === this.passwordHash; 
 }; 
}

虽然功能可行，但会为每个创建的 User 实例生成 toString 和 checkPassword 方法的独立拷贝。这意味着内存中会存在大量重复的代码片段，造成资源浪费。如下方图示展示了实例与独立方法的关系：

然而，当我们将这些方法定义在 User.prototype 对象上时，情况则截然不同：

此时，toString 和 checkPassword 方法仅存在一份拷贝，并被所有 User 实例通过原型链共享。尽管早期观点认为在实例上查找方法可能更快（因为先在实例本身寻找），但在现代 JavaScript 引擎的高度优化下，这种查询时间的差异微乎其微，可以忽略不计。相比之下，将方法保存在 prototype 上带来的内存节省优势是显著的。

二、使用闭包来保存私有数据

JavaScript 原生语法对信息隐藏的支持较弱。通常通过 this.name 定义的属性默认都是公共的，外部可以直接读取或修改。即便社区约定使用下划线（如 this._name）前缀来表示私有，这在本质上仍只是提示作用，无法从语言层面阻止访问。
若需实现真正的私有数据，可以利用闭包的局部变量特性：

function User(name, passwordHash) {
 // 局部变量，仅在函数作用域内可见
 var localName = name;
 var localPasswordHash = passwordHash;
 
 this.toString = function() { 
  return "[User " + localName + "]";
 };

在这种模式下，localName 不会被挂载为实例的属性，而是被包裹在函数的闭包中。实例上的方法依然可以访问这些变量，但外部代码完全无法触及它们。
此方法的唯一缺点是需要牺牲一定的性能与内存：因为这些利用了局部变量的方法必须定义在每个实例自身上（如 this.toString = function...），而不能放入 prototype。因此，这种方法适合对数据安全有严格要求的场景。

三、实例状态只保存在实例对象上

prototype 代表了类的公共部分，而实例的状态应该严格保留在各自的实例对象上。将可变的状态数据放置在 prototype 上会导致所有实例共享同一份数据，从而引发严重的逻辑错误。
以下是一个典型的错误案例——树结构实现：

function Tree(x) {
 this.value = x;
}
Tree.prototype = {
 // 错误！所有树实例将共享同一个数组 children
 children: [], 
 addChild: function(x) {
  this.children.push(x);
 }
};

var left = new Tree(2); left.addChild(1); left.addChild(3);
var right = new Tree(6); right.addChild(5); right.addChild(7);

// 打印结果出乎意料：top.children 包含了所有左子树和右子树的节点

这种共享导致的状态错乱如下图所示：

正确的做法是在构造函数内初始化状态属性，确保每个实例拥有独立的内存空间：

function Tree(x) {
 this.value = x;
 this.children = []; // 正确！每个实例拥有独立的 children 数组
}
Tree.prototype = {
 addChild: function(x) {
  this.children.push(x);
 }
};

如此修改后，状态分布符合预期（见下图示意）：

总结而言，只有当属性是不可变的（如方法），或者确实需要作为全局类状态（类似 Java 中的 static 变量）时，才应将其放在 prototype 上。

四、避免继承标准类型

为了简化开发，有些程序员倾向于让自定义对象直接继承 ECMAScript 内置的标准类型（如 Array, Date, RegExp 等）。但这种做法极不安全，应避免使用。示例如下：

function Dir(path, entries) {
 for (var i = 0; i < entries.length; i++) {
  this[i] = entries[i];
 }
}
Dir.prototype = Object.create(Array.prototype);
var dir = new Dir("/tmp/mysite", ["index.html", "script.js"]);
dir.length; // 结果为 0，而非预期的 2！

该问题源于 JavaScript 的内部 [[class]] 属性机制。对于真实的数组对象，length 属性具有特殊性：它会自动根据对象中被索引属性的个数动态调整。当你继承 Array.prototype 时，生成的 dir 对象其内部 [[class]] 依然是 Object，而非 Array。因此，标准的 length 行为无法触发。
你可以使用以下代码验证对象类型：

Object.prototype.toString.call(dir); // 返回 "[object Object]"
Object.prototype.toString.call([]); // 返回 "[object Array]"

最佳实践：
对于依赖内置类型特殊内部行为的对象，请不要使用原型链继承。建议使用组合模式（Composition），即在内部持有该类型的实例，并通过代理方式转发方法调用。例如实现一个目录对象时，可以这样处理：

function Dir(path, entries) {
 this.path = path;
 this.entries = entries; // 持有内部的 Array 对象
}
Dir.prototype.forEach = function(f, thisArg) {
 // 将操作代理给内部真实的 Array
 if (typeof thisArg === "undefined") thisArg = this;
 this.entries.forEach(f, thisArg);
};

总而言之，请避开对 Array、Boolean、Date、Function、Number、RegExp、String 等标准内置类型的直接继承，以确保程序行为的可预测性与正确性。

以上就是JavaScript prototype使用注意事项的详细内容，更多关于JavaScript前端开发的资料请关注本站其它相关文章！