When an array is prototyped as a member of a JavaScript object, it becomes a shared property among all instances

Question

When an array is prototyped as a member of a JavaScript object, it becomes a shared property among all instances

Is anyone else surprised by this behavior? It really caught me off guard... I was expecting prototyped arrays to be private to each instance of a class rather than shared across all instances.

Can someone confirm if this is the intended behavior and provide a more detailed explanation?

Take note of the commented code and how it impacts the script's behavior.

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

Thank you in advance!

javascript arrays oop class prototype

Answer 1

Answer №1

Objects in JavaScript work with a prototype system where properties are shared among objects that inherit from the same prototype. This means when creating new instances from a "class" (which doesn't truly exist in JS), they all reference the same set of properties.

However, how you interact with these inherited properties can vary:

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

In all cases, you're modifying the same object.

But if you assign a value to a property, it creates an instance-specific property rather than changing the shared prototype:

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"]

If you want each instance to have its own array, define it within the constructor:

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

Using this inside the constructor ensures that data is specific to each instance while shared methods should be assigned to the prototype.

For further insights, check out Details of the object model which explains the differences between class-based and prototype-based languages.

Update:

You can access an object's prototype using Object.getPrototypeOf(obj) (may not work in older browsers), where

Object.getPrototypeOf(a) === Object.getPrototypeOf(b)

would return true, indicating both point to the same underlying object - the Foo.prototype.

Answer 2

Objects in JavaScript work with a prototype system where properties are shared among objects that inherit from the same prototype. This means when creating new instances from a "class" (which doesn't truly exist in JS), they all reference the same set of properties.

However, how you interact with these inherited properties can vary:

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

In all cases, you're modifying the same object.

But if you assign a value to a property, it creates an instance-specific property rather than changing the shared prototype:

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"]

If you want each instance to have its own array, define it within the constructor:

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

Using this inside the constructor ensures that data is specific to each instance while shared methods should be assigned to the prototype.

For further insights, check out Details of the object model which explains the differences between class-based and prototype-based languages.

Update:

You can access an object's prototype using Object.getPrototypeOf(obj) (may not work in older browsers), where

Object.getPrototypeOf(a) === Object.getPrototypeOf(b)

would return true, indicating both point to the same underlying object - the Foo.prototype.

Answer 3

Answer №2

The action is accurate. [] is converted to new Array() during execution, however, only a single array of this nature is generated.

To put it differently, Obj.prototype = {...} is processed in the same manner as any standard assignment.

Answer 4

The action is accurate. [] is converted to new Array() during execution, however, only a single array of this nature is generated.

To put it differently, Obj.prototype = {...} is processed in the same manner as any standard assignment.

Answer 5

Answer №3

Creating a new instance of an object in JavaScript using the var exp1 = new C() syntax results in setting exp1.[[Prototype]] = C.prototype. This means that properties accessed on the instance are first checked on the object itself, and if not found, it looks in the [[Prototype]] chain. Essentially, any definitions made in the prototype are shared among all instances, allowing changes to the prototype to reflect across all existing instances.

Answer 6

Creating a new instance of an object in JavaScript using the var exp1 = new C() syntax results in setting exp1.[[Prototype]] = C.prototype. This means that properties accessed on the instance are first checked on the object itself, and if not found, it looks in the [[Prototype]] chain. Essentially, any definitions made in the prototype are shared among all instances, allowing changes to the prototype to reflect across all existing instances.

When an array is prototyped as a member of a JavaScript object, it becomes a shared property among all instances

Answer №1

Answer №2

Answer №3

Similar questions

Problem encountered with sorting single and double digit numbers using NSSortDescriptor

the final value in a pandas dataframe

Assign the Firebase token to the JavaScript cookie value

Trying to assign a value to a property that is not defined

Are you interested in using jQuery and/or AJAX to retrieve the latest images from a website?

Remove the class upon clicking

What is the process to retrieve the username from my system and display it in a web browser?

Unable to locate additional elements following javascript append utilizing Chrome WebDriver

The Great Gatsby - Unable to access property 'component---src-pages-index-jsx' due to its undefined nature

What is the reason for the absence of Duplex Stream in the Web Streams API?

Limit the elements in an array within a specified range of dates

Ways to retrieve the date of the chosen <td> cell in a calendar

Determine the outcome of the assessment quiz

Could Ramda assist in enhancing pipeline/composition processes with a logging feature?

Automatically relaunch NodeJS application upon app failure

Steps to efficiently enumerate the array of parameters in the NextJS router:

Disable form input fields while keeping all other elements enabled

Tips on preventing further input in this code - a script designed to take in a 1D array of undetermined length

Tips for applying various CSS properties to a single element using styled-components

Unleashing the power of eventListeners through exponential re-rendering upon state updates