Angular 8中匿名函数的this指向AppComponent原因咨询

嘿，这个问题的核心在于你用了箭头函数（() => {}），而不是普通的匿名函数（function() {}），这俩在this的绑定规则上有本质区别！

先回忆普通JS匿名函数的this #

在传统JavaScript里，普通匿名函数的this确实是由调用它的上下文决定的：

• 如果在全局作用域调用，this指向全局对象（浏览器里是window）
• 如果被某个对象调用，this指向那个调用对象

但箭头函数打破了这个规则！

箭头函数的this绑定规则 #

箭头函数不会创建自己的this上下文，它的this是继承自外层词法作用域的this。咱们拆解你的代码来看：

1. gapi.load里的箭头函数

   gapi.load('auth2', () => {
     this.auth2 = gapi.auth2.init({...});
     // 这里的this继承自googleInit方法的this
   });
   

   googleInit是AppComponent类的实例方法，当这个方法被调用时，它的this指向AppComponent的实例。箭头函数直接继承了这个this，所以你在箭头函数里用this自然就指向组件实例了。

2. this.zone.run里的箭头函数

   this.zone.run(() => {
     this.signInStatus = signedIn ? "Yes" : "No";
     // 这里的this继承自updateSignInStatus方法的this
   });
   

   同样，updateSignInStatus是AppComponent的实例方法，它的this指向组件实例，箭头函数继承了这个this，所以能直接修改组件的signInStatus属性。

如果换成普通函数会怎样？ #

要是你把箭头函数换成普通匿名函数，比如：

gapi.load('auth2', function() {
  console.log(this); // 这里的this会指向gapi调用这个函数时的上下文，不是AppComponent
  // 这时候调用this.updateSignInStatus就会报错，因为this不是组件实例
});

这种情况下，你就得手动保存外层的this，比如：

const that = this;
gapi.load('auth2', function() {
  that.updateSignInStatus(isSignedIn); // 用that来访问组件实例
});

或者用bind(this)来强制绑定this：

gapi.load('auth2', function() {
  this.updateSignInStatus(isSignedIn);
}.bind(this));

总结 #

在Angular（TypeScript）项目里，箭头函数是解决this指向问题的常用方案，它让回调函数能直接访问组件实例的属性和方法，不用再手动处理this的绑定。这是ES6引入的特性，TypeScript完全兼容并推荐使用这种写法。

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