Function.prototype Javascript

Question

以下是我编写的用于理解Function.prototype的示例JS代码

<script>

    function Foo() {

    }

    Foo.prototype = {
        a: 9
    };

    var x = new Foo();
    var y = new Foo();

    console.log('x : ' + x.a + '\n');
    console.log('y : ' + y.a + '\n');

    x.a = 1;

    console.log('x : ' + x.a + '\n');
    console.log('y : ' + y.a + '\n');


</script>

我期望上述代码的执行将导致以下输出

x：9 y：9 x：1 y：1

但是实际输出是

x：9 y：9 x：1 y：9

有人可以解释一下为什么最后一个console.log打印9而不是1的原因。

Answer 1

xa = 1; 不会更改prototype属性。 它只是为x分配了一个新的“本地”属性，该属性遮盖了原型中定义的属性。

x.a === 1; //true because x.a === 1;
y.a === 9; //true because y.__proto__.a === 9;

您可以使用Foo.prototype.a = 1;更改原型属性Foo.prototype.a = 1; 。 但我要这样说：至少不常见使用原型。 通常，原型包含方法，而不包含实例之间共享的属性。 您通常会在实例本身上定义对象的属性。 定义（或仿真）静态属性的一种常用方法如下：

Foo.a = 9;

然后，每次您要使用或更改它时，您都简单地参考Foo.a

Answer 2

因为x和y是单独的实例。 您可以将相同的实例设置为变量x和y

<script>

function Foo() {

}

Foo.prototype = {
    a: 9
};

var x = new Foo();
var y = x;
// the same is:
// var x, y;
// x = y = new Foo();

console.log('x : ' + x.a + '\n');
console.log('y : ' + y.a + '\n');

x.a = 1;

console.log('x : ' + x.a + '\n');
console.log('y : ' + y.a + '\n');


</script>

那写你所期望的。

Answer 3

您只需要在对象的一个​​实例（'x'）上而不是在原型上更改a属性。

为了使原型继承正常工作，您必须在原型对象本身上进行设置，然后两个实例都将进行更改。

    <script>

    function Foo() {

    }

    Foo.prototype = {
        a: 9
    };

    var x = new Foo(); // x.a === 9
    var y = new Foo(); // y.a === 9

    console.log('x : ' + x.a + '\n'); // === x: 9
    console.log('y : ' + y.a + '\n'); // === y: 9

    x.a = 1; // changed only for the 'x' instance

    console.log('x : ' + x.a + '\n'); // === x: 1, because you changed it
    console.log('y : ' + y.a + '\n'); // y: 9, because it inherited from the prototype.

</script>

如果您希望两个实例（实例x和实例y）都具有=== 9，则需要修改原型。

Foo.prototype = { a: 1 };
var x = new Foo(); // x.a === 1
var y = new Foo(); // y.a === 1

修改对象的实例并不会修改原始对象的原型，而只是修改它的特定实例。