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

Question

Iam目前正在使用JavaScript玩些游戏，并希望制作一个小型canvas应用程序。

我的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）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; 在代码中添加断点，然后随时检查所有内容。