为何forEach循环内调用this.getLastBuildAPI报错，硬编码调用却正常？

这个问题其实是JavaScript里经典的上下文绑定坑！

原因很简单：你在forEach里用的普通函数回调，会改变this的指向——在这个回调里，this不再指向你的组件实例（也就是能调用getLastBuildAPI的那个对象），而是变成了undefined（严格模式下）或者全局对象，自然就找不到getLastBuildAPI方法了。而你在then回调末尾直接调用的时候，this还是正确绑定到外层的组件实例，所以能成功执行。

给你三种解决办法，选哪种都可以：

1. 用箭头函数替代普通回调 #

箭头函数不会创建自己的this上下文，它会直接继承外层作用域的this，这样就能正确访问到组件实例的方法：

Object.keys(jsonResult.jobs).forEach((key) => { 
  jobs.push(jsonResult.jobs[key].name); 
  var job = jsonResult.jobs[key].name; 
  console.log(job); 
  this.getLastBuildAPI(job); 
});

2. 提前保存外层的this #

在forEach之前把外层的this存成一个变量（比如that或者self），然后在回调里用这个变量代替this：

var jobs = []; 
const that = this; // 把当前组件实例的this存起来
Object.keys(jsonResult.jobs).forEach(function(key) { 
  jobs.push(jsonResult.jobs[key].name); 
  var job = jsonResult.jobs[key].name; 
  console.log(job); 
  that.getLastBuildAPI(job); // 用that访问组件方法
});

3. 利用forEach的第二个参数指定this #

forEach方法本身支持第二个参数，用来指定回调函数执行时的this指向，直接把外层的this传进去就行：

Object.keys(jsonResult.jobs).forEach(function(key) { 
  jobs.push(jsonResult.jobs[key].name); 
  var job = jsonResult.jobs[key].name; 
  console.log(job); 
  this.getLastBuildAPI(job); 
}, this); // 这里传入外层的this，让回调里的this指向组件实例

这三种方法都能解决你的问题，个人比较推荐第一种箭头函数的写法，简洁又直观~

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