如何保存内部作用域变量以用于外部作用域？

Question

如何获取变量cool以便我可以在 的函数之外使用它gotSpeech()？我想将它用于guessedCorrect()单击按钮时也会运行的功能。那可能吗？let speechRec = new p5.SpeechRec('en-US', gotSpeech);function gotSpeech() {    if (speechRec.resultValue) {        cool = speechRec.resultString;        if (cool == "0") {            zero.style.color = "#dc3545";        }        if (cool == "5") {            five.style.color = "#dc3545";        }        if (cool == "10") {            ten.style.color = "#dc3545";        }        if (cool == "15") {            fifteen.style.color = "#dc3545";        }        if (cool == "20") {            twenty.style.color = "#dc3545";        }    }}button.addEventListener("click", function(event) {    resetround();    speechRec.start();    setTimeout("getComputerChoice()", 3000);    setTimeout("identifyHands()", 3000);    clearInterval(myInterval);    myInterval = setInterval(function() {        time--;        if (time == -1) {            button.innerHTML = "Again";            clearInterval(myInterval);            time = 4;        } else {            button.innerHTML = "Start";            numbers.innerHTML = time;        }    }, 1000);    setTimeout("guessedCorrect()", 5000);})输出undefined在超出范围时返回。

Answer 1

有很多方法可以解决这个问题。最明显的是修改您的调用guessedCorrect()以显式传递它：

setTimeout(() => { guessedCorrect(cool); }, 5000);

当然，这意味着您需要修改 的定义guessedCorrect()以适应传入的参数，即：

function guessedCorrect(cool) { //...

这具有不通过字符串名称引用函数的额外优势。正如@Shahzad 所说，这会导致您的代码在缩小时中断，因为缩小不会改变字符串。更好的是使用函数引用，所以：

setTimeout(guessedCorrect, 5000);

此外，if/else if通过使用switch()块甚至对象作为颜色值映射可以大大减少您重复的博客。

[编辑]

回应你后来的评论：

this是正在执行当前闭包的上下文。默认上下文，即直到有什么改变它，是window。通常上下文是自动设置的，例如在this指向触发元素的事件回调中。但是在您的情况下，我们可以（尽管这将是一种相当奇怪的方法）设法this指向 的值cool，因此：

setTimeout(guessedCorrect.bind(cool), 5000);

之后，调用thisinsideguessedCorrect()将调出调用cool函数时存在的值。

Answer 2

好吧，您实际上需要的是值而不是变量；以及您已经可以使用speechRec.resultString点表示法访问它的值。

你可以尝试这样的事情：

// An modification that the post from above offers you, which is pretty good for this case. value-to-colours 

const colors = {

 0: '#dc3545',

 5: '#dc3545',

 10: '#dc3545',

 15: '#dc3545',

 20: '#dc3545',

};

function gotSpeech() {

    if (speechRec.resultValue) {

        zero.style.color = colors[speechRec.resultString];

    }

}

button.addEventListener("click", function(event) {

    resetround();

    speechRec.start();

    // Why are you passing the functions as string?

    // Better do this

    setTimeout(getComputerChoice, 3000);

    setTimeout(identifyHands, 3000);

    clearInterval(myInterval);

    myInterval = setInterval(function() {

        time--;

        if (time == -1) {

            button.innerHTML = "Again";

            clearInterval(myInterval);

            time = 4;

        } else {

            button.innerHTML = "Start";

            numbers.innerHTML = time;

        }

    }, 1000);

    setTimeout(guessedCorrect.bind(null, speechRec.resultString), 5000);

})

如果您的guessedCorrect函数是从另一个文件导出的，我将使用该bind函数创建一个具有给定参数的新函数。否则，如果您在同一个文件中有该函数，只需像这样传递函数：

setTimeout(guessedCorrect, 5000);

在函数内只使用全局变量speechRec.resultString。

注意：尽量使用严格比较 ( ===) 而不是抽象 ( ==)。