CODEWITHSUNDEEP
javascriptprototypal-inheritance
netpoetica
netpoetica

Reputation: 3425

Javascript Prototype Quirk - Can Anyone Explain This?

My expectation from the following code would be that if I checked a.name, it would search the prototype and return it as it was declared. Can anyone pinpoint what it is that is preventing JS from acknowledging my prototype?

var obj = function(parent){
    return {
        prototype: parent
    }
};

var me = { name: 'keith' };

var a = new obj(me)
// => undefined

a.name
// => undefined

a.prototype.name
// => "keith"

Upvotes: 5

Views: 197

Answers (5)

Bergi
Bergi

Reputation: 664346

A property named "prototype" is just a property, it does not point to the object from which the object inherits. Use Object.getPrototypeOf or the non-standard __proto__ property to get that.

So what your function obj(me) returns is just an object with a property "prototype" which points to an object with a property "name" which points to the string keith. As your function returns an object, it makes no difference whether it is called with the new keyword or not.

For inheritance, the "prototype" property of the constructor function [object] is of concern. Every object created by this constructor (which does not return an object) with the new keyword inherits from the object to which the "prototype" property of the constructor points. So you could do this:

var Constructor = function() {
    console.log(this); // logs the currently created object
    // return nothing
}
Constructor.prototype = { name: 'keith' };

var a = new Constructor(); // logs an empty object
Object.getPrototypeOf(a) === Constructor.prototype; // true
a.name; // "keith" - inherited

Upvotes: 1

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

The problem here is that you are returning a property named prototype with the value parent, which is an object, so you are returning the pair prototype = {name = 'keith'} and when you call new obj, you are adding to the prototype of a a new property named prototype.

You just need a bit change, I need this is what you are trying to do. This will work, just be carefull with overload properties.

var obj = function(parent){
   for(var propt in parent){
      this[propt] = parent[propt];
   }
}

var me = { name: 'keith' };
var a = new obj(me);
console.log(a);
// => Object { name="keith"}
console.log(a.name);
// => "keith"

Edit: If you are looking for inheritance using prototype, you should read this or try TypeScript, a new javascript typed and OO library

Upvotes: 0

valentinas
valentinas

Reputation: 4337

In the function you are not touching the function prototype. You are just returning a new object with property "prototype" with parent as a value. Therefore you can only access it through that property.

It seems that you are trying to implement inheritance, here's a good read about that: Prototypal Inheritance in JavaScript and Classical Inheritance in JavaScript

Upvotes: 1

rodmjay
rodmjay

Reputation: 549

You seem to have overwritten the real prototype with a fake one.

Upvotes: -1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

I suspect you're overwriting the prototype property in a similar way to how you can overwrite the undefined "value".

Upvotes: 0

Related Questions