变量在Promise中变为未定义

Question

我正在使用Ionic Native Google Maps插件开发 Ionic 3应用程序。 我正在尝试将节点池与Google Maps实例一起使用来创建标记池。

我的问题是，在createPool函数中的新Promise中，尽管this.map是由loadMap（）函数创建的，但它是未定义的。 我读了这篇关于诺言的真棒文章 ，但我不知道这对我的情况有何影响。 如果有人可以帮助我，我将不胜感激。

ngAfterViewInit() {
    this.platform.ready()
      .then(_ => {
        return this.loadMap()
      })
      .then(_ => {
        this.markerpool = this.createPool();
        this.markerpool.on('factoryCreateError', err => console.log(err));
      })
} 


createPool() {
    var factory = {
      create: function () {
        return new Promise((resolve, reject) => {
          this.map.addMarker({
            icon: 'assets/icon/sun.png',
            visible: false
          })
            .then(marker => {
              // icon anchor set to the center of the icon
              marker.setIconAnchor(42, 37);
              resolve(marker);
            })
        })
      },
      destroy: function (marker: Marker) {
        return new Promise((resolve, reject) => {
          marker.remove();
          resolve();
        })
      }
    }
    var opts = {
      max: 60, // maximum size of the pool
      min: 20 // minimum size of the pool
    }
    return GenericPool.createPool(factory, opts);
  }

loadMap() {
    this.mapElement = document.getElementById('map');
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 40.9221968,
          lng: 14.7907662
        },
        zoom: maxzoom,
        tilt: 30
      },
      preferences: {
        zoom: {
          minZoom: minzoom,
          maxZoom: maxzoom
        }
      }
    };

    this.map = this.googleMaps.create(this.mapElement, mapOptions);
    this.zoomLevel = this.getZoomLevel(maxzoom);
    return this.map.one(GoogleMapsEvent.MAP_READY);
  }

Answer 1

新的Promise内部的this与加载地图的外部this 。 您可以在factory内部声明一个成员变量，该成员变量分配给this外部或外部map，并在新的Promise内部使用该成员变量。

var factory = {
    outerthis: this, //or outermap:this.map
    create: ...
       ...
       this.outerthis.map.addMarker(... //or access this.outermap.addMarker directly

Answer 2

如果您使用的是箭头函数而不是create: function () { ，则值中的this将是调用createPool的对象（具有map属性），而不是factory 。

Answer 3

尝试用let代替var 。 let保留函数外部的变量范围。 另外，您需要使用()=>{}而不是function()

let factory = {
  create: () => {
    return new Promise((resolve, reject) => {
      this.map.addMarker({
        icon: 'assets/icon/sun.png',
        visible: false
      })
      .then(marker => {
        // icon anchor set to the center of the icon
        marker.setIconAnchor(42, 37);
        resolve(marker);
      })
    })
  },
  destroy: (marker: Marker) => {
    return new Promise((resolve, reject) => {
      marker.remove();
      resolve();
    })
  }
}
let opts = {
  max: 60, // maximum size of the pool
  min: 20 // minimum size of the pool
}