所以，我有这个 jQuery .each 循环，并且大部分都按预期工作；有一个问题，但首先是循环:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function Pushpin(){}
Pushpin.prototype.XZX = {
site: null,
getHtmlDescription: function () {
var html = '<b id="infoboxTitle" style="position:absolute; top:10px; left:10px; width:220px;">' + this.site.Name + '</b>';
html += '<a id="infoboxDescription" style="position:absolute; top:30px; left:10px; width:220px; height:120px;">{0}</a>';
var description = 'Headcount: ' + this.site.Headcount + '<br />';
description += 'Leases: ' + this.site.LeaseCount + '<br />';
html = html.replace('{0}', description);
return html;
}
};
var data = [
{"Address":{"City":"Atlanta","Country":"USA","County":"","Latitude":33.9882404987503,"Longitude":-84.1629638209203,"Region":"Southeast","State":"GA","StreetAddress":"Atlanta 177","ZipCode":"30096"},"Headcount":0,"ImageBytes":null,"ImageRefPath":"","LeaseCount":1,"Leases":null,"Name":"Atlanta","NextExpire":"\/Date(1495083600000-0500)\/","Number":"1052","PrimaryUse":"Garage","PropertyID":"OMNI","RecID":32839,"RecordID":1004,"RentableSquareFootage":22000,"SiteRecordID":"DEMO_29626","SiteTotalDollars":0,"Status":null,"Type":"LSE"},
{"Address":{"City":"Bellevue","Country":"USA","County":"","Latitude":47.6043250620083,"Longitude":-122.14236047437,"Region":"Northwest","State":"WA","StreetAddress":"Seattle 51","ZipCode":"98007"},"Headcount":0,"ImageBytes":null,"ImageRefPath":"","LeaseCount":1,"Leases":null,"Name":"Bellevue","NextExpire":"\/Date(1260424800000-0600)\/","Number":"1078","PrimaryUse":"Tower","PropertyID":"OMNI","RecID":32865,"RecordID":1027,"RentableSquareFootage":7652,"SiteRecordID":"DEMO_275651","SiteTotalDollars":0,"Status":null,"Type":"LSE"}
];
var mylist = [];
$.each(data, function (i, item) {
try {
var pin = new Pushpin();
pin.XZX.site = item;
mylist.push(pin);
} catch (e) { alert (e); }
});
$(document).ready(function() {
$('#btnAlert').click(function () {
$('#content').html(mylist[$('#index').val()].XZX.getHtmlDescription());
} );
});
</script>
</head>
<body >
<div style="margin-left:auto; margin-right:auto; width:300px;">
<div style="position:relative; width:250px;">
<select id="index">
<option>0</option>
<option>1</option>
</select>
<input type="submit" id="btnAlert"/>
</div>
<div id="content" style="position:relative;width:250px;"></div>
</div>
</body>
</html>
也可以在 jsfiddle 上找到:http://jsfiddle.net/M8YS2/
在循环结束时，mylist[x].site 对于任何 x 都指向我的数据项的同一个实例，我该如何解决这个问题？
最佳答案
问题是每个 pin.XYZ 都是相同对象——即 Pushpin.prototype.XYZ。
简单的“修复”是使用:
var pin = new Pushpin(...)
pin.XYZ = {
site: item
// the following will get tedious fast, consider one of the "property copy"
// implementations floating about -- including jQuery.extend
getHtmlDescription: Pushpin.prototype.XYZ.getHtmlDescription
}
这会将一个 new 对象分配给每个 new 图钉对象的 XYZ 属性。当然，这也可以设计不同:)
至少，将 XYZ 从 Pushpin.prototype 对象中移开——这将允许它被很好地视为一个对象(this 的传递方式实际上使得悬卡在原型(prototype)对象上的函数几乎不可能访问原型(prototype)所应用的对象的实例数据)；最终代码可能类似于:
// We .. "wrap" the real Pushpin constructor
// somewhere global after Bing Mapi JS loaded
Pushpin = (function (bingPushpin) {
return function Pushpin (...) {
var pin = new bingPushpin(...)
pin.XYZ = new XYZ()
// trick of "returning" from ctor
return pin
}
})(PushPin)
// ...
var pin = new Pushpin(...)
pin.XYZ.site = item
快乐编码。
更新前的回答:
这实际上不是范围问题——没有无意中创建闭包，每个表达式都经过严格评估。
我怀疑还有另一个问题，例如意外输入(数据包含一堆相同的项目)或有缺陷的假设(例如对象被神奇地克隆)或不相关的东西。
快乐编码。
分析:
var mylist = [];
$.each(data, function (i, item) {
// creates new object
var pin = new Pushpin(x, y);
// property of new object assigned
// remember that no "duplication" is occurring
pin.site = item;
// new object pushed to array
mylist.push(pin);
});
因此，pin 不会是相同的但item 有可能在每个循环中计算出相同的对象。 (唯一的异常(exception) 是图钉构造函数使用 return 返回现有对象，这确实很有趣。)
关于可变范围的 JavaScript 循环问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6378406/