javascript - 如何使用 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 方式”来做到这一点。:)

谢谢！

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。然后，如果我想创建一个 Derived 类型，我可以这样做：

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.