Question

我的HTML页面中有多个画布设置。我通过JS / jQuery中的各自ID访问它们。在这个画布中有一个“玩家”字符（基本方格），它具有恒定的大小和可变的位置。

我创建了这样的玩家对象：

<script>
var player = {
    xpos = 50,
    ypos = 50
}  
</script>

在同一<script></script>我有一个看起来像这样的函数：

async animate(cid2){
var c = Object.create(player);
cid = $(cid2)[0];
ctx = cid.getContext("2d");
c.xpos = 50;
c.ypos = 50;
while(c.xpos < 300){
    await sleep(1100);
    c.xpos = c.xpos + 50;
    //draw a rectangle..
}

单击任何<canvas id="test">后（使用jQuery .click函数），将使用相应的画布ID执行animate。

只要页面上有一个画布，所有这些都很有用。如果我说两个画布，控制台中会发生以下情况：

canvas1 is clicked!
X-Position: 50
X-Position: 100
canvas2 is clicked!
X-Position: 150
X-Position: 200

虽然单击了第二个画布并且Object.create应该创建一个新对象，但它不起作用：它仍然可以访问旧对象。

我几乎可以肯定在SO上有这样的答案，但尽管我付出了最大努力，但我找不到它，因为我不知道究竟出了什么问题。

任何人都可以帮我或推荐我提出的问题吗？

提前谢谢。

Answer 1

您可以使用（我认为ECMAscript 6）传播运算符

const obj = { myProp: 'hi' };
const newObj = { ...obj };
newObj.myProp = 'ciao';
console.log(obj); // still { myProp: 'hi' }

知道你应该有两个单独的对象而不是副本。

创建对象复制旧

1 个答案: