试图理解JavaScript中的原型点 [英] Trying to understand the point of prototypes in JavaScript

问题描述

我意识到这已经被问了几百次，但是，我似乎不能理解JavaScript中的为什么原型的概念是正确的，适用于模仿类（是的，我知道JavaScript是一种基于原型的语言

像许多其他人一样努力让JavaScript成为我使用的日常语言，我习惯于常规的OOP类风格，因为我在Java中玩过（并且在ActionScript和PHP中使用类）。

这里是我的示例脚本，但是我不知道原型是如何工作的，我似乎不明白为什么需要它。我目前在JavaScript中理解原型：

  var Apple = function（）{
 // 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 = 红; 
 
 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（）; 
  

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

...任何帮助？ >

解决方案

...我假设原型可能意味着它共享相同的对象，每次都有一个新对象...

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

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

对于某些类型（例如number，boolean，null ，undefined或string），当你通过 this.color 更改原型对象上存在的属性时，会创建一个 color 属性。原型不受影响，因此新实例将在原型中定义默认颜色。

如果您更新了数组或对象的成员，

...为什么后面的代码不推荐？ p>

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

---

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

  var Apple = function（）{
 //这里的this是被构造的对象。因此，我们向每个创建的实例添加
 //属性rotten
 this.rotten = false; 
}; 
 
 //向原型对象添加color属性
 Apple.prototype.color =red; 
 
 //将实例上的属性color设置为new_color的值
 Apple.prototype.changeColor = function（new_color）{
 this.color = new_color ; 
}; 
 //首先检查这个实例是否有自己的color属性。如果是这样，
 //使用它。如果没有，看看原型对象，看看它是否存在。 
 Apple.prototype.getColor = function（）{
 alert（'color：'+ this.color）; 
}; 
 
 //两个新实例都有自己的烂属性，没有
 //color属性。两者都共享原型对象，所以如果color是
 //请求，它将从那里
 var apple1 = new Apple（）; 
 var apple2 = new Apple（）; 
 
 //这将为apple2实例添加一个color属性
 apple2.changeColor（green）; 
 
 //没有color属性，所以它看起来原型对象
 apple1.getColor（）; 
 
 //有一个color属性，所以它使用它而不是原型上的color
 apple2.getColor（）; 
  

I realize this has been asked hundreds of times, however, I can't seem to grasp the concept of "why" prototypes in JavaScript are proper, as apposed to imitating classes (yes, I know JavaScript is a prototypical based language - I've gathered that much).

Like many other people striving to make JavaScript an everyday language that I use, I'm use to the regular OOP class style, as I've played around in Java (and used classes in ActionScript as well as PHP). However, while I think I understand how prototypes work, I can't seem to understand why they're needed.

Here's my sample script of how I'm currently understanding prototypes in 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();

...I had assumed that maybe the prototype meant that it shared the same object instead of just creating a new object each time - however, it obviously isn't the case since both apple1 and apple2 have different colors, still (after running said script).

Then I wrote it in what's more of a object-oriented script:

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();

With the exact same results (as expected). ...Why is the latter code not recommended? I have no problem using prototypes (assuming I used them correctly), but I need to understand the concept of "why".

...Any help?

解决方案

...I had assumed that maybe the prototype meant that it shared the same object instead of just creating a new object each time...

It does. There's one prototype object that is shared among all instances created from the constructor.

...however, it obviously isn't the case since both apple1 and apple2 have different colors, still (after running said script).

For certain types (for example number, boolean, null, undefined, or string), when you change a property that exists on the prototype object via this.color for example, it will create a color property on the instance. The prototype remains unaffected so that new instances will have the default color defined in the prototype.

If you had updated a member of an Array or an Object that was referenced by a property of the prototype object, the change would be seen among all instances.

...Why is the latter code not recommended?

Because you're constructing new identical functions with the creation of each new instance instead of sharing one instance of the functions via the prototype object.

---

To expand a little more, I'd point out that when your function is called as a constructor by using the new keyword, this in the constructor is the new instance. So any property you add to this is being added to the instance.

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();

这篇关于试图理解JavaScript中的原型点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！