Question

所以我正在学习本教程，我收到一个奇怪的错误。

let isDrawing = false
let lastX = 0
let lastY = 0

const draw = function(ev){
    console.log('isDrawing', isDrawing)
    if(!isDrawing){
        return
    }

    ctx.beginPath()
    ctx.moveTo(lastX, lastY)
    ctx.lineTo(ev.offsetX, ev.offsetY)
    ctx.stroke()

    //[TODO] destruction doesn't work????
    [lastX, lastY] = [ev.offsetX, ev.offsetY]
    // lastX = ev.offsetX
    // lastY = ev.offsetY
}

canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mousedown', (ev) => {
  isDrawing = true
  [lastX, lastY] = [ev.offsetX, ev.offsetY]
})
canvas.addEventListener('mouseup', () => isDrawing = false)
canvas.addEventListener('mouseout', () => isDrawing = false)

在绘制函数的最后，如果我使用破坏语法，我会收到一个错误：

script.js：26未捕获的TypeError：无法设置未定义的属性“0” 在HTMLCanvasElement.draw

奇怪的是，当我在mousedown事件监听器中使用相同的表示法时，它没有问题。

我做错了什么？

Answer 1

您没有使用分号并且通过启动带有左括号的线进入ASI陷阱。它被解析为

ctx.stroke()[(lastX, lastY)] = [ev.offsetX, ev.offsetY]

es6析构（不确定它是否与重组有关）

1 个答案: