Presume I have an object like this:

var Foo = {
  x: 5,
  sprite: new Image()
}

Problem: I want to initialize that sprite with the right src. However, when I use the following creation technique:

var f = Object.create(Foo);

I don't have a constructor method (aka init function) to setup sprite.src = 'cool.png';

My question:

If I am using the object literal technique, and Object.create(), when do I actually initialize some of my internal state (like the example of the new Image())

My solution:

var Foo = {
  create: function() {
    var f = Object.create(Foo);
    f.sprite.src = 'cool.png';
    return f;
  }
}

However, I don't know if that's a great pattern. I'd like to do this the "JavaScript Way" if there is a way. :)

Thanks!

Presume I have an object like this:

var Foo = {
  x: 5,
  sprite: new Image()
}

Problem: I want to initialize that sprite with the right src. However, when I use the following creation technique:

var f = Object.create(Foo);

I don't have a constructor method (aka init function) to setup sprite.src = 'cool.png';

My question:

If I am using the object literal technique, and Object.create(), when do I actually initialize some of my internal state (like the example of the new Image())

My solution:

var Foo = {
  create: function() {
    var f = Object.create(Foo);
    f.sprite.src = 'cool.png';
    return f;
  }
}

However, I don't know if that's a great pattern. I'd like to do this the "JavaScript Way" if there is a way. :)

Thanks!

• javascript
• object-create

• 1 It seems you would rather make your code plex than take advantage of the simplicity of object system. – ChaosPandion Commented Jan 31, 2011 at 20:18

5 Answers 5

I do something very similar to what you've written above, but I bine it with the module pattern:

var Vehicle = (function(){
        var exports = {};
        exports.prototype = {};
        exports.prototype.init = function() {
                this.mph = 5;
        };
        exports.prototype.go = function() {
                console.log("Going " + this.mph.toString() + " mph.");
        };

        exports.create = function() {
                var ret = Object.create(exports.prototype);
                ret.init();
                return ret;
        };

        return exports;
})();

From the outside, this exposes Vehicle.create() and Vehicle.prototype. Then if I want to make a Derived type, I can do this:

var Car = (function () {
        var exports = {};
        exports.prototype = Object.create(Vehicle.prototype);
        exports.prototype.init = function() {
                Vehicle.prototype.init.apply(this, arguments);
                this.wheels = 4;
        };

        exports.create = function() {
                var ret = Object.create(exports.prototype);
                ret.init();
                return ret;
        };

        return exports; 

})();

This pattern lets me derive types without making the error of Car.prototype = new Vehicle(), which is fail if my constructors take parameters.

As I can assume from this link you should do something like:

function ImgInstance(src){
    var img=new Image();
    img.src=src;
    return img;
}

Object.create(Foo, {sprite: {value: ImgInstance("url")}});

I think this article sums it up pretty nicely:

http://www.bennadel./blog/2184-Object-create-Improves-Constructor-Based-Inheritance-In-Javascript-It-Doesn-t-Replace-It.htm

I would simply do this:

function Image(src) {
    this.src = src;
}

function Foo() {
    this.x = 5;
    this.sprite = new Image('cool.png');
}

To cut a long story short: Don't try. The basic idea of Object.create is avoiding constructor functions. You're better off using this good old pattern:

var Foo = function (url) {
    //this.sprite.src = url; //  This will overwrite the prototype's src
    this.sprite = new Image();
    this.sprite.src = url;
};
Foo.prototype = {
    x: 5,
    sprite: new Image() // do you really want this?
};

Then use new Foo instead of Object.create.