实例属性与Prototype属性

Question

在下面的代码中，

ColVarId

如果使用构造函数function Person(first, last, age) { this.firstName = first; this.lastName = last; this.age = age; } Person.prototype.planet = "Earth"; p1 = new Person("David", "Beckham", 39); p2 = new Person("Lionel", "Messi", 30); 创建了多个实例p1 p2，那么

如何理解属性Person与属性planet的区别？通过在构造函数age中将planet添加为this.planet会有什么不同？

注意：了解Person属性

Answer 1

考虑在未来时我们要改变所有实例共享的原型属性的情况

function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}

Person.prototype.planet = "Earth";

p1 = new Person("David", "Beckham", 39);
p2 = new Person("Lionel", "Messi", 30);

console.log(p1.planet) // Earth

Person.prototype.planet = "Mars"

console.log(p1.planet) // Mars
console.log(p1.planet === p2.planet) // true

更改原型上的一个属性将在所有实例中更改它

Answer 2

原型属性将是从所谓的原型创建的任何对象的一部分，这包括原型链。

实例属性将是整个实例的一部分，在您的情况下，它将是任何实例的一部分，因为您在构造函数中添加它：

function A() {
   this.x = 11;
}

var instance = new A();
instance.x = 11;

以上两种情况都是将属性添加到自己的对象而不是原型中。

此外，为原型添加属性会产生副作用：

function A() {}
A.prototype.x = 11;

function B() {}
B.prototype = Object.create(A.prototype);

var instanceA = new A();
var instanceB = new B();

A.prototype.x = 12;

// Both "x" will hold 12
alert(instanceA.x);
alert(instanceB.x);

详细了解prototype chain on MDN。

关于一些OP评论

  

所以，在java术语中，age是实例成员，planet是a   静态成员。要定义静态成员，我们使用prototype属性，   我对么？ -

这是一个错误的陈述。

原型属性不是静态的，因为原型是常规对象。它只是JavaScript使用原型链来实现继承，它依赖于一个名为prototype的标准属性。

在JavaScript中没有静态。当您访问任何属性时，JavaScript的运行时将通过原型链查找它：

function A() {};
A.prototype.x = 11;

function B() {};
B.prototype = Object.create(A.prototype);

function C() {};
C.prototype = Object.create(B.prototype);

var instanceC = new C();
var x = instanceC.x;
// Once you request a property "x", the runtime will do the following process:
// 1) Is "x" in the own object? No, then 2)
// 2) Is "x" in current object's prototype? No, then 3)
// 3) Is "x" in the parent prototype? No, then 4)
// 4) And so on, until it reaches the top-level prototype, and if this has no
//    "x" property, then runtime will return "undefined"

Answer 3

实际上是内存使用情况。以下是我创建的一些描述每个问题的图片。

在下图中，每个人物实例都链接到同一个原型对象。如果创建指向同一对象的多个实例，则可以节省内存。但是，如果您将'Earth'更改为'Mars'，则每个实例都会有相同的更改。

在下图中，每个实例都将指向一个完全不同的属性，该属性专门与该实例相关联。如果你认为一个特定的星球可以改变名称，你应该这样做..否则使用原型，因为这将使用更多的资源。