javascript - 我的全局变量返回为未定义 (JavaScript)

Question

我真的很难在这里使用基本的 Javascript...基本上，我正在尝试创建一个函数，在调用时设置两个变量(经度和纬度)，以便我可以在之后直接运行其他使用这些变量的函数值(value)观。

然而，当我尝试提醒经度值时，它返回未定义。

这是我的代码。

var latitude;    
var longitude;

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayLocation);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function displayLocation(position, latitude, longitude) {
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
  return;
}

function newLocation(longitude) {
  alert(longitude);
}

window.onload = function() {
  getLocation(); 
  newLocation();
}

任何帮助将不胜感激!谢谢。

Answer 1

您发布的代码存在一些问题:

displayLocation 的参数隐藏了您的全局变量。当您在此处进行赋值时，实际上是在为您的参数变量赋值，这些变量在局部范围内。

function displayLocation(position, latitude, longitude) {
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
}

IIRC，geolocation.getCurrentPosition 的回调只接受第一个参数，因此您不必将 latitude 和 longitude 定义为参数。

newLocation 函数中存在同样的问题。您调用它时没有参数，但 longitude 参数“隐藏”了全局变量。

这些都是小语法问题。然而，代码中还有另一个问题，解决起来有点棘手。

当页面加载时，您依次调用这两个函数:

window.onload = function() {
    getLocation(); 
    newLocation();
}

第二个函数 newLocation 需要 getLocation 设置全局变量。然而，情况可能并非如此。当 getLocation 函数调用 geolocation.getCurrentPosition 时，它正在执行一个异步操作。调用后的下一行立即继续执行，但回调函数displayLocation不一定被调用。起初理解起来可能有点复杂，但基本上您只需要调用 newLocation after displayLocation 运行。

所以它变得复杂了？这就是为什么尝试完全避免全局变量被认为是一种好的做法。 Javascript 经常迫使我们进行异步编程，并且试图了解全局变量在任何给定时间可能处于的所有可能状态可能会让您抓狂。

相反，如果可能，您应该始终直接使用函数参数。例如，在您的场景中，您可以完全跳过 displayLocation 步骤，直接转到 newLocation:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(newLocation);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function newLocation(position) {
    alert(position.longitude);
}

因此不再需要全局变量。

我确信您发布的示例代码是简化的，而您的实际代码更复杂，但如果您能够遵循这些原则，我认为您会更好地使用 javascript。