javascript - 无法访问函数外部的变量

Question

我有以下 JS:

Meteor.startup(function () {
  map = L.map('map_canvas').locate({setView: true, maxZoom: 21});
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
    bounds = {};    
    map.on('locationfound', function(e){ 
      bounds.bottomLeftLat = map.getBounds()._southWest.lat;
      bounds.bottomLeftLng = map.getBounds()._southWest.lng;
      bounds.topRightLat = map.getBounds()._northEast.lat;
      bounds.topRightLng = map.getBounds()._northEast.lng;
      console.log(bounds);
    });
  console.log('outside function: '+bounds);
});

我的第一个 console.log 在控制台中正确输出了 4 个对象属性及其值，但外部函数日志输出一个空对象，当我尝试访问 Meteor.startup 之外的边界时，它甚至没有定义。我知道函数限制了变量的范围，但是如果边界是在匿名函数之外定义的，没有“var”，那么它不被认为是全局的吗？

1. 为什么我可以访问 Meteor.startup 之外的“ map ”，但不能访问“边界”？
2. 如何通过遵循更智能的模式(模块？)来重写此代码，以便我既可以在脚本的其他部分中使用边界，又可以在我尝试时成功添加四个属性？

编辑事件被触发 - 手动触发后，我仍然得到一个空对象:

map.fire("locationfound");
Object {type: "locationfound", target: e, bottomLeftLat: 50.05008477838258, bottomLeftLng: 0.384521484375, topRightLat: 51.63847621195153…}
 MainClient.js:12
e {options: Object, _container: div#map_canvas.leaflet-container leaflet-fade-anim, _panes: Object, _mapPane: div.leaflet-map-pane, _tilePane: div.leaflet-tile-pane…}
bounds
Object {}

Answer 1

它看到了bounds，但您的console.log发生在locationfound事件的回调之前，因此当您尝试访问它。

所有的初始化都会在 locationfound 事件第一次触发时发生，此时的日志将显示您期望的结果。

一些想法。

1. 一般来说，声明没有 var 的变量是不受欢迎的。如果您想全局访问它，请在全局上下文中使用 var 声明它，或者(理想情况下)使用命名空间变量并将所有全局变量声明为其属性。

2. 如果您想在修改后访问边界，您可以将调用放入回调中运行的函数

更新以阐明代码的行为

以下是您的代码的执行方式。

//This is the startup function for meteor.  It is passed a function, 
//and executes that function when the code starts up
Meteor.startup(function () {
    //You're now inside the function you passed to startup, and you initialize map
    //...
    bounds = {};    
    //here you call the `on` function on map, and bind a 
    //callback function to the locationfound event
    map.on('locationfound', function(e){ 
      //This code is inside the callback and will be executed when the event occurs 
      
      // code initializing bounds

      console.log(bounds); //this will show the full definition of bounds
      //callback ends here
    });
  //this is outside the callback but still inside startup, 
  //and occurs immediately after the call to map.on
  console.log('outside function: '+bounds); //bounds is still empty
}); //end the startup function

看来您需要理解的关键是 on 函数。它是一个传单函数，接受 2 个参数，一个事件类型和一个回调函数，并将回调函数绑定(bind)到事件。回调函数会在事件发生时运行，而不是之前。回调不会立即运行。相反，代码会继续执行，并在事件发生时执行回调代码。

Documentation for on