原型为数组的 Javascript 对象成员被所有类实例共享

IT技术 javascript arrays oop class prototype
2021-01-29 01:56:56

以前有人注意到这种行为吗？这真的让我失望了......我原本希望原型数组对每个类实例都是私有的，而不是在所有类实例之间共享。

有人可以验证这是正确的行为，并可能更详细地解释这种行为吗？

注意注释的代码以及它如何影响脚本的行为。

<html>
<head>

<script type="text/javascript">

function print_r( title, object ) {

    var output = '';
    for( var key in object ) {

        output += key + ": " + object[ key ] + "\n";

    }

    output = title + "\n\n" + output;

    alert( output );

}

function Sandwich() {

    // Uncomment this to fix the problem
    //this.ingredients = [];

}

Sandwich.prototype = {

    "ingredients" : [],
    "addIngredients" : function( ingArray ) {

        for( var key in ingArray ) {

            this.addIngredient( ingArray[ key ] );

        }

    },
    "addIngredient" : function( thing ) {

        this.ingredients.push( thing );

    }

}

var cheeseburger = new Sandwich();
cheeseburger.addIngredients( [ "burger", "cheese" ] );

var blt = new Sandwich();
blt.addIngredients( [ "bacon", "lettuce", "tomato" ] );

var spicy_chicken_sandwich = new Sandwich();
spicy_chicken_sandwich.addIngredients( [ "spicy chicken pattie", "lettuce", "tomato", "honey dijon mayo", "love" ] );

var onLoad = function() {

    print_r( "Cheeseburger contains:", cheeseburger.ingredients );

};

</script>

</head>
<body onload="onLoad();">
</body>
</html>

非常感谢。

3个回答

对象的原型只是一个对象。原型属性在从该对象继承的所有对象之间共享。如果您创建“类”的新实例（类在 JS 中无论如何都不存在），即从原型继承的对象，则不会制作属性的副本。

它只会对您如何使用这些继承的属性产生影响：

function Foo() {}

Foo.prototype = {
    array: [],
    func: function() {}
}

a = new Foo();
b = new Foo();

a.array.push('bar');
console.log(b.array); // prints ["bar"]

b.func.bar = 'baz';
console.log(a.func.bar); // prints baz

在所有这些情况下，您总是使用同一个对象。

但是，如果您为对象的属性赋值，则该属性将在对象本身而不是其原型上设置/创建，因此不会共享：

console.log(a.hasOwnProperty('array')); // prints false
console.log(a.array); // prints ["bar"]
a.array = ['foo'];
console.log(a.hasOwnProperty('array')); // prints true
console.log(a.array); // prints ["foo"]
console.log(b.array); // prints ["bar"]

如果要为每个实例创建自己的数组，则必须在构造函数中定义它：

function Foo() {
    this.array = [];
}

因为这里，this指的new是调用时生成的对象new Foo()。

经验法则是：实例特异性数据应该被分配到该实例的内部构造，共享数据（如方法）应该被分配给原型。

您可能想阅读对象模型的详细信息，其中描述了基于类的语言与基于原型的语言之间的差异以及对象的实际工作方式。

更新：

您可以通过Object.getPrototypeOf(obj)（可能不适用于非常旧的浏览器）访问对象的原型，并Object.getPrototypeOf(a) === Object.getPrototypeOf(b)为您提供true. 它是同一个对象，也称为Foo.prototype。

是的，抱歉，这就是我说“覆盖实例对象上的原型属性”时的意思-在这种情况下，您正在影响实际对象，并且仅影响该实例。另外，感谢您提供指向对象模型详细信息的链接。我需要用细齿梳通读一遍。
2021-03-21 01:56:56
@Dan：你的第二条评论是绝对正确的，我只是无法表达得这么好；）
2021-03-22 01:56:56
嗯……是的，有道理。我错误地期望原型能够像类定义那样运行。令人困惑的是，如果 Foo.prototype.intValue = 5，而你说 b.intValue = 4，a.intValue 仍然 = 5。所以它实际上只适用于类的对象/数组成员。
2021-03-24 01:56:56
再说一次，如果你说 b.array = ['whatever']，那么 a.array 也不会改变。因此，使用“=”运算符的显式赋值会覆盖实例对象上的原型属性。
2021-03-27 01:56:56
@Dan：不，我也在我的代码中展示了a.array = ['foo'];不会改变原型。但是在您使用整数的情况下以及在我使用数组的情况下，您正在为属性分配一个全新的值。如果你这样做，属性将设置在实际对象上。但是如果你这样做了a.array.push(1)，你就不是在设置一个属性，你只是在调用包含在数组中的一个方法a.array。您没有更改参考。
2021-04-07 01:56:56

行为是正确的。 []被tranlated到new Array()在运行，但曾经创造只有一个这样的阵列。

换句话说，Obj.prototype = {...}就像任何其他分配一样执行。

当你这样做时var exp1 = new C()，JavaScript 设置exp1.[[Prototype]] = C.prototype。然后，当您访问实例的属性时，JavaScript 首先直接检查它们是否存在于该对象上，如果不存在，则在[[Prototype]]. 这意味着您在原型中定义的所有内容都被所有实例有效地共享，您甚至可以稍后更改原型的部分并使更改出现在所有现有实例中。

其它你可能感兴趣的问题
上一篇动态设置文件输入的值 下一篇为什么我应该由 setTimeout 安排的函数调用会立即执行？