跟我学习javascript的prototype使用注意事项

深入JavaScript中prototype的使用注意事项

在JavaScript中，prototype是一种非常重要的概念，它为对象的继承提供了基础。在使用prototype时，我们需要注意一些关键事项，以确保代码的质量和效率。以下是对这些注意事项的详细：

一、在prototype上保存方法

在JavaScript中，我们可以选择在对象的prototype上保存方法，这样可以减少内存的使用，因为每个实例不会拥有自己的方法副本，而是共享相同的方法。当我们使用这种方法时，需要注意避免覆盖原型上的方法。一旦一个实例的方法覆盖了原型上的同名方法，该实例将不再共享原型上的方法，而是使用自己的方法。当我们修改原型时，会影响到所有使用该原型的对象实例。我们需要谨慎地处理原型上的方法定义和修改。

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

在JavaScript中，我们可以使用闭包来保存私有数据。闭包允许我们在函数内部创建变量，这些变量默认是私有的，只能在函数内部访问。这对于实现对象的私有属性非常有用。使用闭包来保存私有数据也有一些缺点。由于闭包中的变量是私有的，因此无法从外部直接访问它们，这可能会导致调试困难。过度使用闭包可能会导致内存泄漏问题。在使用闭包保存私有数据时，我们需要权衡其优点和缺点。

三、原型链和继承

在JavaScript中，每个对象都有一个指向它的原型（prototype）的链接。当我们试图访问一个对象的属性时，如果该对象本身没有这个属性，那么JavaScript会在该对象的原型上查找这个属性。这就是原型链。当我们使用原型来实现继承时，需要注意避免原型污染问题。也就是说，子对象可能会无意中覆盖父对象的原型上的属性或方法。为了避免这种情况，我们需要谨慎地处理原型链和继承关系。

四、性能优化

在使用prototype时，我们还需要注意性能优化。尽管在现代的JavaScript执行引擎中，对方法的查询进行了大量优化，但我们仍然需要注意避免不必要的查找。通过将常用的方法定义在prototype上，而不是每个实例上，可以大大提高性能。我们还需要注意避免频繁地修改原型，因为这可能会导致性能下降。

三、实例状态守护：只属于实例的独特印记

在编程的世界里，有一种特殊的关系存在于类型与其实例之间——“一对多”。这就像风筝与它的线，一只风筝对应多条线。这里所说的类型，它的prototype和它所创建的实例就是这种关系。但重要的是，我们需要确保实例的独特状态不会被误放到prototype上。

以树结构为例，假如我们将子节点保存在树的类型prototype上，这就好比将所有的树叶都连接到同一根树枝上，显然是不合理的。每个树实例应该有自己的子节点集合，而不是共享一个。

让我们看看错误的代码示例：

```javascript

function Tree(x) {

this.value = x;

}

Tree.prototype = {

children: [], // 这里应该是实例状态！

addChild: function(x) {

this.children.push(x);

}

};

```

在这个例子中，所有Tree的实例都会共享同一个children数组，这显然不是我们想要的结果。正确的做法是将children作为每个实例的独立状态。

正确的代码应该是这样的：

```javascript

function Tree(x) {

this.value = x;

this.children = []; // 实例状态在此定义

}

Tree.prototype = {

addChild: function(x) {

this.children.push(x);

}

};

```

这样，每个Tree实例都有自己的children数组，保证了数据的独立性和正确性。想象一下，如果我们有很多棵树，每棵都有自己独特的树叶和枝条，这样才是正确的。

总结一下，当我们在考虑是否将状态属性保存到prototype上时，一定要明确这个属性是否应该被共享。无状态（不变）的属性可以保存在prototype上，而有状态的属性则需要谨慎考虑。在Java中，可以类比为类变量（使用static关键字修饰）。

四、慎重继承标准类型

ECMAScript的标准库虽然不大，但其中的类型如Array、Function和Date都是非常重要的。有时我们可能会考虑继承这些类型来扩展功能，但这种做法并不被推荐。

以目录类型继承Array为例：

```javascript

function Dir(path, entries) {

this.path = path;

for (var i = 0, n = entries.length; i < n; i++) {

this[i] = entries[i];

}

}

Dir.prototype = Object.create(Array.prototype); // 继承Array

```

看起来似乎没问题，但实际上存在一个陷阱。当我们尝试访问dir的length属性时，得到的结果并不是我们预期的3，而是0。这是因为length属性只有在对象是真正的Array类型时才会起作用。在JavaScript中，每个对象都有一个内部属性[[class]]，用于标识对象的类型。对于Array类型，这个属性的值就是“Array”。当我们尝试扩展Array类型时，即使我们添加了所有的方法，但仍然无法改变内部属性的值。

为了避免这种陷阱和不必要的麻烦，最好避免继承标准类型。当我们需要扩展功能时，可以考虑创建新的类型和结构，而不是尝试修改或继承现有的标准类型。在ECMAScript的世界里，每一个对象都有一个独特的[[class]]属性，它定义了对象的类型。当我们谈论数组对象时，其[[class]]值为“Array”，并且有一个特殊的属性——length。这个length属性的值，与数组中被索引的属性的数量是保持一致的。

想象一下你有一个数组对象arr，当arr[0]和arr[1]存在时，length的值就是2。如果你添加了arr[2]，那么length的值会自动更新为3。相反，如果你将length的值设为2，那么arr[2]将会被自动设置为undefined。

当你继承Array类型并创建实例时，这个实例的[[class]]属性并不是Array，而是Object。这会导致length属性无法正常工作。虽然JavaScript允许你继承内置类型，但在实践中，这并不是一个好主意。尤其是对于那些如Array、Boolean、Date、Function、Number、RegExp和String等ECMAScript标准库中的类型。

如何避免这种问题呢？一个更好的做法是使用组合而不是继承。例如，你可以创建一个Dir函数，该函数接收路径和条目作为参数，并创建一个包含这些属性的对象。你可以为这个对象添加一个forEach方法，通过代理到内部的entries属性（一个Array类型的对象）来实现该功能。

这种方式不仅避免了继承带来的问题，而且更加清晰明了。每个对象都有明确的职责和属性，不会受到继承自ECMAScript标准库类型所带来的困扰。当我们使用prototype时，需要注意不要继承那些依赖内部属性值如[[class]]来实现正确行为的构造函数。

总结一下，正确使用prototype的关键是理解对象的类型和属性，并避免继承那些可能引发问题的内置类型。希望这些注意事项能帮助你更好地理解和使用prototype，让你的代码更加健壮和易于维护。记住，正确使用prototype是编写高效、可维护代码的关键一环。在编程时，请务必留意这些细节，以确保你的代码能够按照预期运行。现在让我们结束这篇文章，并呈现最终的页面给阅读者：

Cambrian渲染完成：body已渲染成功！