范围问题，匿名函数访问变量上面？

Question

我的印象是匿名函数可以访问上面定义的变量吗？

这个函数在一个变量中，所以它不应该在我试图访问的变量定义之前运行，因为当然函数是在我理解的编译器中的变量之前运行的。

var sidebar = {};
sidebar['locations'] = map.getElementsByClassName('google-map-locations')[0];

// Generate location links function
var addLocationLinks = function(i) {

  // Append the links to the HTML.
  console.log(sidebar['locations']); // undefined
};
for (var i in this.options.locations) {
  addLocationLinks.call(this, i);
}

修改

build() {
  const _ = this;

  _.map = new google.maps.Map(_.options.container, {
    center:new google.maps.LatLng(_.options.locations[0].lat, _.options.locations[0].lng),
    zoom: 16
  });

  // This loop will create markers but also check if images exist for custom markers. 
  for(var i in _.options.locations) {
    _.create_marker.call(_, _.options.locations[i], i); // Create marker
  }

  // Due to checking images exist we must ensure the above has completed before continuing, 
  // keep on checking saved markers equal locations
  (function markers_created() {
    const _ = this;

    if((this.options.locations).length !== this.markers.length) {
      setTimeout(markers_created.bind(this), 5);
      return;
    }
    // Markers have been added, continue with the plugin execution
    _.handle_sidebar.call(_);
  }.call(_));
}

// This next function will basically use an array's data to add some additional HTML, should be unrelated to the Google Maps API
  handle_sidebar(x) {
    const _ = this;

    // Generate the sidebar and add it to the DOM
    if ((_.options.container).getElementsByClassName('google-map-sidebar').length === 0) {

      var sidebar = { 
        map: (_.options.container).firstChild // Get the DIV the map is within before adding more.
      };

      // Sidebar doesn't exist yet, create it.
      (function() {
        const container = _.options.container;

        // Construct most HTML as a string, easier to read..
        var html = '<section class="google-map-sidebar">';
        html +=      '<span class="google-map-toggle"></span>';
        html +=      '<div class="google-map-container">';
        html +=        '<div class="google-map-main>';
        html +=          '<h3>Contact</h3>';  
        html +=          '<ul class="google-map-locations"></ul>'
        html +=        '</div>';
        html +=      '</div>';
        html +=    '</section>';

        // Append the HTML
        container.insertAdjacentHTML('afterbegin', html);

        // Maintain reference to HTMLElements
        sidebar['toggle'] = container.getElementsByClassName('google-map-toggle')[0];
        sidebar['content'] = container.getElementsByClassName('google-map-container')[0];
        sidebar['home'] = container.getElementsByClassName('google-map-main')[0];
        sidebar['locations'] = container.getElementsByClassName('google-map-locations')[0];

        // Generate location links function
        var addLocationLinks = function(i) {
          var link = document.createElement('a');
          link.title = _.options.locations[i].name;
          link.innerHTML = _.options.locations[i].name;
          link.classList.add((_.options.locations[i].type === undefined) ? 'showroom' : _.options.locations[i].type);
          link.addEventListener('click', function() {
            _.handle_sidebar(i);
          });

          // Append the links to the HTML.
          console.log(sidebar['locations']);
          sidebar['locations'].appendChild(link);
        };
        for (var i in _.options.locations) {
          addLocationLinks.call(_, i);
        }
      }.call(_));

      // Add event listeners
      sidebar['toggle'].addEventListener('click', function() {
        sidebar['toggle'].classList.toggle('hide');
        sidebar['map'].classList.toggle('hide');
      });


      // Add sidebar enabled class to map
      sidebar['map'].classList.add('sidebar_enabled');

      // Finished adding the initial sidebar
      return;
    }
  }
}

编辑2：

很抱歉浪费时间，原因是html字符串缺少双引号而没有转换为正确的HTML！