Javascript prototype inheritence

Question

The below code is taken from http://bonsaiden.github.com/JavaScript-Garden/

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// Set Bar's prototype to a new instance of Foo
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// Make sure to list Bar as the actual constructor
Bar.prototype.constructor = Bar;

I have come across this explanation multiple times "When accessing the property of an object, first it checks if the object its self has that property and if not than it goes to the prototype of that object to look for the property and so on."

But I am struggling to understand ho this actually works because of the behavior of the following code

var test1 = new Bar();
var test2 = new Bar();

test1.value = 24;

now value is not part of the test1 object but it is a property of its prototype which is a Foo Object, and since the prototype is a Foo Object all instances of Bar will share the value property, What i expect the above code to do is to set that value property to 24 but instead it creates a new property named 'value' to the test1 object and assigns it 24 leaving the value property in the prototype to its initial value 42. well this doesn't sound like sharing. test2.value still has a value of 42. when i look at the prototype chain in the firebug console it shows me that test1 has a value property with 24 and its prototype has a value property with 42.

This is very confusing to. Has any one you figured out why it behaves this way ?

Alnitak · Accepted Answer · 2012-04-12T12:55:18.403

2

The prototype chain is only used when reading properties and only if the property is not found in the object itself - it's not used when writing property values.

As soon as you write a property into an object (test1.value = 24) any existing "shared" property in the prototype with the same name is hidden, and all subsequent reads will access the value now store in the object itself.

edited Apr 12 '12 at 12:55

answered Apr 12 '12 at 12:48

Alnitak

334,560
70
407
495

score 1 · Answer 2 · edited May 23 '17 at 12:31

I think you want .hasOwnProperty()

If that is what you are looking for, someone else has eloquently summed it up here hasOwnProperty in javascript

EDIT

Having read the other answer, then properly read the questions this time... I'd like to retract that ;-)

...

Or maybe it is what you are looking for, it you want to check whether the property had been set on the 'hash' before doing something else.

I've read this too many times and confused I think, I'll shut up now

score 1 · Answer 3 · answered Apr 08 '16 at 03:44

Just append the following lines at the end to check what's going on.

var test1 = new Bar();
test1.value = 30;

console.log(test1.hasOwnProperty("value"));
console.log(test1.value);

delete test1.value;

console.log(test1.hasOwnProperty("value"));
console.log(test1.value);

Output:

true
30
false
42

Terms:

hasOwnProperty only returns true is key is the local property of the object.
delete is used to delete local property it does not touch inherited properties.

Explanantion If we assign a value then it creates it's own local property and overrides the prototypal property. And thus, as local properties has higher preference than prototypal properties, they are read first.

Javascript prototype inheritence

3 Answers3