如何在TypeScript类中访问属性？TypeScript 2.6遇this指向问题

我来帮你捋捋这个问题，你遇到的self变成undefined的情况，在Angular结合TypeScript开发时其实挺容易踩坑的，核心问题还是**this的上下文绑定**，和TypeScript本身关系不大——毕竟TS最终还是编译成JS运行，二者在this规则上是一致的。结合你提到用了jQuery，我猜大概率是回调函数里的上下文搞错了。

先看你可能踩的坑 #

你说打印self是undefined，很大概率是把var self = this;写在了jQuery的回调函数内部，比如这种错误写法：

import { Component, OnInit } from '@angular/core';
import $ from "jquery";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    $('.target-element').click(function() {
      var self = this; // 这里的`this`是jQuery选中的DOM元素，不是AppComponent实例！
      console.log(self); // 自然不是你想要的组件对象，甚至严格模式下会是undefined
    });
  }
}

几种靠谱的解决方法 #

1. 用箭头函数（最推荐）

TypeScript支持ES6箭头函数，箭头函数不会创建自己的this，而是直接捕获外层上下文的this（也就是你的AppComponent实例），根本不需要额外定义self：

ngOnInit() {
  $('.target-element').click(() => {
    console.log(this); // 这里的`this`就是AppComponent实例，直接用就行
  });
}

2. 正确定义self的位置

如果你一定要用self的写法，记得把self定义在回调函数外面，也就是组件方法的上下文里：

ngOnInit() {
  var self = this; // 这里的`this`是AppComponent实例，正确赋值
  $('.target-element').click(function() {
    console.log(self); // 现在就能拿到组件实例了
  });
}

3. 用jQuery的bind()方法（老派写法）

也可以用jQuery的bind()来强制绑定上下文，不过现在箭头函数更简洁，这个方法用得少了：

ngOnInit() {
  $('.target-element').click(function() {
    console.log(this); // 这里的`this`已经被绑定成AppComponent实例
  }.bind(this));
}

额外提醒 #

在Angular项目里尽量少用jQuery，Angular本身的模板事件绑定（比如(click)）和数据绑定已经能处理绝大多数场景，混用jQuery容易破坏Angular的变更检测机制，导致一些难以排查的问题。如果是必须操作DOM，也优先用Angular的Renderer2或者@ViewChild来实现。

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