回调函数无法访问父函数范围内的变量

Posted 2023-02-22

【中文标题】回调函数无法访问父函数范围内的变量

【英文标题】：Callback function cannot access variable within parent function's scope

【发布时间】：2019-01-05 23:02:14

【问题描述】：

在下面的代码中，变量text在findTextToDelete函数中是不可访问的（它会产生错误）

array = ['a', 'b', 'removeThis', 'c'];
removeText("removeThis");

function removeText(text) 
    array.splice(array.findIndex(findTextToDelete),1);


function findTextToDelete(element) 
    return element === text;

我可以通过创建一个全局变量“globalText”来解决这个问题：

var globalText = "";
array = ['a', 'b', 'removeThis', 'c'];
removeText("removeThis");

function removeText(text) 
    globalText = text;
    array.splice(array.findIndex(findTextToDelete),1);


function findTextToDelete(element) 
    return element === globalText;


console.log(array)

但是我试图理解为什么第一种方法不起作用。

似乎必须有更好的方法来做到这一点。有没有办法将“文本”传递给回调函数？

任何帮助将不胜感激。

【参考方案1】：

您可以使用closure 而不是text 来查找元素。

function removeText(text) 
    array.splice(array.findIndex(findTextToDelete(text)), 1);


function findTextToDelete(text) 
    return function (element) 
        return element === text;
    


var array = ['a', 'b', 'removeThis', 'c'];

removeText("removeThis");
console.log(array)

【参考方案2】：

是的，我认为您对 closure 感到困惑。

回调函数没有调用者的作用域。所以你不能访问findTextToDelete中的变量text。

如果要访问变量，请将其作为参数传递给回调函数。

【参考方案3】：

在一个函数中定义的局部变量仅可用于在第一个函数中定义的其他函数。函数中定义的局部变量的范围仅限于该函数。这通常称为lexical scoping。 （其他语言有不同的规则，但词法在命令式语言中很常见。）

所以你需要在removeText 中定义一个函数来访问text。

一种方法是只使用函数字面量而不是命名函数：

function removeText(text) 
    globalText = text;
    array.splice(array.findIndex(function (element) 
        return element === globalText;
    , 1);

另一种方法是转发额外的值：

function removeText(text) 
    globalText = text;
    array.splice(array.findIndex(function (el)  returnfindTextToDelete(el, text); , 1);


function findTextToDelete(element, text) 
    return element === globalText;

（如果您不拘泥于向后兼容性，那么箭头函数会使两者都更容易编写。）