Question

我有一个卡片对象，我试图将其用作课程。

var Card = {
    image: new Image(),
    x: 0,
    y: 0,
    setImage: function(ii){

        this.image.src = "assets/" + ii;


    }

};

然后我实例化上面的＆＃34;类＆＃34;为：

var card = Object.create(Card);
card.setImage(cardsNames[i]);

似乎Object.create（）将创建对象的实例，但在其中不会创建唯一的图像对象。

例如

如果我创建两张卡

var card1 = Object.create(Card);
card1.setImage(cardsNames[0]);

var card2 = Object.create(Card);
card2.setImage(cardsNames[1]);

这里card1.image和card2.image都指向同一个Image（）对象。我怎么能这样做，以便当我通过Object.create（）实例化对象时，里面的对象也将被复制？我感谢任何帮助！谢谢！

Answer 1

您可以使用new operator的可实例化函数。这将创建一个新实例并分离数据。

function Card() {
    this.image = new Image();
    this.x = 0;
    this.y = 0;
    this.setImage = function (ii) {
        this.image.src = "assets/" + ii;
    };
};

var card1 = new Card,
    card2 = new Card;

card1.setImage(42);
console.log(card1.image); // <img src="assets/42"></img> with source
console.log(card2.image); // <img></img>                 no source

Answer 2

我已经将Nina的答案更进了一步，只是通过制作＆＃34;类＆＃34; （函数）一个IIFE（立即调用的函数表达式），以便你有适当的私有函数。

var Card = (function () {

    var card = function () {
      this.image = new Image();
      this.x = 0;
      this.y = 0;  
    };

    card.prototype.setImage = function(ii) {
        this.image.src = "assets/" + ii;
    }

    return card;

})();

var cardsNames = ['1', '2'];

var card1 = new Card();
card1.setImage(cardsNames[0]);

var card2 = new Card();
card2.setImage(cardsNames[1]);

console.log(card1.image.src, card2.image.src);

Working example

因此，有些观点要偏离这种设计。 IIFE创建了一个新范围，因此它之外的所有内容都无法访问其中的内容。 e.g。

var Card = (function () {
   function log(message) {
       console.log(message);
   }
})();

log(); // undefined, not allowed, doesn't exist in this scope.

这使您能够创建只能在该范围内使用的私有函数。

除此之外，它与Nina的建议相同。然而，随着ES6 / 7（2015/2017）等的推出......我认为你很少这样做。

如何在调用Object.create时实例化所有属性对象？

2 个答案: