时间戳

首页 > 解决方案 > JavaScript 对象和在其中创建的元素之间有什么关系？

javascript - JavaScript 对象和在其中创建的元素之间有什么关系？

问题描述

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

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？

标签： javascriptaddeventlistenercreateelement

解决方案

您的问题基本上归结为关键字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始终引用范围内相同对象的最普遍方法。在箭头函数出现后，它们开始失宠，因为箭头函数更高效，代码更易读。

推荐阅读