let solves closure in for loop

Keywords: Web Development Amap

scene

  • Closure generation

    • Internal function depends on external scope variable, that is, internal holding external reference does not release (extends the life cycle of reference variable, prolongs life)
    • The essence of variable is actually a placeholder, whose value is the real operation object
    • Values can be scalars for each language, or memory addresses (that is, popular reference types)
  • var VS let

    • let block level scope (no block level scope exists in js before ES5)
    • In a block level scope, the variables declared by let will only continue in the area
    • var does not have the problem of block, and can continue to live outside the block
  • Relationship with for

    • The initial var variable is in the for loop, which is covered. In C, it is a common body, that is, it shares the same memory address
    • let initial variable is an independent variable in each for loop, with its own independent memory address.
  • The function body references variables that do not exist internally. It will look for variables with the same name in the upper scope

  • let + for + fn

    • The functions in the for statement block refer to the let declaration variables in this layer
    • A function that references an external scope variable will not be released actively, that is, if the function is called, the variable will survive in memory.
  • Summary

    • If the for block var variable is used in the function body, the function is called outside the for statement, and the VaR value used in the function is the VaR value after the end of the cycle
    • In the block, the let variable is used by the function body of the same level and the let variable is used. After that, the function is called, and the function uses the let variable value in the block of the definition time.
    • Whether the key uses the same value (or address)

Code

js generate the map mark of gaud
 buildMarkers() {
      // Initialize tag array
      this.markers = [];

      var image = ROAST_CONFIG.APP_URL + "/storage/img/coffee-marker.png";
      // Custom point marker
      var icon = new AMap.Icon({
        image: image,
        imageSize: new AMap.Size(19, 33)
      });

      for (var i = 0; i < this.cafes.length; i++) {
        // Create point markers and set latitude and longitude for each coffee shop
        var marker = new AMap.Marker({
          position: new AMap.LngLat(
            parseFloat(this.cafes[i].longitude),
            parseFloat(this.cafes[i].latitude)
          ),
          title: this.cafes[i].location_name,
          icon: icon,
          // Tag additional data for easy filtering
          extData: {
            cafe: this.cafes[i]
          },
          map: this.map,
          clickable: true
        });

        // To customize form information, let must be used to generate block level scope. This variable is a new variable in each cycle of for statement block. It is a new memory address exactly. When a new copy is generated, it is fixed
        // Reason mark click event handler depends on this variable. In js, closure dependency will look for references to values in the parent scope (if the parent has a scope), so it will not be released
        // With var, because there is no block scope in the for interval, its infoWindow value is the value after the end of the for loop
        let infoWindow = new AMap.InfoWindow({
          content: this.cafes[i].name +'_'+ this.cafes[i].location_name
        });

        // Bind click event to point marker object and click to open the information window created above
        marker.on("click", function() {
          infoWindow.open(this.getMap(), this.getPosition());
        });

        this.infoWindows.push(infoWindow);

        // Put tags in an array
        this.markers.push(marker);
      }
      // Show all tags to map
      this.map.add(this.markers);
    },

Posted by bkanmani on Sun, 08 Dec 2019 08:59:36 -0800