why property in prototype of an object can not modified by object?

Question

When I execute the following js code, I found something weird：

function Contact(name, email) {
    this.name = name;
    this.email = email;
}

Contact.prototype = {
    a: 10,
    b: 20
};

var obj = new Contact('ssj', 'ssh');
obj.a = 'ssjssh';
console.log(obj);
console.log(Contact.prototype);
//output: { name: 'ssj', email: 'ssh', a: 'ssjssh' },{ a: 10, b: 20 }

so my question is that why obj.a = 'ssjssh' only add a property in obj, instead of change the property a in Contact.prototype?

Barmar · Accepted Answer · 2015-12-24 09:24:38Z

4

Properties in the prototype are only used as a default when reading them. This allows all the members of a class to get the same initial or default values for properties. But each object can override these default properties by having its own values. When you assign to the property, it always goes to the object's own properties, otherwise there wouldn't be any way to override the defaults.

answered Dec 24, 2015 at 9:24

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

Zakaria · Accepted Answer · 2015-12-24 09:30:15Z

2

From Eloquent Javascript by Marijn Haverbeke :

When you add a property to an object, whether it is present in the prototype or not, the property is added to the object itself, which will henceforth have it as its own property. If there is a property by the same name in the proto- type, this property will no longer affect the object. The prototype itself is not changed.

answered Dec 24, 2015 at 9:30

Zakaria

15.1k22 gold badges86 silver badges126 bronze badges

Comments

Dmitri Pavlutin · Accepted Answer · 2015-12-24 10:15:32Z

This is the way object properties are queried and modified.
Initially a is not an own property of the obj, but inherited (contrary to name and email, which are own properties). When querying it, the interpreter searches for the property in the prototype chain, and finds the a in the Contact.prototype.
When you assign a value to inherited a, JavaScript creates a new own property in the object, without affecting the prototype. Any later modifications of the own property do not affect the prototype. The inherited property will now be hidden.
If you would like to modify directly the prototype, just use Contact.prototype.a = 'new value'. But notice that this will affect all the instances of the Contact constructor, which use the inherited a property.
Use the method obj.hasOwnProperty('a') to check if the property is own or inherited.

subi_speedrunner · Accepted Answer · 2015-12-24 09:43:21Z

The statement var obj = new Contact('ssj', 'ssh'); will create a new object newObj (assume jst for reference) internally and it will return newobj.

Before returning newObj, the statement

this.name = name;
this.email = email;

will set the newObj's name & email property to 'ssj' & 'ssh' as because of implicit binding 'this' is bound to newobj.

Now after returning obj will point to newObj with values as name-'ssj' & email-'ssh'

After this you are creating a new property "a" on obj.

newObj which we created previously is pointing internally to Contact.prototype via [[prototype]] link. so newObj & Contact.prototype are both different object & you are setting property on newobj.

And by the concept of shadowing and a being not marked as read only it will not traverse up the prototype chain, instead it will set the a property directly on the immediate object.

Collectives™ on Stack Overflow

why property in prototype of an object can not modified by object?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related