Question

我试图学习如何使用javascript对象，并在这里遇到了一些问题。

var playerImg = new Image();
    playerImg.src = 'player_stay.png';

var player = {
    posX: 50,
    posY: 50,
    draw: function(){
        ctx.drawImage(playerImg, player.posX, player.posY);
    }
}

将playerImg插入播放器对象是否可行？像player.img

这样的东西

编辑：我可以这样做

var player = {
    posX: 50,
    posY: 50,
    draw: function(){
        playerImg = new Image();
        playerImg.src = 'player_stay.png';
        ctx.drawImage(playerImg, player.posX, player.posY);
    }
}

但我认为它会创建新的Image（）;我一直使用player.draw（）; 所以即时通讯询问是否有更好的方法来做到这一点，并将所有参数都放在一个玩家对象中？

Answer 1

是的，为什么不：

var player = {
    posX: 50,
    posY: 50,
    draw: function(){
        ctx.drawImage(playerImg, player.posX, player.posY);
    },
    playerImage: playerImg
}

Answer 2

是的，这是可能的。

通常，您可以拥有嵌套对象或列表，如下所示：

var player = {
    posX: 50,
    posY: 50,
    draw: function(){
        ctx.drawImage(playerImg, player.posX, player.posY);
    },
    playerImage:{
                 src = 'player_stay.png'
                 },
   playerList:['elem1', 'elem2']
}

在您刚编写的代码中引用它（例如在赋值的情况下）

player.playerImage.src='anotherplayer.jpg';

此链接可以提供一些帮助 http://www.json.org/

Answer 3

如果我理解正确，您不想在playerImg之外/之前构建player对象。

这是你可以做到的一种方式，但我不推荐它，因为它不那么可读：

var player = {
    posX: 50,
    posY: 50,
    draw: function(){
        ctx.drawImage(player.img, player.posX, player.posY);
    },
    img: (function(){
        var playerImg = new Image();
        playerImg.src = 'player_stay.png';
        return playerImg;
    })()
}

此构造(function(){})();称为自执行/自调用匿名函数或Immediately-Invoked Function Expression

顺便说一下：这个表达式只在构建一个玩家对象时执行一次，所以你不必担心重复创建图像。

javascript对象语法

3 个答案: