如何在javascript中访问当前范围之外的变量？

Posted 2023-02-22

【中文标题】如何在javascript中访问当前范围之外的变量？

【英文标题】：How can I access variables outside of current scope in javascript?

【发布时间】：2011-02-14 20:06:25

【问题描述】：

我正在用 javascript 编写一个应用程序，但无法弄清楚如何在这个 jquery 解析中访问我的函数中声明的变量。在里面我可以访问全局变量，但我并不想为这些值创建全局变量。

基本上我想从simulationFiles 变量中的xml 文档中提取文件名。我检查 node 属性是否与simName 相等，并提取 xml 元素中的两个字符串，我认为这部分工作正常。

如何提取这些 xml 元素并将它们附加到局部变量？

function CsvReader(simName) 
    this.initFileName = "somepath";
    this.eventsFileName = "somepath";
    $(simulationFiles).find('simulation').each(function() 
       if ($(this).attr("name") == simName) 
           initFileName += $(this).find("init").text();
           eventsFileName += $(this).find("events").text();
       
    );
   

【参考方案1】：

CsvReader 函数中的this 与each() 回调中的this 不同（它是迭代中的当前元素）。要在回调中访问外部函数的范围，我们需要能够通过另一个名称来引用它，您可以在外部范围中定义它：

function CsvReader(simName) 
    this.initFileName = "somepath";
    this.eventsFileName = "somepath";
    var self = this; // reference to this in current scope
    $(simulationFiles).find('simulation').each(function() 
       if ($(this).attr("name") == simName) 
           // access the variables using self instead of this
           self.initFileName += $(this).find("init").text();
           self.eventsFileName += $(this).find("events").text();
       
    );

【讨论】：

感谢您的快速回答，但不幸的是，这不起作用。其实我之前也试过了，但是在未命名的函数中，$self 被报告为不是由 firebug 定义的。

它是这样工作的！对此感到抱歉，当我将 this 保存到一个变量时，我在此函数调用后遇到了另一个错误，当我调试时，调试器向我显示 $self.initFileName 内部未定义，但实际上它正在工作并且我得到了结果。非常感谢！

你的this.initFileName 和this.eventsFileName 应该是你的函数还是整个页面的本地？ Nm...几秒钟后看到你的帖子。很高兴它有效！

@CantucciHQ：因为CsvReader 函数中的this 与each() 回调中的this 不同。要在回调中访问外部函数的范围，我们需要使用另一个名称来引用它。拥有$self 引用允许这种情况发生。

@Cory 非常感谢，这是有道理的。昨天我更加困惑——我没有使用 Chrome 开发工具在 $.each() 中找到变量。但事实证明该变量在 each() 中不存在，因为该变量尚未在 each() 中使用！一旦我在实际代码中添加了变量的用法，一切都运行良好。

【参考方案2】：

我创建了一个working demo（我将其更改为使用类，以便它可以与 html 一起使用）。

function CsvReader(simName) 
    this.initFileName = "somepath";
    this.eventsFileName = "somepath";
    var context = this;
    $(simulationFiles).find('simulation').each(function() 
       if ($(this).attr("name") == simName) 
           context.initFileName += $(this).find("init").text();
           context.eventsFileName += $(this).find("events").text();
       
    );
   

【讨论】：

这个方法效果很好，谢谢！抱歉，调试器错过了一点，告诉我它不起作用。

【参考方案3】：

你可以做的最简单的改变是......将你的函数从普通（function（））更改为箭头函数（（）=> ），这将自动获取上下文定义它的函数。