TypeScript中forEach内this.deletedPersons始终未定义问题求助

问题原因 #

你在forEach中使用普通function作为回调函数时，该函数内部的this指向和外部类实例的this并非同一个对象（普通函数会绑定自身的this，默认指向全局对象或严格模式下的undefined），因此访问this.deletedPersons会触发未定义报错。

三种可行解决方案 #

方案1：使用箭头函数

箭头函数不会绑定自身的this，会继承外部作用域的this指向：

this.deletedPersons = new Array<PersonMasterBase>();

selectedPersons.forEach((value) => {
  let index = allPersons.findIndex(p => p.p_PersonID == value.p_PersonID);
  if (index < 0) {
    return;
  } else {
    this.deletedPersons.push(allPersons[index]);
    allPersons.splice(index, 1);
  }
});

方案2：提前缓存外部this

将外部类实例的this存到变量中，在回调里使用该变量访问属性：

this.deletedPersons = new Array<PersonMasterBase>();
const self = this;

selectedPersons.forEach(function (value) {
  let index = allPersons.findIndex(p => p.p_PersonID == value.p_PersonID);
  if (index < 0) {
    return;
  } else {
    self.deletedPersons.push(allPersons[index]);
    allPersons.splice(index, 1);
  }
});

方案3：利用forEach的第二个参数绑定this

forEach支持传入第二个参数，指定回调函数内部的this指向：

this.deletedPersons = new Array<PersonMasterBase>();

selectedPersons.forEach(function (value) {
  let index = allPersons.findIndex(p => p.p_PersonID == value.p_PersonID);
  if (index < 0) {
    return;
  } else {
    this.deletedPersons.push(allPersons[index]);
    allPersons.splice(index, 1);
  }
}, this); // 传入外部this作为回调的this指向

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