为什么在JavaScript中为实例变量声明属性 [英] Why declare properties on the prototype for instance variables in JavaScript

问题描述

我正试图了解这种名为JavaScript的黑色艺术 - 而且，我必须承认，对此非常兴奋。我一直在寻找代码示例，主要来自easeljs，因为这是我将主要使用的。而且我有点困惑..

I'm trying to get my head around this black art called JavaScript - and, I must admit, pretty excited about it. I've been looking at code examples, mainly from "easeljs" since that is what I will be using mainly. And I'm a bit confused..

我（我想）了解使用原型之间的区别 class 变量的函数或属性，并使用 this.someProp 表示实例变量（是的，我明白那里在JavaScript中没有类。）

I (think I) understand the difference between using the prototype for functions or properties that are class variables and using this.someProp for 'instance' variables (Yes, I understand that there are no classes in JavaScript.)

我看过的代码，我用作自己代码的模板，声明 prototype 变量然后用它来引用它们

The code I have looked at, and am using as templates for my own code, declare prototype variables and then refers to them with this i.e.

在构造函数中：

this.name = name;

然后声明：

Object.prototype.name;

以后，

this.name = "Freddy";

这是在'new'调用的函数中，所以在这种情况下，据我所知，此指的是当前对象。令我困惑的是原型声明正在做什么，为什么我们将它用作实例变量？

This is within functions called with 'new' so in this case, as I understand it, this refers to the current object. What puzzles me is what the prototype declaration is doing and why do we use it for instance variables?

澄清：在下面的代码中，我看不到radius的原型声明实现了什么：

Clarification: In the following code, I don't see what the prototype declaration of radius is achieving:

(function(){
    // constructor
    function MyCircle(radius){
        this.radius = radius;
    }
    MyCircle.prototype.radius;
    this.area = function(){
        return 3.14*this.radius*this.radius;
    };
    window.MyCircle = MyCircle;
}());

推荐答案

原型上的值具有关键行为与直接在实例上设置的属性不同。试试这个：

The value on a prototype has a key behaviour that is different from a property set directly on the instance. Try this:

// Create a constructor
function A() {}

// Add a prototype property
A.prototype.name = "Freddy";

// Create two object instances from
// the constructor
var a = new A();
var b = new A();

// Both instances have the property
// that we created on the prototype
console.log(a.name); // Freddy
console.log(b.name); // Freddy

// Now change the property on the
// prototype
A.prototype.name = "George";

// Both instances inherit the change.
// Really they are just reading the
// same property from the prototype
// rather than their own property
console.log(a.name); // George
console.log(b.name); // George

如果没有原型继承，这是不可能的。

This would not possible without prototypical inheritance.

您可以使用 hasOwnProperty 方法测试属性是实例属性还是原型属性。

You can test whether the property is the instances property or the prototype property using the hasOwnProperty method.

console.log(a.hasOwnProperty("name")); // false

实例可以覆盖原型价值。

b.name = "Chris";
console.log(b.hasOwnProperty("name")); // true
console.log(a.name); // George
console.log(b.name); // Chris

并返回原型价值。

delete b.name;
console.log(b.hasOwnProperty("name")); // false
console.log(b.name); // George

这是原型继承的一个强大部分。

This is a powerful part of prototypical inheritance.

在另一种模式中：

function A() {
  this.name = "George";
}

this.name 每个新实例都会再次声明变量。

The this.name variable is declared again with every new instance.

将方法作为原型上声明的函数是有道理的。所有实例都可以共享一个函数，而不是在每个实例上重新声明函数定义。

It makes some sense to have methods as functions declared on the prototype. Rather than the function definition being re-declared on every instance, all instances can share a single function.

就变量而不是函数而言，在实例未设置自己的值的情况下，原型可能用于默认值。

In terms of variables, rather than functions, the prototype can possibly be used for default values in the case that an instance does not set its own value.

小提琴中的代码

这篇关于为什么在JavaScript中为实例变量声明属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！