TypeScript中部分代码无法访问，出现Cannot read properties of undefined错误

报错Cannot read properties of undefined (reading 'setNewsProvider')的核心是**forEach回调里的普通函数改变了this的指向**：

• 外部代码里的this指向当前类的实例，能正常调用setNewsProvider；
• 但forEach的普通function回调内部，this在严格模式下会变成undefined（非严格模式是全局对象），自然找不到实例上的setNewsProvider方法。

方案1：使用箭头函数（推荐） #

箭头函数不会创建自己的this，会继承外部作用域的this，直接解决指向问题：

if (this.newsShow != null) {
    if (this.glbNews.nIds == null) { 
        this.setNewsProvider();
    }
    else {
        if (this.newsShow.EmpLst == null) { 
            this.setNewsProvider();
        }
        else {
            if (this.newsShow.LCL == "X300") {
                if (this.newsShow.MXD == "N300") {
                    var prd1 = this.newsShow.ProducerChk;
                    // 替换普通函数为箭头函数
                    this.glbNews.PrdNcc.forEach((value) => {
                        if (value == prd1) {
                            this.setNewsProvider(); // 此处this指向正确
                        }
                    })
                }
                else {
                   // 其他代码
                }
            }
        }
    }
}

方案2：提前保存外部的this到变量 #

把外部指向实例的this存到一个变量（比如self/that），回调里用这个变量代替this：

if (this.newsShow != null) {
    if (this.glbNews.nIds == null) { 
        this.setNewsProvider();
    }
    else {
        if (this.newsShow.EmpLst == null) { 
            this.setNewsProvider();
        }
        else {
            if (this.newsShow.LCL == "X300") {
                if (this.newsShow.MXD == "N300") {
                    var prd1 = this.newsShow.ProducerChk;
                    const self = this; // 保存当前实例的this
                    this.glbNews.PrdNcc.forEach(function (value) {
                        if (value == prd1) {
                            self.setNewsProvider(); // 使用self调用方法
                        }
                    })
                }
                else {
                   // 其他代码
                }
            }
        }
    }
}

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

forEach支持第二个参数，用来指定回调函数内部的this指向，直接传入外部的this即可：

if (this.newsShow != null) {
    if (this.glbNews.nIds == null) { 
        this.setNewsProvider();
    }
    else {
        if (this.newsShow.EmpLst == null) { 
            this.setNewsProvider();
        }
        else {
            if (this.newsShow.LCL == "X300") {
                if (this.newsShow.MXD == "N300") {
                    var prd1 = this.newsShow.ProducerChk;
                    // 第二个参数传入外部的this
                    this.glbNews.PrdNcc.forEach(function (value) {
                        if (value == prd1) {
                            this.setNewsProvider(); // 此处this指向正确
                        }
                    }, this)
                }
                else {
                   // 其他代码
                }
            }
        }
    }
}

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