JS过程式代码重构为类后回调方法未触发且无报错排查

核心问题：this上下文丢失 #

你遇到的问题本质是回调函数执行时this的指向完全不符合预期，导致实例方法和属性无法被正确访问，进而后续的resolveOnSuccess等逻辑直接静默失败（非严格模式下，访问不存在的方法不会抛出明显报错，只会默默终止执行）。

具体拆解下：

• 在capturePhoto方法里，你通过self.cameraOnSuccess(entry)调用成功回调时，cameraOnSuccess是作为普通函数执行的，而非Photo实例的方法。这时候函数内部的this会绑定到全局对象（浏览器环境就是window），根本不是你的Photo实例。
• 所以当cameraOnSuccess里执行this.cleanup()或者this.resolveOnSuccess()时，this找不到这些属于实例的方法，代码执行到这里就卡住了，控制台也不会输出错误（非严格模式下这种情况不会抛出异常）。

另外，你代码里的self变量还有混淆问题：构造函数里已经用var self = this;捕获了实例，但init方法里又给实例加了this.self = this;，这完全多余，反而容易造成误解。

修复方案 #

有几种简单的方式可以解决这个问题，核心都是确保回调函数执行时this始终指向Photo实例：

方案1：用bind固定this（最简洁） #

直接在传递回调给navigator.camera.getPicture时，用bind把this绑定为当前实例：

this.capturePhoto = function() {
  navigator.camera.getPicture(
    this.cameraOnSuccess.bind(this),
    this.cameraOnFail.bind(this),
    { quality: 100, destinationType: Camera.DestinationType.FILE_URI }
  );
}

这样cameraOnSuccess和cameraOnFail内部的this就会一直指向你的Photo实例，调用this.cleanup()或者this.resolveOnSuccess()都能正常找到方法。

方案2：在构造函数中提前绑定所有方法 #

如果希望所有实例方法的this都固定指向实例，可以在构造函数里提前绑定：

function Photo() {
  var self = this;
  this.element_id = null;
  this.dirty_flag = false;
  this.callback = null;

  // 提前绑定所有需要的方法，确保this始终指向实例
  this.init = this.init.bind(this);
  this.capturePhoto = this.capturePhoto.bind(this);
  this.cameraOnSuccess = this.cameraOnSuccess.bind(this);
  this.cameraOnFail = this.cameraOnFail.bind(this);
  this.cleanup = this.cleanup.bind(this);
}

之后不管以哪种方式调用这些方法，this都会指向实例，不需要再手动处理上下文问题。

方案3：用call显式指定this #

如果你想保留原来的self变量写法，可以在调用cameraOnSuccess时用call显式传入实例作为this：

this.capturePhoto = function() {
  navigator.camera.getPicture(function(entry) {
    self.cameraOnSuccess.call(self, entry);
  }, self.cameraOnFail.bind(self), { quality: 100, destinationType: Camera.DestinationType.FILE_URI });
}

这样cameraOnSuccess内部的this就会是self（也就是Photo实例）。

额外建议 #

• 删掉init方法里的this.self = this;，构造函数里的var self = this;已经足够在内部函数中捕获实例引用，多余的属性只会增加代码复杂度。
• 建议开启严格模式（在函数顶部加'use strict';），这样当this指向错误时会直接抛出报错，更容易定位问题，而不是让代码静默失败。

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