Question

所以我从freeCodeCamp做了一个项目，我必须得到你的位置并显示该位置的天气。一切正常（通过试验和错误使其工作）但是我不太明白为什么我可以在url函数中访问putInHtml变量，因为所有变量都在getPosition函数中声明。

以下是所有代码：

＆＃13;

function getPosition(){
  var lat, lon, url;
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert('Cant find location');
  }
}
function showPosition(pos) { /// paima objecta is getCurrentPosition    
  lat = pos.coords.latitude;
  lon = pos.coords.longitude;   
  url = "https://fcc-weather-api.glitch.me/api/current?lat="+lat+"&lon="+lon;
}  
getPosition();

function putInHtml(){
  
  $.ajax({
    type:"GET",
    url: url,
    dataType:"json",
    success: function(data){

      $('#location').html(data.name);
      $('#temp').html(data.main.temp);
      $('#desc').html(data.weather[0].description)
    },
    error: function (request, status, error) {
          console.log(error);
    }
  })   
} 

$("#spust").click(putInHtml);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-center">Weather App</h1>

<h2 id="location"></h2>
<h1 id="temp"></h1>
<p id="desc"></p>
<button id="spust">Spust</button>

＆＃13;

嗯，不知怎的，它在这里不起作用，但它确实在codepen中。

Answer 1

您的lat，lon和url变量不在其余功能的范围内。你可以通过声明函数之外的变量来解决这个问题：

var lat, lon, url;
function getPosition(){
  //Removed your variables from here
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert('Cant find location');
  }
}
function showPosition(pos) { /// paima objecta is getCurrentPosition    
  lat = pos.coords.latitude;
  lon = pos.coords.longitude;   
  url = "https://fcc-weather-api.glitch.me/api/current?lat="+lat+"&lon="+lon;
}  
getPosition();

function putInHtml(){

  $.ajax({
    type:"GET",
    url: url,
    dataType:"json",
    success: function(data){

      $('#location').html(data.name);
      $('#temp').html(data.main.temp);
      $('#desc').html(data.weather[0].description)
    },
    error: function (request, status, error) {
          console.log(error);
    }
  })   
} 

$("#spust").click(putInHtml);

现在您的变量将在所有函数的范围内，因为我们已将它们添加到全局范围。阅读有关范围的更多信息here.希望有所帮助！

Answer 2

在此功能中，

var url = "https://fcc-weather-api.glitch.me/api/current?lat="+lat+"&lon="+lon;

url 属于全球范围，因为您未使用 var

var the_height =
  document.getElementById('resize').contentWindow.document.documentElement.scrollHeight;

使用 var 声明它会将其范围限制为showPosition函数，然后您将无法在该函数外部使用。

Answer 3

JavaScript范围是基于功能的。 showPosition函数是与getPosition函数不同的函数，它们是对等函数;也就是说，showPosition未嵌套在getPosition内，因此它无法看到作用于showPosition的变量。如果您想showPosition url的{{1}}可见度，则必须在包含这两个函数的范围内将url声明为更高。例如，全局范围，包含两个函数的函数（例如IIFE）或ES6 class。或者，您可以将url的声明更改为ES6 let statement，以引入包含两个函数的块范围。

Answer 4

定义任何函数之外的全局变量，以便您可以在任何函数内部或外部访问或更新它：

 var url; //This makes the URL globally defined

function getPosition(){
      var lat, lon, url;
      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        alert('Cant find location');
      }
    }
    function showPosition(pos) { /// paima objecta is getCurrentPosition    
      lat = pos.coords.latitude;
      lon = pos.coords.longitude;   
      url = "https://fcc-weather-api.glitch.me/api/current?lat="+lat+"&lon="+lon;
    }  
    getPosition();

    function putInHtml(){

      $.ajax({
        type:"GET",
        url: url,
        dataType:"json",
        success: function(data){

          $('#location').html(data.name);
          $('#temp').html(data.main.temp);
          $('#desc').html(data.weather[0].description)
        },
        error: function (request, status, error) {
              console.log(error);
        }
      })   
    } 

    $("#spust").click(putInHtml);

从其他函数访问变量

4 个答案: