从其他功能访问变量

Question

所以我做了一个freeCodeCamp的项目，在这个项目中我必须获取您的位置并显示该位置的天气。一切正常（但它试图通过反复试验），但我不明白为什么我可以在putInHtml函数访问url变量，因为所有变量都在getPosition函数中声明。

这里是所有代码：

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);

<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>

好，不知它并不在这里工作，但它确实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

JavaScript范围是基于函数的。 showPosition函数是与getPosition函数分开的函数，它们是同级函数;即showPosition不嵌套在getPosition内部，因此它无法查看范围为showPosition的变量。如果您想要showPosition对url的可见性，那么url必须在包含这两个函数的范围内声明为较高。例如全局范围，包含这两种功能的功能（如IIFE）或ES6 class。或者，您可以将url的声明更改为ES6 let statement，以引入包含这两个函数的块范围。

Answer 3

在此功能中，

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; 
} 

网址是在全球范围内，因为你不使用VAR

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

与VAR宣布，将限制其范围showPosition功能那么你将无法在该功能之外使用。

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);