Setting prototype on object created through Object.create

Question

I'm having some trouble figuring out how the prototype chain is set up given the following code.

var Model = {
    prototype: {
        init: function(){},
        log: function(){ console.log('instance method log was called') }
    },
    log: function(){ console.log('class method log was called') },
    create: function() {
        var object = Object.create(this);
        object.parent = this;
        object.prototype = object.fn = Object.create(this.prototype);
        return object;
    },
    init: function() {
        var instance = Object.create(this.prototype);
        instance.parent = this;
        instance.init.apply(instance, arguments);
        return instance;
    }
}

var User = Model.create();
User.log(); // 'class method log was called'

// create a new method after creation
Model.warn = function() { console.warn('warn was called') }

User.warn() // 'warn was called'

var user = User.init();
user.log(); // 'instance method log was called'

Specifically this line confuses me in the create method:

object.prototype = object.fn = Object.create(this.prototype);

I understand how the create method is creating a new object who's prototype points back to Model, but the penultimate line seems to overwrite that prototype with a new object (Model.prototype). However, it seems the original prototype is still intact, as I can add methods to Model even after creating a new object, and the new object can still access it.

can someone shed some light on what is actually happening?

Edit - I should point out this code comes from Javascript Web Applications by O'reilly

It's a little unclear as to what confuses you, but perhaps you think that this and object are referring to the same thing in Model.create. If so, they're not. this is a reference to Model, but object is a reference to a new object created from Object.create(this). So when you do object.prototype = ...whatever, you're not overwriting Model.prototype, but you are shadowing the .prototype property that exists in the prototype chain of object by placing a property with the same name directly on object. — user1106925
– user1106925, Commented Jul 28, 2012 at 20:12
I understand 'this' being Model and 'object' being a new object, rather what confuses me is that initially Object.create(this) is setting the new objects prototype to be 'Model', but then a few lines later object.prototype is reset to be Object.create(this.prototype). That's the line I don't understand. To me it looks like object.prototype is now set to an object whose prototype is set to Model.prototype (the init and log functions) but the returned object instead has access to the methods directly on Model. — jhummel
– jhummel, Commented Jul 29, 2012 at 2:53
I think I see what's confusing you. The .prototype property that is being set on object has nothing to do with the prototype chain itself. Once you have created an object, it's not possible to change the prototype chain. So when a value is written to object.prototype, it doesn't interfere at all with the relationship between object and Model. The only time setting a .prototype property has an effect on the prototype chain, is when you change the .prototype property of a constructor function, and then only future objects made from the constructor are affected by that change. — user1106925
– user1106925, Commented Jul 29, 2012 at 3:22
I'm so glad to have found this question; I was confused about the very same snippet from the book. Using a .prototype property is definitely a pitfall for someone new to JS. — sethro
– sethro, Commented Jun 19, 2013 at 2:27

A. Matías Quezada · Accepted Answer · 2012-10-04 21:52:55Z

Ok. so just for delete noise code, you are asking about this code:

var Model = {
    prototype: {},
    create: function() {
        var object = Object.create(this);
        object.prototype = Object.create(this.prototype);
        return object;
    }
};

The first line of Model.create() function is easy, it creates a new object who extends (prototypes) Model.

But you are counfused because the next line overwrites the object "prototype" property. It's not the object's prototype, the object prototype is still Model and it's stored on a hidden property called [[Prototype]], the property what the code is modifying has nothing to do with the object's [[Prototype]] it only has the same name. Let's change the name to understand it and it will be the same:

var Model = {
    blablabla: {},
    create: function() {
        var object = Object.create(this);
        object.blablabla = Object.create(this.blablabla);
        return object;
    }
};

It extends Model.blablabla so when you change object.blablabla it does not affect Model.blablabla.

var SubModel = Model.create();
SubModel.blablabla.newMethod = function() { };
console.log(Model.blablabla.newMethod); // undefined

Many times choose the right name for a field is more important than what it looks like.

Collectives™ on Stack Overflow

Setting prototype on object created through Object.create

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related