Javascript:为什么实例能够更改数组，但不能更改原型(prototype)中定义的其他属性？

Question

我很困惑为什么Person的实例(例如person1)能够更改属性jobs，它是一个数组，在Person.prototype中定义，但不是在name和height等其他属性中定义。当 person1 尝试修改其属性后，person2 从 Person.prototype 调用属性时，就会出现这种情况。我很欣赏任何想法或想法。谢谢。

function Person(){

}

Person.prototype = {
    constructor : Person,
    name: "Hello",
    height: 6,
    jobs: ['developer', 'student'],
    getInfo: function(){
        alert("My name is "+this.name+" and my height is: "+this.height+" feet");
    }
}

var person1 = new Person();
person1.height = 5;
person1.name = "World";
person1.jobs.push('cook');
alert(person1.jobs); //developer, student, cook
alert(person1.height); //5
alert(person1.name); //World

var person2 = new Person();
alert(person2.height); //6
alert(person2.jobs); //developer, student, cook
alert(person2.name); //Hello

Answer 1

因为当你这样做时

person1.height = 5;

person1 引用的对象获取其自己的 height 属性，该属性隐藏了它从其继承的height原型(prototype)。

但是当你这样做时:

person1.jobs.push('cook');

您不是分配给jobs，您只是更改jobs引用的状态(数组)。所以你要改变原型(prototype)上的那个。

如果你这样做了:

person1.jobs = ['cook'];

这就像我们的 height 示例，person1 将获得其自己的 jobs 属性。如果你想保留原型(prototype)的工作，你可以先复制数组:

person1.jobs = person1.jobs.slice();
person1.jobs.push('cook');

让我们看看内存中发生了什么:

当您创建 Person 函数及其 Person.prototype 属性上的对象时，我们会在内存中保存以下内容:

       +------------------------------------------+       |                                          |       |                                          |        \  +------------+                         |Person---->| (function) |                         |           +------------+     +---------------+   |                         | prototype  |---->|   (object)    |   |                         +------------+     +---------------+   |                                            | constructor   |---+                                            | getInfo       |------>(not shown)                              | name: "Hello" |                                                | height: 6     |      +----------------+                              | jobs          |----->|     (array)    |                              +---------------+      +----------------+                                                     | 0: "developer" |                                                     | 1: "student"   |                                                     +----------------+

Then we do

var person1 = new Person();

我们有这个:

       +----------------------------------------------+       |                                              |       |                                              |        \  +------------+                             |Person---->| (function) |                             |           +------------+         +---------------+   |                         | prototype  |-------->|   (object)    |   |                         +------------+       / +---------------+   |                                             |  | constructor   |---+                                             |  | getInfo       |------>(not shown)                               |  | name: "Hello" |                                                 |  | height: 6     |      +----------------+                               |  | jobs          |----->|     (array)    |                               |  +---------------+      +----------------+                               |                         | 0: "developer" |                               |                         | 1: "student"   |                               |                         +----------------+           +---------------+   |person1--->|   (object)    |   |           +---------------+   |           | [[Prototype]] |---+           +---------------+

When you do this:

person1.height = 5;

person1 获取其自己的 高度(其他一切保持不变):

                              (to Person.prototype)           +---------------+   |person1--->|   (object)    |   |           +---------------+   |           | [[Prototype]] |---+           | height: 5     |           +---------------+

但是执行 person1.jobs.push('cook'); 只是改变了 jobs 指向的数组的状态:

       +----------------------------------------------+       |                                              |       |                                              |        \  +------------+                             |Person---->| (function) |                             |           +------------+         +---------------+   |                         | prototype  |-------->|   (object)    |   |                         +------------+       / +---------------+   |                                             |  | constructor   |---+                                             |  | getInfo       |------>(not shown)                               |  | name: "Hello" |                                                 |  | height: 6     |      +----------------+                               |  | jobs          |----->|     (array)    |                               |  +---------------+      +----------------+                               |                         | 0: "developer" |                               |                         | 1: "student"   |                               |                      +->| 2: "cook"      |                               |                      |  +----------------+           +---------------+   |                      |person1--->|   (object)    |   |                      |           +---------------+   |          NOTE WHAT   |           | [[Prototype]] |---+          CHANGED ----+           | height: 5     |           +---------------+