Question

在我的班级里面，我有一个简单的函数来记录名为logError(error);

的错误

我还使用google maps 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在{{1} } refferes to google maps api，而不是我的班级。我该如何解决这个问题？有没有办法实现类似this.logError("Error " + status);（试过这个，不起作用）

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应用程序中的常见问题。箭头函数不是经典函数，并引入了这个＆＃34; lexical this＆＃34;概念。这意味着他们不会使用自己的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/。请参阅以下部分：＆＃34;功能：词法范围此＆＃34;。

希望它可以帮到你，亨利

Angular 2无法调用类函数

1 个答案: