Function.prototype Javascript

Question

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.

Possible duplicate of [How does JavaScript .prototype work?](http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work) — billc.cn, Nov 11 '15 at 16:08

basilikum · Accepted Answer · 2015-11-11T16:21:24.813

3

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.

edited Nov 11 '15 at 16:21

answered Nov 11 '15 at 16:13

basilikum

10,378
5
45
58

How to change the property "a" defined on prototype ? – refactor Nov 11 '15 at 16:16
@CleanCrispCode see my answer where I explain, but if you change an instance value it only affects that instance. if you want to change for all instances you'll need to edit the prototype definition. – tdc Nov 11 '15 at 16:22

score 2 · Answer 2 · answered Nov 11 '15 at 16:12

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.

tdc · Answer 3 · 2015-11-11T16:21:34.793

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.

got the point.., since @basilikum has answered first , am marking his answer.. thanks. — refactor, Nov 11 '15 at 16:25

Function.prototype Javascript

3 Answers3