Question

Iam目前正在使用JavaScript进行游戏并希望制作一个小型画布应用程序。

我的JavaScript代码是

"use strict";

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let mouseDown = false;
let lastEvent;



canvas.onmousedown = function(e) {
    e.preventDefault();
    lastEvent = e;
    mouseDown = true;

    context.beginPath();
    context.lineWidth="5";
    context.strokeStyle="black";
    context.moveTo(e.offsetX,e.offsetY);
    context.lineTo(e.offsetX-4,e.offsetY-4);
    context.stroke();

    console.log(lastEvent);
    console.log(lastEvent.offsetX);
    console.log(e.offsetX);
    console.log(e);
};

canvas.onmousemove = function(e) {
    e.preventDefault();
    if (mouseDown) {
        context.beginPath();
        context.lineWidth="5";
        context.strokeStyle="black";
        context.moveTo(lastEvent.offsetX,lastEvent.offsetY);
        context.lineTo(e.offsetX,e.offsetY);
        context.stroke();
        lastEvent = e;
    };
};

canvas.onmouseup = function(e) {
    e.preventDefault();
    mouseDown = false;
};

正如您所看到的，计划是：当鼠标在我的画布上移动时，我通过捕获最后一个鼠标事件然后从那里绘制到当前鼠标事件来绘制一条线。最后它当然没有按计划进行。由于某种原因，lastEvent.offsetX和.offsetY总是变为0。

现在让我们转移到onmousedown函数，虽然这里没有引起错误（至少我希望）它在哪里我追踪到哪里出错了它让我感到困惑。我这里有4个console.log语句，它们的输出是引起混淆的原因。

console.log（lastEvent）输出是（当在控制台中查找offsetX时）0

console.log（lastEvent.offsetX）输出是（例如）127

console.log（e.offsetX）输出也是127

console.log（e）输出（再次在控制台中查看offsetX up）0

我完全不明白这是怎么回事？当我直接询问属性的值时，当我调用该对象然后查看属性值时它的不同之处？由于我的理解，两个值应该是相同的，因为此时对象不再被更改。

我可以想到解决这个问题的方法，但是如果有人能解释一下我在这里发生了什么，我会更加好奇吗？

Answer 1

在方法完成后，lastEvent对象将被更新，console.log会反映它自己的对象，而不是复制它。你可以通过这个简单的片段进行测试：

var myobj = { c : 1 };
console.log('my obj:', myobj);
console.log('c is', myobj.c);
myobj.c = 0;
//now check the logged object again.

为了便于调试，您可以使用Chrome Inspector或使用debugger;在代码中添加断点，然后随时检查所有内容。

对象和对象+属性上的不同console.log属性值

1 个答案: