如何从 JavaScript 构造函数 function 中的 forEach 循环内部调用嵌套的 function？

Question

代码 1 - forEach 中的 this.kitchenStatus() 无法访问

我无法从 forEach 内部访问 function (this.kitchenStatus()) 的值，当我尝试以下操作时，我得到“未捕获的 TypeError：this.kitchenStatus 不是函数”：

const KitchenUtensil = function () {
    // Pay attention to this.kitchenStatus(), this is the function 
    // I want to get the values from inside the loops
    this.kitchenStatus = function () {
        let kStatus = "Kitchen open.";
        return kStatus;
    };
    let utensilsArray = ["spoon", "fork", "kettle"];

    // 1. WITH FOREACH FUNCTION
    utensilsArray.forEach(function (utensil) {
        let utensilLine = "In a forEach loop function:" + "\n";
        utensilLine += "It's a " + utensil 
        + ". " 
        // If you want to see it breaking uncomment the code below:
        // + this.kitchenStatus() 
        ;
        console.log(utensilLine);
    });

};

let teapot = new KitchenUtensil ();

代码 2 - for 循环内的 this.kitchenStatus() 可访问

所以，我尝试使用一个简单的 for 循环并且它有效：

const KitchenUtensil = function () {
    // Pay attention to this.kitchenStatus(), this is the function 
    // I want to get the values from inside the loops
    this.kitchenStatus = function () {
        let kStatus = "Kitchen open.";
        return kStatus;
    };
    let utensilsArray = ["spoon", "fork", "kettle"];

    // 2. WITH FOR LOOP
    for (let i = 0; i < utensilsArray.length; i++) {
        let utensilLine2 = "In a simple for loop:" + "\n";
        utensilLine2 += "It's a " + utensilsArray[i] 
        + ". " 
        // Unlike the forEach, the for loop can access the function:
        + this.kitchenStatus() 
        ;
        console.log(utensilLine2);
    };
};

let teapot = new KitchenUtensil ();

代码 3 - this.kitchenStatus() 值分配给一个新变量并从 forEach 内部调用新变量 - 它可以工作，但是它看起来像一个糟糕的解决方案

我没有放弃 forEach 并做了一个解决方法。 我没有尝试从 forEach function 内部访问 this.kitchenStatus，而是在循环外部创建了一个新变量“letMeIn”并将 this.kitchenStatus() 的值分配给它，然后从循环内部调用了 letMeIn。 它可以工作，但感觉一点也不对，我刚刚创建了一段新代码，其中只有 function 可以作为另一段代码的参考，就在下面几行：

const KitchenUtensil = function () {
    // Pay attention to this.kitchenStatus(), this is the function 
    // I want to get the values from inside the loops
    this.kitchenStatus = function () {
        let kStatus = "Kitchen open.";
        return kStatus;
    };
    let utensilsArray = ["spoon", "fork", "kettle"];

    // 3. THE ONLY WAY TO GET FOREACH TO ACCESS THE FUNCTION
    // Before the loop function is declared create a variable 
    // (e.g. letMeIn) and assign the value of this.kitchenStatus to it
    // This looks like a really crappy and unprofessional workaround:
    let letMeIn = "From a variable: " + this.kitchenStatus();
    utensilsArray.forEach(function (utensil) {
        let utensilLine = "In a forEach loop function:" + "\n";
        utensilLine += "It's a " + utensil 
        + ". " 
        // Once inside the loop invoke the variable:  
        + letMeIn 
        ;
        console.log(utensilLine);
    });

};

let teapot = new KitchenUtensil ();

代码 4 - 如果主构造函数被调用为简单的 function 而不是使用 new，则 forEach 会找到 this.kitchenStatus() 值

最后我尝试的最后一件事是调用构造函数 (?) function KitchenUtensil 作为一个简单的 function 通过使用“new KitchenUtensil ()”而不是“let teapot = new KitchenUtensil ()”：

const KitchenUtensil = function () {
    // Pay attention to this.kitchenStatus(), this is the function 
    // I want to get the values from inside the loops
    this.kitchenStatus = function () {
        let kStatus = "Kitchen open.";
        return kStatus;
    };
    let utensilsArray = ["spoon", "fork", "kettle"];
    
    utensilsArray.forEach(function (utensil) {
        let utensilLine = "In a forEach loop function:" + "\n";
        utensilLine += "It's a " + utensil 
        + ". " 
        // Now it will work, why???:
        + this.kitchenStatus() 
        ;
        console.log(utensilLine);
    });

};

// 4. INVOKE FUNCTION WITHOUT NEW
// Just comment the next line, and instead of invoking as a constructor:
// let teapot = new KitchenUtensil ();
// Invoke the then constructor directly as a simple function:
KitchenUtensil ();

到底是怎么回事？ 我必须做些什么才能让 forEach 找到并访问 this.kitchenStatus() 函数？

Answer 1

一个function创建一个新的上下文，所以this指的是这个 function。 为了使其按预期工作，您需要在forEach中将function更改为() => {} （箭头） function ：

utensilsArray.forEach((utensil) => {
    let utensilLine = "In a forEach loop function:" + "\n";
    utensilLine += "It's a " + utensil 
    + ". " 
    // Now it will work
    + this.kitchenStatus() 
    ;
    console.log(utensilLine);
});

另一种解决方案是将其保存this forEach()之前的变量中：

const self = this;
utensilsArray.forEach(function (utensil) {
    let utensilLine = "In a forEach loop function:" + "\n";
    utensilLine += "It's a " + utensil 
    + ". " 
    // Now it will work too
    + self.kitchenStatus() 
    ;
    console.log(utensilLine);
});

更多关于它是如何工作的可以在this很好的答案中找到。