Javascript 事件侦听器绑定的函数如何继承`this`对象

请只使用纯Javascript另外，我也很傻，如果我的问题有点复杂，我很抱歉

我正在操作一个htmlCollection

var puzzleAreaContents

——它包含16个

标记

接下来我们进入一个循环，在元素之间循环，添加一个点击事件监听器

puzzleAreaContents[movables[i]]。添加了EventListener（“单击”，shiftPuzzlePiece）

当我单击元素时，我可以访问
shiftPuzzlePiece
函数中的
this
，“this”是我刚才单击的
标记

我有两个问题

shiftPuzzlePiece
函数如何/为什么可以访问单击的dom元素
this

如何将任意元素传递到
shiftPuzzlePiece
而不破坏其当前可用性当我将函数传递给对象时，如何定义此

，使其行为与通过单击事件侦听器调用时相同或类似 也就是说，它当前未设置为接收参数

---

例如：

shiftPuzzlePiece（some_arg）

通常将函数作为语句/表达式调用：

var ret = shiftPuzzlePiece(arg0);

还有和，您可以使用它们提供

this

上下文：

var ret = shiftPuzzlePiece.call(that, arg0);
var ret = shiftPuzzlePiece.apply(that, [ arg0 ]);

现在，函数中的

变成
这个


范例

var piece = { };

puzzleAreaContents[movables[i]].addEventListener("click", function () {

    shiftPuzzlePiece.call(piece, this /* element */);

});

function shiftPuzzlePiece(element) {

   // this === piece
   // element === the clicked puzzleAreaContents

}

事件处理程序创建一个新的，将其绑定到单击的元素
您可以使用自己的绑定将
此
替换为

比如说,

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

您可以使用
bind
将任何值绑定为
此
对象。例如：

shiftPuzzlePiece.bind({x:23});

将确保
this
对象的
this.x
等于
23

您也可以传递其他参数，但它们必须是有序的。Bind返回一个函数

更多关于绑定的信息

调用
和
应用
函数的工作原理类似，但它们不返回新函数，而是调用函数。
这里没有提到的另一种方法是使用
闭包
，它实际上比
应用（）
、
调用（）
和
绑定（）

HTML

工作|
对于问题2，您是否在询问如何调用函数并定义调用时此
是什么？@JamesMontagne是的，先生
(function f(){
  this.a = 0;
  var self = this;
  var e = document.getElementById('list').children, i;
  for (i = 0; i < e.length; i++) {
    (function(i){
      e[i].onclick = function(){
        _f(this, i);
      };
    })(i);
  }
})();

(function f(){
  this.a = 0;
  var self = this;
  var e = document.getElementById('list').children, i;
  for (i = 0; i < e.length; i++) {
    e[i].onclick = (function(i){
      return function() {
        _f(this, i);
      };
    })(i);
  }
})();

function _f(y, z){
  console.log(this.a + " / " + y.innerHTML + " / " + z);
}

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

0 / 1 / 0
0 / 2 / 1
0 / 3 / 2
0 / 4 / 3
0 / 5 / 4