如何解决JS跨类传递实例方法时this指向丢失无法访问属性的问题

问题原因 #

你遇到的是典型的JavaScript类方法this指向丢失问题：当你直接把exportModule.exportGeometry作为独立函数传递给Loading构造函数时，方法和原Export实例的绑定关系会断裂。在Loading内部执行Fun()时，函数内部的this不再指向原来的Export实例，自然无法访问挂载在实例上的editor属性。

解决方法 #

三个可选方案，选任意一种即可解决问题：

方案1：传递时用箭头函数包裹（最常用，无需修改原有类代码） #

修改HamburgerMenu.js中创建Loading实例的传参部分，用箭头函数包裹要执行的方法，箭头函数会继承外层上下文的this指向：

var loading = new Loading('Please Wait..', 'Preparing to download ...', 
  () => exportModule.exportGeometry()
);

方案2：用bind手动绑定实例 #

同样修改HamburgerMenu.js的传参，通过bind方法手动把exportGeometry的this绑定到对应的Export实例上：

var loading = new Loading('Please Wait..', 'Preparing to download ...', 
  exportModule.exportGeometry.bind(exportModule)
);

方案3：将Export类的方法改为箭头函数写法（永久绑定this，适合方法不需要动态修改this的场景） #

修改Export.js里的exportGeometry定义，直接把方法写成箭头函数，这样该方法的this会永久绑定到类实例，传递出去也不会丢失指向：

class Export {
  constructor(editor) {
    this.editor = editor;
  }

  exportGeometry = () => {
    var object = this.editor.selected;
    // 原有逻辑保持不变
  }
}

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