在函数范围外访问 var答案

【问题标题】：access var outside function scope在函数范围外访问 var
【发布时间】：2020-05-31 00:47:11
【问题描述】：

我有以下代码，我正在尝试在外部访问 selectedBrand var，以便在可能的代码中的其他地方使用它

var selectedBrand;
var brand_sel = d3.select('select')
    .on("change",function(b) {
        selectedBrand = d3.select("#brand").node().value;
    });

  console.log(selectedBrand)

当我尝试 consollog selectedBrand 我得到 undefined 结果。

我尝试了几乎所有我理解的东西，但没有成功

非常感谢您的帮助

【问题讨论】：

因为你的函数还没有运行。
变量的值在change事件触发之前不会改变，并且处理程序将被执行。之后，您将在selectedBrand 中获得一个新值。

标签： javascript function d3.js scope var

【解决方案1】：

您正尝试立即记录它的值，但在您的更改处理程序执行之前它将保持未定义：

以下是否有助于说明？

var selectedBrand;
var brand_sel = d3.select('select')
   .on("change",function(b){
      selectedBrand = d3.select("#brand").node().value;
      run();
   })

var run = function() { console.log(selectedBranch); } // <- this runs after you've defined the value because you've called `run()` in your change handler
console.log(selectedBrand); // <- this runs first, while the value is undefined

这感觉就像古老的How do I return the response from an asynchronous call?

【讨论】：

【解决方案2】：

只需调用您的函数brand_sel()。
因为现在您只定义了它，但从未真正调用过它，因此它从未被触发，selectedBrand 仍未定义。

这也是我不想在我的代码中处理的一些肮脏的范围界定。一般来说，你正在做的是一个糟糕的模式，会导致错误。开始使用 const / let 来避免范围界定问题，并且通常尽量保持范围干净 - 这很容易成为 function return，而不是通过函数调用直接改变变量。

至少，代码顶部的"use strict"; 可能是个好主意。

总体而言，听起来没有居高临下的意思，看起来您正在开发一些“不太好”的做法。网上有很多很好的教程甚至书籍都在“正确地”教授 JS。我知道这听起来像是在抨击你，但相信我，从长远来看，这是值得的，如果你不想花 3 个小时调试，为什么你的值不能在循环中正确更新等等。

【讨论】：

【解决方案3】：

首先感谢重播。我对javascript很陌生，我正在边做边学。可能我在某些地方完全误解了js逻辑。

无论如何，我可能会分享错误的请求，希望它能解决我的问题。回到最开始的问题。

假设我有一个这样的变量

    var filteredMedia =nest1.filter(function(d) {
  return d.key == brand_sel})[0]

其中brand_sel 必须在页面加载和更改时更新。

brand_sel 是下拉列表中选定选项的值。

使用此代码

    function update() {
   var brand_sel = d3.select("#brand").node().value
  return brand_sel;
}
var brand_sel = update();

console.log(update())

页面加载时一切正常。

现在我正在尝试通过以下方式运行update 函数，但当然我仍然无法理解一些东西

d3.select('select').on("change", function(){
  update();
});

【讨论】：