如何使用 ES5 Object.create 和对象字面量语法模拟构造函数？

Question

假设我有一个像这样的对象：

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

问题：我想用正确的 src 初始化该精灵。但是，当我使用以下创建技术时：

var f = Object.create(Foo);

我没有构造函数方法（也称为 init 函数）来设置 sprite.src = 'cool.png';

我的问题：

如果我使用对象文字技术和 Object.create()，我什么时候真正初始化一些内部状态（例如 new Image() 的示例）

我的解决方案：

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

但是，我不知道这是否是一个很好的模式。如果有办法的话，我想用“JavaScript Way”来做到这一点。 ：）

谢谢！

Answer 1

我所做的事情与您上面写的非常相似，但我将其与模块模式结合起来：

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;
})();

从外部，这公开了 Vehicle.create() 和 Vehicle.prototype。然后，如果我想创建派生类型，我可以这样做：

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; 

})();

这种模式让我可以派生类型，而不会出现 Car.prototype = new Vehicle() 的错误，即失败 如果我的构造函数带有参数。

Answer 2

正如我可以从这个 链接 假设的那样，您应该执行以下操作：

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

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

Answer 3

我认为这篇文章总结得很好：

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

Answer 4

我会简单地这样做：

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

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

Answer 5

长话短说：不要尝试。 Object.create 的基本思想是避免构造函数。您最好使用这个好的旧模式：

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?
};

然后使用 new Foo 而不是 Object.create。