CODEWITHSUNDEEP
javascript
refactor
refactor

Reputation: 15044

Function.prototype Javascript

Below is the sample JS code I have written to understand Function.prototype

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

I was expecting that the execution of above code will result in below output

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

But the actual output is

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

Can someone please explain why the last console.log prints 9 instead of 1.

Upvotes: 1

Views: 101

Answers (3)

tdc
tdc

Reputation: 5464

You're only changing the a property on one instance of the object ('x'), not on the prototype.

For the prototypal inheritance to work you must set it on the prototype object itself, then both instances will have the change.

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

If you want both instances (instance x and instance y) to have a === 9, then you'd need to modify your prototype.

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

Modifying an instance of an object does not modify the original object's prototype, just that particular instance of it.

Upvotes: 2

basilikum
basilikum

Reputation: 10528

x.a = 1; does not change the prototype property. It just assigned a new "local" property to x, that shadows the one defined on the prototype.

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

You can change the prototype property with Foo.prototype.a = 1;. But let me say this: This use of prototype is at least uncommon. Normally, the prototype contains methods and not properties that are shared between instances. Properties of the objects, you would usually define on the instance itself. One common way to define (or emulate) static properties is the following:

Foo.a = 9;

And then you simple refer to Foo.a, every time you want to use or change it.

Upvotes: 3

Misaz
Misaz

Reputation: 3985

Because x and y is separate instance. You can set into variable x and y the same instance

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

That write what you expect.

Upvotes: 2

Related Questions