如何从Javascript中的函数访问变量

如何从Javascript中的函数访问变量,javascript,function,variables,Javascript,Function,Variables,我想访问两个独立函数中的变量,即距离、顶点位置、路径,在名为getResult的主函数中。我如何在不改变代码或以最低限度的方式改变代码的情况下实现这一点 function getResult() { document.getElementById("vertex1").onchange = function() { var vertex1 = document.getElementById("vertex1").value; var vertex1Position = graph.no

我想访问两个独立函数中的变量,即距离、顶点位置、路径,在名为getResult的主函数中。我如何在不改变代码或以最低限度的方式改变代码的情况下实现这一点

function getResult() {

document.getElementById("vertex1").onchange = function() {
  var vertex1 = document.getElementById("vertex1").value;
  var vertex1Position = graph.node.findIndex(e => e.id == vertex1) + 1;
 document.getElementById("output").textContent = vertex1Position;
 var distance = execute(vertex1Position);  // How can I access distance in my result variable
};

    var vertex2Position = 0;
    console.log("whats here");    
    document.getElementById("vertex2").onchange = function() {
        var vertex2 = document.getElementById("vertex2").value;
         vertex2Position = graph.node.findIndex(e => e.name == vertex2)+ 1; // I also want to access vertex2Position in my result variable which is in outer function
        document.getElementById("secondOutput").textContent = vertex2Position;
       var path = getPath(vertex2Position); //How can I access path in var result
    };

var result = distance.vertex2Position; // I want to store distance and vertex2Position in result variable

document.getElementById("searchResult").innerHTML = "test" + result + "" + path + "."; // I also want to access path 
}
在javascript中,您需要了解作用域。在代码中 主要作用域是getResult()函数,因此如果要访问 子函数中的变量(getResult()中的函数) 函数),您需要在这个主函数的开头声明变量 范围

例如:

function getResult() {
  var distance, 
      path, 
      vertex1,
      vertex2, 
      vertex1Position,
      vertex2Position = 0;

  document.getElementById("vertex1").onchange = function() {
    vertex1 = document.getElementById("vertex1").value;
    vertex1Position = graph.node.findIndex(e => e.id == vertex1) + 1;

    document.getElementById("output").textContent = vertex1Position;
    distance = execute(vertex1Position);  
  }

  document.getElementById("vertex2").onchange = function() {
     vertex2 = document.getElementById("vertex2").value;
     vertex2Position = graph.node.findIndex(e => e.name == vertex2)+ 1;
     document.getElementById("secondOutput").textContent = vertex2Position;
     path = getPath(vertex2Position); //How can I access path in var result
  };

  result = distance.vertex2Position;
  document.getElementById("searchResult").innerHTML = "test" + result + "" + path + ".";

}

注意:您正在使用由“onchange”事件触发的函数,因此您的变量将作为未定义的变量启动,但“vertex2Position”除外。

您应该使用类似以下内容:

var container = (function(){
 var distance;
 var vertex2P;
 return {
    setDistance: function(distance){
        this.distance = distance;
    },
    getDistance: function(){return this.distance;},
    setVertex2P: function(vertex2P){
        this.vertex2P = vertex2P;
    },
    getVertex2P: function(){return this.vertex2P;},


}}());
然后你可以在其他类似的函数中获取和设置值

var result = function(){
container.setDistance(2);
container.setVertex2P(3);
console.log(container.getDistance() + container.getVertex2P());
}
result(); // 5
这些(也许)是您可以在Javascript中使用的最佳实践。使用这些方法,您可以避免全局变量,并为变量添加隐私,希望对您有所帮助

P.S您可以使用ECMASCRIPT 6缩短此过程

只要在外部而不是内部声明变量即可?每当发生更改事件时,您都在创建
距离
路径
。无法从
getResult
函数访问它。相反,当这样的事件发生时,您需要进行计算和输出,也就是说,您应该反转逻辑并从事件处理程序调用计算/输出函数。是的,这确实需要相当大的更改。@CertainPerformance在函数外部声明我的变量会显示为未定义的变量,0听起来您仍然在函数内部声明变量。您需要在外部声明它们,并且只在外部声明它们-您需要每个绑定一个,而不是一个two@CertainPerformance你能举例说明这样做吗?当试图分配
innerHTML
时,这将始终有
distance
path
处于
未定义状态,但是它对OP没有帮助。所以在问题涉及的场景中,它不起作用。