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?

billc.cn
– billc.cn

2015-11-11 16:08:30 +00:00
Commented Nov 11, 2015 at 16:08 — billc.cn
– billc.cn, Commented Nov 11, 2015 at 16:08
you did not modify y - add y.a = 1 below x.a = 1

messerbill
– messerbill

2015-11-11 16:13:57 +00:00
Commented Nov 11, 2015 at 16:13 — messerbill
– messerbill, Commented Nov 11, 2015 at 16:13

basilikum · Accepted Answer · 2015-11-11 16:21:24Z

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, 2015 at 16:21

answered Nov 11, 2015 at 16:13

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

refactor Over a year ago

How to change the property "a" defined on prototype ?

tdc Over a year ago

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

Misaz · Accepted Answer · 2015-11-11 16:12:14Z

2

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.

answered Nov 11, 2015 at 16:12

Misaz

4,0333 gold badges29 silver badges46 bronze badges

Comments

tdc · Accepted Answer · 2015-11-11 16:21:34Z

2

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.

edited Nov 11, 2015 at 16:21

answered Nov 11, 2015 at 16:15

tdc

5,50412 gold badges59 silver badges109 bronze badges

1 Comment

refactor Over a year ago

got the point.., since @basilikum has answered first , am marking his answer.. thanks.

Collectives™ on Stack Overflow

Function.prototype Javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related