javascript - 事件监听器绑定(bind)的函数如何继承 `this`对象

Question

请仅使用纯 Javascript。 - 而且我也很菜鸟，如果我的问题有点复杂，很抱歉。

我正在操作 htmlCollection var puzzleAreaContents - 其中包含 16 <div>标签

接下来我们进入一个循环，循环遍历元素，添加一个点击事件监听器。

puzzleAreaContents[movables[i]].addEventListener("click", shiftPuzzlePiece);

当我点击该元素时，我可以访问 this里面shiftPuzzlePiece函数，“this”是 <div>我刚刚点击的标签。

我有两个问题

1. 如何/为什么shiftPuzzlePiece函数可以访问 this ，点击的 dom 元素？
2. 如何将任意元素传递给 shiftPuzzlePiece不破坏它当前的可用性？ -- 我如何定义this当我向函数传递一个对象时，它的行为与通过单击事件监听器调用它时的行为相同或相似？

也就是说，当前尚未设置为接收参数

例如:shiftPuzzlePiece(some_arg)

Answer 1

1. 事件处理程序创建一个新的 Execution Context^ECMA 将其绑定(bind)到单击的元素
2. 您可以使用自己的绑定(bind)将 this 替换为 call^MDN 。

例如，

shiftPuzzlePiece.call(puzzleAreaContents[movables[i]]);