javascript - Angular 2无法调用类函数

Question

在我的类中，我有一个简单的函数来记录错误，称为 logError(error);

我还使用谷歌地图 API 来获取地址的纬度和经度，因此在我的导出类中，这看起来像这样。

  //Log error
  logError(err) {
   console.error('Error: ' + err);
  }

  //Get Coordinates from address
  postcodeCoordinates(address: string, postcode: string) {
    var geocoder =  new google.maps.Geocoder();
    geocoder.geocode( { 'address': address + ', ' + postcode}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        console.log(results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
      } else {
       this.logError("Error " + status);
      }
    });
  }

问题是我收到控制台错误，说 Uncaught TypeError: Cannot read property 'logError' of undefined ，但是这个函数可以很好地从代码中的其他地方以相同的方式调用，这让我觉得 this.logError("Error "+ status); 中的 this 引用的是 google map api，而不是我的类。我该如何解决这个问题？有没有办法实现类似 MyClassName.logError("Error") (尝试过这个，不起作用)

Answer 1

您应该使用箭头函数，this 关键字将是您的组件的函数，而不是回调函数的函数。类似这样的事情:

geocoder.geocode( { 'address': address + ', ' + postcode}, (results, status) => {
  if (status == google.maps.GeocoderStatus.OK) {
    console.log(results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
  } else {
   this.logError("Error " + status);
  }
});

在本例中，logError 是当前类的方法。

为了给您提供更多详细信息，在函数中使用 this 关键字时，它对应于执行该函数的对象:

// Example #1

function test() {
  console.log(this);
}

test(); // prints null

// Example #2

var obj2 = {
  test: function() {
    console.log(this);
  }
};

obj2.test(); // prints obj2

// Example #3

var obj3 = {
  test: function() {
    console.log(this);
  }
}

var fct3 = obj3.test;
fct3() // prints null!!

// Example #4

var obj4 = {
  test: function() {
    geocoder.geocode({ ... }, function(results, status) {
      console.log(this);
    });
  }
};

obj2.test(); // doesn't print obj2

当您提供回调时，它将作为上下文或特定上下文(而不是调用者上下文)的任何对象之外的函数执行。这意味着在回调中，this 关键字对应于执行回调的上下文，当然，它不是组件实例。

这是 JavaScript 应用程序中的常见问题。箭头函数不是经典函数，并引入了“词法 this”概念。这意味着他们不使用自己的 this 而是使用调用者的:

var obj2 = {
  test: function() {
    geocoder.geocode({ ... }, (results, status) => {
      console.log(this);
    });
  }
};

obj2.test(); // prints obj2

此链接可以帮助您:https://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/ 。请参阅“功能:词法作用域”部分。

希望对你有帮助蒂埃里