JavaScript对象与其创建元素的关系及事件监听传参疑问

1. JavaScript对象与其内部创建的元素之间的关系 #

咱们先来理清这个关系：

• 你创建的Object实例（咱们叫它对象实例）会通过this.son持有对DOM元素的直接引用——也就是说，这个实例能直接访问到它创建的<div>元素。
• 反过来，DOM元素本身默认不会持有对这个对象实例的引用，除非你手动给它添加（比如this.son.myInstance = this;）。
• 另外要注意：如果事件监听器的回调函数里闭包引用了对象实例的属性（比如this.brother），会形成隐式的引用链，不过现代浏览器已经能很好地处理这类循环引用的垃圾回收问题，不用太担心。

简单总结就是：对象实例 → DOM元素 是单向的显式引用，DOM元素 → 对象实例 是可选的手动引用。

2. 事件监听器中传递this.brother的问题 #

你的代码里现在有个核心问题：事件回调是普通函数，它里面的this指向的是触发事件的DOM元素（也就是this.son），而不是你的Object实例，所以this.brother会是undefined，根本拿不到你想要的值。

解决方法（三种常用方式） #

方式一：用箭头函数

箭头函数的this会继承外部作用域的this（也就是构造函数里的对象实例），这样回调里就能直接访问到最新的this.brother：

function Object(a){ 
  this.brother = a; 
  this.son = document.createElement("div"); 
  document.getElementById('parent').appendChild(this.son); 
  // 换成箭头函数
  this.son.addEventListener('mousedown',(event) => { 
    onMouseDown(event,this.brother); 
  }); 
}

方式二：用bind()绑定this

把回调函数的this绑定到对象实例，这样不管回调在哪里执行，this都指向实例：

function Object(a){ 
  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)); // 绑定this到实例
}

方式三：保存this的引用

在构造函数里先把this存到一个变量（比如self），回调里用这个变量访问实例属性：

function Object(a){ 
  const self = this; // 保存实例的this
  this.brother = a; 
  this.son = document.createElement("div"); 
  document.getElementById('parent').appendChild(this.son); 
  this.son.addEventListener('mousedown',function(event){ 
    onMouseDown(event,self.brother); // 用self访问brother
  }); 
}

关于是否需要重新绑定事件 #

完全不需要！因为上面的方法都是让回调动态读取对象实例的this.brother属性——每次触发mousedown事件时，都会去取当前this.brother的最新值，而不是一开始的初始值a。你后续修改this.brother的时候，事件回调会自动拿到更新后的值，不用重新添加监听器。

内容的提问来源于stack exchange，提问作者user2691460