Javascript：在循环中定义一个函数时变量是静态的吗？ [英] Javascript: Making a variable static when defining a function in a loop?

问题描述

使用Google地图，我有以下代码：

  var tileNames = [base，parking， 访问]; 
 var mapType = {}; 
 
 for（var i = 0; i< tileNames.length; i ++）{
 var tileOptions = {
 getTileUrl：function（coord，zoom）{
返回/ maps / tiles / tiles+ tileNames [i] +/+ zoom +_+ coord.x +_+ coord.y +.png; 
}，
 tileSize：new google.maps.Size（256，256）
}; 
 mapType [tileNames [i]] = new google.maps.ImageMapType（tileOptions）; 
}; 
  

下面是我的问题：getTileUrl函数中的tileNames [i]未定义该功能被执行。然而，tileNames数组仅用于定义mapType对象，因此，与传递给函数的coord和zoom变量不同，我正在使用tileNames [我]来定义这部分功能。因此，理想情况下，分配给mapType.parking的函数看起来像这样...
$ b $ pre $ function（coord，zoom）{
返回/ maps / tiles / tilesparking /+ zoom +_+ coord.x +_+ coord.y +.png;
};


...在第一段代码中定义函数之后。有什么方法可以获取变量/数组的值，并使用它来静态定义一个函数，同时将其他两个变量作为变量保存。

---

编辑：看下面的各种答案，以下是迄今为止我所能达到的最佳效果。虽然绑定可能是更普遍情况下的理想方法，但在这种特定情况下，getTileUrl：显然需要特定的语法，并将绑定放置在为其定义的函数上会导致Google地图的错误。在试图KGZM的建议，它在一切工作，而不是在IE8和以下。

  var tileNames = [beloit ，停车，access_p]; 
 var mapType = {}; （var i = 0; i< =（tileNames.length  -  1）; i ++）{
（function（i）{
 tileOptions = {$ b $（
 
） b getTileUrl：function（coord，zoom）{
 return/ maps / tiles / tiles+ tileNames [i] +/+ zoom +_+ coord.x +_+ coord.y +.png; 
}，
 tileSize：新的google.maps.Size（256,256）
}; 
 mapType [tileNames [i]] =新的Google。 maps.ImageMapType（tileOptions）; 
}）（i）; 
}; 
  

解决方案

基本上，你的函数实际上有三个参数， zoom 变量， coord 对象和 tileNames [i] 值，但是您希望 tileNames [i] 值在您的代码中一次固定为某个特定值，并将其他两个变量保留为实际变量。

 函数getTileUrlBuilder（tilename）{
 return function（coord，zoom）{
 return/ maps / tiles / tile+ tilename +/+ zoom +_+ coord.x +_ + coord.y; 
}; 
} 
  

然后你可以在你的循环中使用这个函数。但是，由于这实际上是一种常见操作，因此您可以使用 bind 方法来处理此操作：

 （函数（tilename，coord，zoom）{
 return/ maps / tiles / tile+ tilename +/+ zoom +_+ coord.x +_ + coord.y 
}）。bind（this，tileNames [i]）; 
  

这将隐藏 this 到当前 this ，然后将第一个参数绑定到当前值 tileNames [i] 。

编辑：这，我认为应该是工作代码。

  var tileNames = [beloit，parking，access_p]; 
 var mapType = {}; 
 $ b $ function getTileUrlFull（tileName，coord，zoom）{
 return/ maps2 / tiles / tiles+ tileName +/+ zoom +_+ coord.x +_ + coord.y +.png
} 
 
 for（var i = 0; i< tileNames.length; i ++）{
 mapType [tileNames [i] ] = new google.maps.ImageMapType（{
 getTileUrl：getTileUrlFull.bind（this，tileNames [i]），
 tileSize：new google.maps.Size（256,256）
} ）; 
} 
  

Working with Google Maps, I have the following code:

var tileNames = ["base", "parking", "access"];
var mapType = {};

for (var i = 0; i < tileNames.length; i++) {
    var tileOptions = {
    getTileUrl: function(coord, zoom) {
        return "/maps/tiles/tiles" + tileNames[i] + "/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256)
    };
mapType[tileNames[i]] = new google.maps.ImageMapType(tileOptions);
};

Here is my issue: the "tileNames[i]" in the "getTileUrl" function is undefined when the function is executed. However, the "tileNames" array is only meant to be used here in defining the "mapType" object and thus, unlike the "coord" and "zoom" variables which are passed to the function, I'm looking to use "tileNames[i]" to define that part of the function. Thus, ideally, the function assigned to mapType.parking would look like this...

function(coord, zoom) {
    return "/maps/tiles/tilesparking/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
};

...after the function is defined in the first piece of code. Is there any way to take the value of a variable/array and use it to statically define a function while maintaining the other two variables as variables.

---

Edit: Looking at the various answers below, the following is the best I've been able to achieve thus far. While bind might be the ideal approach in a more general scenario, in this specific case, "getTileUrl:" apparently wants a specific syntax and placing the bind around the function defined for it causes errors for Maps. In trying KGZM's suggestion, it works in everything up to date and not in IE8 and below.

var tileNames = ["beloit", "parking", "access_p"];
var mapType = {};

for (var i = 0; i <= (tileNames.length - 1); i++) {
    (function(i) {
        tileOptions = {
            getTileUrl: function(coord, zoom) {
                return "/maps/tiles/tiles" + tileNames[i] + "/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
            },
            tileSize: new google.maps.Size(256, 256)
        };
        mapType[tileNames[i]] = new google.maps.ImageMapType(tileOptions);
    })(i);
};

解决方案

There is a functional programming concept that can handle this well

Basically, your function actually has three arguments, the zoom variable, the coord object, and the tileNames[i] value, but you want the tileNames[i] value to be fixed to a particular value at one time in your code, and leave the other two variables as actually variable.

function getTileUrlBuilder(tilename) {
    return function(coord, zoom) {
        return "/maps/tiles/tile" + tilename + "/" + zoom + "_" + coord.x + "_" + coord.y;
    };
}

Then you can use this function in your loop. However, since this is actually a common operation, you can use the bind method to handle this:

(function(tilename, coord, zoom) {
    return "/maps/tiles/tile" + tilename + "/" + zoom + "_" + coord.x + "_" + coord.y
}).bind(this, tileNames[i]);

That will "bind" the implicit this to the current this, and then bind the first argument to the current value of tileNames[i].

EDIT: This, I think, should be the working code.

var tileNames = ["beloit", "parking", "access_p"];
var mapType = {};

function getTileUrlFull(tileName, coord, zoom) {
    return "/maps2/tiles/tiles" + tileName + "/" + zoom + "_" + coord.x + "_" + coord.y + ".png"
}

for(var i = 0; i < tileNames.length; i++) {
    mapType[tileNames[i]] = new google.maps.ImageMapType({
        getTileUrl: getTileUrlFull.bind(this, tileNames[i]),
        tileSize: new google.maps.Size(256, 256)
    });
}

这篇关于Javascript：在循环中定义一个函数时变量是静态的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！