Question

是否可以将this.brother作为变量传递给this.son的eventListener？

function Object(a){
  this.brother = a;
  this.son = document.createElement("div");
  document.getElementById('parent').appendChild(this.son);
  this.son.addEventListener('mousedown',function(){ 
    onMouseDown(event,this.brother);
  });
}

用户输入稍后会更改this.brother的值，所以我不能只传递输入变量 a 。

每次这个兄弟的价值发生变化时，我是否必须添加一个新的eventListener？

Answer 1

您的问题基本上归结为关键字this在函数内的含义。有三种选择。

<强> 1。 “正确”功能

this.son.addEventListener('mousedown', function() { 
  onMouseDown(event, this.brother);
});

如果使用完整的函数定义语法function() {}定义函数，则 this将引用调用该函数的对象。如果是一个事件监听器，它是您定义监听器的对象，在您的情况下是您创建的div。这意味着您将收到错误，因为div元素没有名为brother的属性。

<强> 2。箭头功能

最近几年引入了箭头函数，并使用不同的语法：

this.son.addEventListener('mousedown', () => { 
  onMouseDown(event, this.brother);
});

箭头函数在各方面都与“正确”函数完全相同，但有一个例外：它们没有自己的this，即 this将引用它所指的任何内容定义函数的范围。在您的情况下，它将引用您在Object()函数中初始化的对象。这可能就是你想要的那个。

（旁注：你真的不应该命名你的函数Object，这个名字已经由JavaScript的所有对象的基类使用。覆盖它会导致各种麻烦）

第3。约束函数

JavaScript中的函数是对象，因此它们也有方法。其中一个是bind()，它允许您创建函数的绑定副本：

this.son.addEventListener('mousedown', (function() { 
  onMouseDown(event, this.brother);
}).bind(this));

绑定函数也像“正确”函数一样工作，除了 this将始终引用您作为参数传递给bind() 的对象。在箭头函数之前，绑定函数曾经是确保this始终引用范围内的同一对象的最广泛的方法。在箭头函数出现后，它们开始失宠，因为箭头函数更有效并产生更易读的代码。

Answer 2

我不打算这样做，但你可以使用绑定功能：

function _Object(a){ //this is not a great function name
  this.brother = a;
  this.son = document.createElement("div");
  document.getElementById('parent').appendChild(this.son);
  this.son.addEventListener('mousedown',(function(event){ 
    onMouseDown(event,this.brother);
  }).bind(this));
}

至于你的问题，不，你不必更新它。这是指_Object，如果兄弟指针被改变，this.brother将指向新的兄弟。

JavaScript对象与其中创建的元素之间的关系是什么？

2 个答案: