Angular 2中onSelect方法里this关键字的作用与必要性咨询

嘿，这个问题其实是JavaScript（以及Angular使用的TypeScript）里this关键字的核心知识点，咱们结合你的代码一步步拆解清楚：

为什么必须用this来引用selectedHero？ #

在TypeScript的类方法中，如果你直接写selectedHero = hero，JavaScript引擎会把它识别为方法内部的局部变量，而不是访问组件类实例上的属性。

也就是说，你只是在onSelect方法里创建了一个临时的局部变量selectedHero，完全没有触及到你在HeroesComponent类顶部定义的那个组件实例属性selectedHero。这样的代码执行后，组件的状态不会有任何变化，视图自然也不会更新。

举个反例就能看明白，如果去掉this，代码本质是这样的：

onSelect(hero : Hero) : void{
  // 这里的selectedHero是局部变量，和组件实例的selectedHero无关
  let selectedHero = hero; 
}

此处的this具体指代什么？ #

在你的onSelect方法里，this指向的是**HeroesComponent类的当前实例**——也就是当Angular渲染<app-heroes>组件时，创建出来的那个组件对象。

你在组件类里定义的selectedHero、heroes这些属性，全部都是挂载在这个实例对象上的。只有通过this，你才能访问和修改这些实例属性，让Angular检测到组件状态的变化，进而触发视图更新。

另外提一句：Angular项目默认开启TypeScript严格模式，如果你直接使用未声明的变量（比如这里去掉this的selectedHero），IDE和编译器会直接抛出错误，帮你提前规避这类问题~

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