浏览器中JavaScript Mediator无法访问实例变量问题求助

看起来你遇到的是JavaScript中经典的this绑定上下文问题，我来帮你拆解原因和解决方案：

问题根源 #

JavaScript里this的指向完全由函数的调用方式决定，而不是定义位置：

• 当你在构造函数内部调用this.setup_list_view()时，是通过类实例来调用这个方法，此时this会自动绑定到当前的类实例，所以能正常访问data_model。
• 但如果把setup_list_view作为独立函数调用（比如赋值给window.onload、或者作为DOM事件回调），此时函数的调用上下文会变成全局对象（浏览器中就是window），如果是事件回调则指向触发事件的DOM元素，自然无法通过this访问到类实例的属性。

具体解决方案 #

这里有3种常用的解决办法，你可以根据自己的代码结构选择：

1. 在构造函数中手动绑定this

在类的构造函数里，把setup_list_view方法的this永久绑定到当前实例：

class Mediator {
  constructor() {
    this.data_model = /* 你的数据模型 */;
    // 手动绑定this到实例
    this.setup_list_view = this.setup_list_view.bind(this);
  }

  setup_list_view() {
    // 现在不管怎么调用这个方法，this都会指向类实例
    console.log(this.data_model);
  }
}

function init() {
  const mediator = new Mediator();
  // 此时调用mediator.setup_list_view()或者把它作为回调，this都没问题
  mediator.setup_list_view();
}

window.onload = init;

2. 用箭头函数定义类方法

箭头函数没有自己的this，它会继承定义时所在上下文的this。把setup_list_view定义成箭头函数，就能永久绑定到类实例：

class Mediator {
  constructor() {
    this.data_model = /* 你的数据模型 */;
  }

  // 用箭头函数定义方法
  setup_list_view = () => {
    // this始终指向类实例
    console.log(this.data_model);
  }
}

function init() {
  const mediator = new Mediator();
  mediator.setup_list_view();
}

window.onload = init;

3. 调用时用箭头函数包裹

如果不想修改类的定义，可以在调用方法时用箭头函数包裹，确保this指向实例：

class Mediator {
  constructor() {
    this.data_model = /* 你的数据模型 */;
  }

  setup_list_view() {
    console.log(this.data_model);
  }
}

function init() {
  const mediator = new Mediator();
  // 用箭头函数包裹，确保调用时this指向mediator实例
  window.onload = () => mediator.setup_list_view();
  // 如果是DOM输入事件监听，同样用箭头函数
  document.getElementById('your-input').addEventListener('input', () => mediator.setup_list_view());
}

init();

额外提醒 #

如果你是把setup_list_view直接赋值给window.onload（比如window.onload = mediator.setup_list_view），这本质上是把函数引用传递过去，调用时的上下文会变成window，所以一定要通过上述方式绑定好this。

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