为何this.markerArray未定义？解析TypeScript中this指向问题

我来帮你排查下这个问题，你遇到的错误大概率是两个小问题导致的，咱们一个个说：

1. 最直接的原因：变量名拼写错误 #

看你buildMarkers方法里的代码：

this.markers.push(marker);

但你在组件里声明的数组是markerArray，不是markers！这里明显写错了变量名，所以代码找不到markers这个属性，自然会报错，而你的markerArray其实是正常初始化的，只是你没往里面正确添加元素。

把这行改成this.markerArray.push(marker);就能解决这个最核心的问题。

2. 潜在的this指向问题（如果拼写修正后仍报错） #

如果修正拼写后还是遇到this.markerArray undefined，那大概率是buildMarkers方法的调用方式导致this丢失了指向组件实例的引用。比如你把buildMarkers作为异步操作的回调、或者DOM事件的处理函数时，this会指向调用它的上下文，而不是组件本身。

解决这个有两种常用方式：

• 把方法定义成箭头函数：箭头函数会继承外层的this，确保始终指向组件实例：

  buildMarkers = (artworkList) => { 
    // 方法内容不变，修正拼写后即可
  }
  

• 在ngOnInit里手动绑定this：

  ngOnInit() {
    this.buildMarkers = this.buildMarkers.bind(this);
  }
  

额外的小问题提醒 #

你代码里的console.log("marker", marker);放在循环外面是访问不到marker变量的，因为marker是循环内部的局部变量，会导致新的报错，建议把这行移到循环内部，或者直接打印markerArray即可。

修正后的完整代码示例 #

@Component({ 
  selector: 'app-open-street-map', 
  templateUrl: './open-street-map.component.html', 
  styleUrls: ['./open-street-map.component.css'] 
}) 
export class OpenStreetMapComponent implements OnInit { 
  @Output() private add = new EventEmitter(); 
  @Output() private edit = new EventEmitter<number>(); 
  artworkList: Artwork[]; 
  map; 
  markerArray = []; 

  constructor() { } 

  ngOnInit() { 
    // 可选：如果buildMarkers是作为回调使用，在这里绑定this
    // this.buildMarkers = this.buildMarkers.bind(this);
  }; 

  buildMarkers(artworkList) { 
    for (let artwork of artworkList) { 
      const marker = this.buildPopup(artwork); 
      // 修正变量名
      this.markerArray.push(marker); 
      console.log("当前marker", marker);
    } 
    console.log("markerArray内容", this.markerArray); 
  } 
}

先优先修正变量名的拼写错误，这应该是你当前遇到问题的核心原因，如果还有问题再检查this指向的绑定情况。

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