CODEWITHSUNDEEP
javascript
Abid
Abid

Reputation: 7227

Javascript prototype inheritence

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 ?

Upvotes: -1

Views: 129

Answers (3)

Nivesh
Nivesh

Reputation: 2603

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.

Upvotes: 1

Alnitak
Alnitak

Reputation: 339786

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.

Upvotes: 2

joevallender
joevallender

Reputation: 4293

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

Upvotes: 1

Related Questions