函数.原型Javascript

Function.prototype Javascript

本文关键字：Javascript 原型 函数      更新时间：2023-09-26

下面是我为理解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:9y：9x:1y:1

但实际输出是

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

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

x.a = 1;不会更改原型属性。它只是为x分配了一个新的"本地"属性，该属性对原型上定义的属性进行了阴影处理。

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

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

Foo.a = 9;

然后，每当您想使用或更改Foo.a时，您只需参考它即可。

因为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>

写下你所期望的。

您只更改对象（'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

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

相关文章：