Question

我意识到这已被问过几百次了，但是，我似乎无法理解“为什么”JavaScript中的原型是正确的，因为它模仿了类（是的，我知道JavaScript是一种基于原型的语言 - 我收集了那么多。）

像许多其他人一样努力使JavaScript成为我使用的日常语言，我习惯于常规的OOP类风格，因为我在Java中玩过（并且在ActionScript和PHP中使用过类）。然而，虽然我想我理解原型是如何工作的，但我似乎无法理解为什么需要原型。

这是我目前在JavaScript中理解原型的示例脚本：

var Apple = function() {
    // An apple?
};

Apple.prototype.color = "red";

Apple.prototype.changeColor = function(new_color) {
    this.color = new_color;
};
Apple.prototype.getColor = function() {
    alert('color: '+this.color);
};

var apple1 = new Apple();
var apple2 = new Apple();
apple2.changeColor("green");
apple1.getColor();
apple2.getColor();

...我原以为可能原型意味着它共享同一个对象，而不是每次只创建一个新对象 - 但是，显然情况并非如此，因为apple1和apple2都有不同的颜色，在运行上述脚本之后）。

然后我用更多面向对象的脚本编写了它：

var Apple = function() {
    this.color = "red";

    this.changeColor = function(new_color) {
        this.color = new_color;
    };
    this.getColor = function() {
        alert('color: '+this.color);
    };
};

var apple1 = new Apple();
var apple2 = new Apple();
apple2.changeColor("green");
apple1.getColor();
apple2.getColor();

具有完全相同的结果（如预期的那样）。 ...为什么不推荐后一个代码？我使用原型没问题（假设我正确使用它们），但我需要理解“为什么”的概念。

......有什么帮助吗？

Answer 1

...我原以为可能原型意味着它共享同一个对象，而不是每次只创建一个新对象......

确实如此。在构造函数创建的所有实例之间共享一个原型对象。

...然而，显然不是这样，因为apple1和apple2都有不同的颜色，仍然（在运行所述脚本之后）。

对于某些类型（例如数字，布尔值，空值，未定义或字符串），当您通过this.color更改原型对象上存在的属性时，它将创建color实例上的属性。原型保持不受影响，以便新实例将具有原型中定义的默认颜色。

如果您更新了由原型对象的属性引用的Array或Object的成员，则可以在所有实例中看到更改。

...为什么不推荐后一个代码？

因为您正在构建新的相同函数并创建每个新实例，而不是通过原型对象共享函数的一个实例。

为了进一步扩展，我要指出当使用new关键字将您的函数作为构造函数调用时，构造函数中的this是新实例。因此，您添加到this的任何属性都将添加到实例中。

var Apple = function() {
      // Here "this" is the object being constructed. As such, we're adding
      //   a property "rotten" to every instance created
    this.rotten = false;
};

   // adding a "color" property to the prototype object
Apple.prototype.color = "red";

   // set the property "color" on the instance to the value of "new_color"
Apple.prototype.changeColor = function(new_color) {
    this.color = new_color;
};
   // first check to see if this instance has its own "color" property. If so,
   //    use it. If not, look at the prototype object to see if it exists.
Apple.prototype.getColor = function() {
    alert('color: '+this.color);
};

// two new instances each have their own "rotten" property, and don't have a
//    "color" property. Both share the prototype object, so if "color" is 
//    requested, it will come from there
var apple1 = new Apple(); 
var apple2 = new Apple();

// This will add an "color" property to the "apple2" instance
apple2.changeColor("green");

// Doesn't have a "color" property, so it looks to the prototype object
apple1.getColor();

// Has a "color" property, so it uses that instead of the "color" on the prototype
apple2.getColor();

Answer 2

prototype允许您向类添加方法和属性，它不仅将它应用于类，还将其应用于该类的任何当前对象实例。

试图理解JavaScript中原型的重点

2 个答案: