函数返回后内部创建的JavaScript对象会怎样？点击事件为何仍可触发？

算力阿峰

2026-7-20

问题解答

首先先修正你代码里的语法错误：JavaScript类中的方法定义不需要加function关键字，正确的类写法应该是：

class userInfo {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greetings() {
    alert(`Hi, your name is ${this.name} and you are ${this.age}`);
  }

  renderUserInfos() {
    const userContent = document.createElement('ul');
    userContent.innerHTML = `
      <li>${this.name}</li>
      <li>${this.age}</li>
      <button>Display User Info</button>
    `;
    const displayButton = userContent.querySelector('button');
    displayButton.addEventListener('click', this.greetings.bind(this));
    // 原代码缺少将userContent插入DOM的步骤，否则按钮不会出现在页面上，补充后才能触发点击事件
    document.body.appendChild(userContent);
  }
}

function render(name, age) {
  const user = new userInfo(name, age);
  user.renderUserInfos();
  return;
}

render('John', 25);

关于user对象是否会被垃圾回收？

不会。JavaScript的垃圾回收机制基于可达性判断：只要一个对象还存在能被全局作用域或其他存活对象访问到的引用，就不会被回收。

为什么点击事件仍能触发greetings函数？

核心是存在完整的引用链：

调用this.greetings.bind(this)时，bind方法会生成一个新函数，这个新函数内部保留了对user实例（即bind传入的this）的引用。
这个新函数被作为点击事件监听器绑定到了displayButton这个DOM元素上。
只要displayButton还存在于页面的DOM树中，它就会持有这个事件监听器函数的引用，而监听器函数又持有user实例的引用。
哪怕render函数执行完毕，局部变量user的作用域消失，但user实例仍然通过上述引用链保持可达状态，所以不会被垃圾回收，点击按钮时自然能正常调用greetings函数，访问到实例的name和age属性。