ES6/TypeScript箭头函数中this为undefined的Ionic/Angular问题

首先明确：你对箭头函数的核心特性理解是正确的——箭头函数本身没有独立的this，它会继承定义时所在外层词法作用域的this。在你的代码场景中，箭头函数定义在HomePage的constructor内部，理论上它的this应该和constructor里的this完全一致，也就是HomePage的组件实例，根本不需要用self来保存上下文。

那为什么你会遇到this为undefined的情况？大概率是以下某个细节问题导致的：

1. 调试时的上下文假象 #

浏览器调试工具在异步回调的断点处，有时会因为控制台的上下文切换，导致this显示异常。你可以试试在箭头函数里先把this存为一个变量再打印：

.then((items) => {
  const that = this;
  console.log('箭头函数内的this:', that);
  console.log(that.items);
  // ...其他逻辑
})

如果that能正常指向组件实例，那就是调试工具的显示问题，而非代码逻辑错误。

2. TypeScript编译配置异常 #

检查你的tsconfig.json，如果开启了noImplicitThis或strict模式下的某些严格检查选项，可能会导致编译后的代码出现意外的this绑定问题。Ionic3默认的编译配置是兼容箭头函数的，你可以尝试暂时关闭严格模式，看问题是否消失。

3. 框架版本的偶发bug #

虽然概率很低，但某些旧版本的Ionic/Angular可能存在异步回调中上下文丢失的小bug。你可以尝试升级到对应大版本的最新补丁包，比如Ionic3的最后稳定版本，看问题是否解决。

正确的写法示例 #

按照箭头函数的设计，你的代码完全可以去掉self，直接使用this：

constructor(public navCtrl: NavController, private dataProvider: DataProvider) {
  this.dataProvider.getItems()
    .then((items) => {
      console.log(this.items); // 应该正常访问组件的items属性
      if (items) {
        this.items = items;
      }
    })
    .catch((e) => {
      console.log(e);
    });
}

你可以先在constructor开头打印this，确认外层的this是正常的组件实例：

constructor(...) {
  console.log('Constructor中的this:', this); // 应该输出HomePage实例对象
  // ...后续异步逻辑
}

如果这里的this是正常的，那箭头函数里的this必然和它一致——这是箭头函数的核心特性，你的理解没有问题。

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