angularjs - 在 AngularJS 服务中使用 'this'

Question

请检查下面的代码。我编辑了一个弹出窗口的 ionic 示例只是为了说明。

在 showAlert1() 上，我按原样引用“this”，但它不起作用。在 showAlert2() 上，我使用辅助变量“_this”来接收“this”并且它确实有效。

我在其他场合也见过这种情况，我相信它与“Controller as”语法作用域相关，但为什么会发生这种情况？

angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {

   this.testAlert = function() {
     alert('Alerting!');
   };

   this.showAlert1 = function() {
     $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     }, this).then(function() {
       this.testAlert();
     });
   };

   this.showAlert2 = function() {
     var _this = this;
     $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     }, _this).then(function() {
       _this.testAlert();
     });
   };

});

这是一支代码笔:http://codepen.io/anon/pen/dPJVNN

谢谢!

Answer 1

javascript中的“this”与其他语言中的“this”不同。您可以将其更多地视为函数调用的上下文。

Web 应用程序上的默认调用上下文是 window。然而，当调用作为对象属性的函数时，上下文就变成了对象。

因此，在您的示例中:

angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
   //"this" refers to the controller instance here (controllers are created by angular with the "new" operator)
   this.testAlert = function() {
     //inside of this function, "this" will still be the controller
     alert('Alerting!');
   };

   //"this" is the controller
   this.showAlert1 = function() {
   //"this" is still the controller
     $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     }, this).then(function() {
       //"this" is no longer the controller.  It's probably "window", but it's possible that ionic sets this to some other parameter when it invokes the function.
       //since it's not the controller, testAlert() is undefined!
       this.testAlert();
     });
   };

   //"this" is the controller
   this.showAlert2 = function() {
     //"this" is still the controller, and you have assigned _this to also be the controller
     var _this = this;
     $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     }, _this).then(function() {
       //"_this" is captured by the closure created by the function call, and it is still the controller, so testAlert() is defined. 
       _this.testAlert();
     });
   };

});

您经常会在代码中看到这一点:

var self = this;

使用“self”来代替它，以避免您遇到的困惑。

angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
   var self = this;
   self.testAlert = function() {
     alert('Alerting!');
   };

   self.showAlert1 = function() {
     $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     }, self).then(function() {
       self.testAlert();
     });
   };

   self.showAlert2 = function() {

     $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     }, self).then(function() {
       self.testAlert();
     });
   };

});