CODEWITHSUNDEEP
javascript
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

How prototype method work?

I'm trying to understand prototypal inheritance. But unclear with the following code:

var obj1 = {
   objMethod : function(){
     return 'name: ' + this.name;
   }
};

var obj2 = {
  [[Prototype]] : obj1,
  name : 'Bhojendra'
};

So, to understand what the code is going to say, I've tried:

obj2.objMethod();
obj1.objMethod();

But throws the error. So, what the code is trying to say about prototype? And how to work with this?

Upvotes: 0

Views: 48

Answers (2)

six fingered man
six fingered man

Reputation: 2500

This is invalid code:

var obj2 = {
  [[Prototype]] : obj1,
  name : 'Bhojendra'
};

You're using spec language that's not part of actual language syntax.

There's currently no (standard) way to set the prototype object within an object literal, but it is coming in ECMAScript 6.

At that point, you'll be able to do this in browser environments and other environments that decide to support the syntax:

var obj2 = {
  __proto__ : obj1,
  name : 'Bhojendra'
};

This does currently work in some browsers, but isn't an official syntax until ECMAScript 6 is finalized with its inclusion.

So what the language spec is doing by referring to [[Prototype]] is it's making a generic reference to the next object in the prototype chain.

For example, let's say I have a constructor like this:

function Foo() {
    this.x = 123;
}

And we create an object from that constructor like this:

var foo = new Foo();

Now the foo object's prototype chain looks like this:

foo --> Foo.prototype --> Object.prototype --> null

The [[Prototype]] of the foo object is the object located at Foo.prototype. And so when you look for a property on your foo object, if it can't find it, it'll continue the search at the Foo.prototype object. It continues down the chain until it either finds your property or runs out of objects to search, and returns undefined.

So a conceptual, high level model of what prototypal inheritance is would go something like this:

The prototype chain is just a chain of objects. Let's say you want to have an object where if you can't find a property on it, it automatically looks for the property on another object. And let's say that other object is set up to look for it on yet another object. That's the prototype chain. 

my_obj -> other_obj -> another_obj

If you can't find a property on the my_obj, it'll automatically search for it on the next object in the chain and so on until it either finds it or returns undefined.

JavaScript uses "constructor" functions to set this up in a somewhat weird and confusing way. A clearer way is to set it up using Object.create().

var another_obj = {foo: "FOO"}; // `another_obj` inherits from `Object.prototype`

// prototype chain of `another_obj` is...
// another_obj -> Object.prototype -> null


var other_obj = Object.create(another_obj); // `other_obj` inherits from `another_obj`

// prototype chain of `other_obj` is...
// other_obj -> another_obj -> Object.prototype -> null


var my_obj = Object.create(other_obj); // `my_obj` inherits from `other_obj`

// prototype chain of `my_obj` is...
// my_obj -> other_obj -> another_obj -> Object.prototype -> null

Upvotes: 2

Christos
Christos

Reputation: 53958

Please try this one:

var obj1 = {
objMethod : function(){
    return 'name: ' + this.name;
    }
};

var obj2 = {
    __proto__ : obj1,
    'name' : 'Bhojendra'
};

console.log(obj2.objMethod());
console.log(obj1.objMethod());

The problem is how you define the prototype of the obj2.

Taken from here:

Objects inherit from their constructor's prototype property, not their own. The constructor's prototype is assigned to the internal [[Prototype]] property that is available in some browsers as the proto property.

Upvotes: 1

Related Questions