作者usherII (阿达)
看板Ajax
标题[问题] 这个传递资料错误的原理为何?
时间Tue Aug 22 23:08:07 2017
各位大大好~
小弟研究了半天找到了
不会出错的写法
但是
会出错的写法我怎麽想都想不通它是如何产生那样的错误结果
想来请教各位
以下是我完整的测试网页
======================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>Test</title>
<style type="text/css">
.myBtn {width: 150px; padding: 4px; margin: 4px;}
</style>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 按钮templete
var tpl_btn = '<button class="myBtn"></button>';
// 文句库
var txtLibrary = {
'0001': 'Allen',
'0002': 'Bob',
'0003': 'C'
};
// 页面ready初始化
$(document).ready(function() {
setWindow([
{tid: '0001', func: A_FUNC},
{tid: '0002', func: B_FUNC},
{tid: '0003', func: C_FUNC}
]);
});
// 产生画面
function setWindow(infoArray) {
var buttons = [];
// 不会出错
$(infoArray).each(function(i, info) {
var _label = txtLibrary[info.tid],
_func = function(e) {
info.func(true, _label);
};
buttons.push({label: _label, func: _func});
});
// 会出错
/*
for (var i in infoArray) {
var info = infoArray[i],
_label = txtLibrary[info.tid],
_func = function(e) {
info.func(true, _label);
};
buttons.push({label: _label, func: _func});
}
*/
setButtons(buttons);
}
// 产生按钮
function setButtons(buttons) {
var $btnArea = $('#btnArea');
for (var i = 0; i < buttons.length; i++) {
var btn = buttons[i];
$btnArea.append($(tpl_btn)
.html(btn.label).on('click', btn.func)
);
}
}
function A_FUNC(isDebug, name) {
alert(name + ' run A ' + (isDebug ? 'DEBUG' : 'FUNCTION'));
}
function B_FUNC(isDebug, name) {
alert(name + ' run B ' + (isDebug ? 'DEBUG' : 'FUNCTION'));
}
function C_FUNC(isDebug, name) {
alert(name + ' run C ' + (isDebug ? 'DEBUG' : 'FUNCTION'));
}
</script>
</head>
<body>
<div id="btnArea"></div>
</body>
</html>
======================
正常得到的结果是
按 Allen 这个 button 显示 "Allen run A DEBUG"
按 Bob 这个 button 显示 "Bob run B DEBUG"
按 C 这个 button 显示 "C run C DEBUG"
而错误的那个写法会得到
按 Allen 这个 button 显示 "C run C DEBUG"
按 Bob 这个 button 显示 "C run C DEBUG"
按 C 这个 button 显示 "C run C DEBUG"
是如何错的呢？
感谢~~~
--
◢ . ＿＿＿＿＿＿ ◣ ◣ ◢
◣ ◢ ◢ ◥█◣▲◢█◤ ◣
◥ ◥ ● │GRAVEYARD. \‧◣ ◥ █
◣◢
█ ◤ ◢ ◢◤◥█◤◥◣ ◤ ◤
' \ BILE DEMON│ '◣ ◥◥
▌◤◤ ◢ ◢▌ ◣▽◢▌ ◣
▄ ▄￣￣￣￣￣￣ ◤ ◢
█▌ ◣ ◥ ▎ ◥▌ ◤ ▊
◢◢ ▌ //＼ ●● ◣◥◥ ◤
◥ ◤◤◢ ◥◥ ︵ ◤◤ ◣◣
◥ ▃▇ ▆◣▂◢▂▅≡█▄ ◣ ＵＳＨＥＲ ◢ Ⅲ◥◢▅◣◤Ⅲ ◤
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.224.50.35
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1503414498.A.94D.html
※ 编辑: usherII (61.224.50.35), 08/22/2017 23:11:06
※ 编辑: usherII (61.224.50.35), 08/22/2017 23:16:36
1F：推 xdraculax: 正确的 _func 归属在各自 function 下，各自独立，错误 08/22 23:53
2F：→ xdraculax: 的归属在 setWindow 下，function 为传址，後续定义盖 08/22 23:53
3F：→ xdraculax: 了前面的 08/22 23:53
4F：→ usherII: 就结果看是如此，问题是for里面的新var为何会被覆盖？ 08/23 00:37
5F：→ usherII: 而且有趣的是,错误写法的button其label显示没错 08/23 00:39
6F：→ usherII: 只错alert出来的部分 08/23 00:40
7F：→ usherII: 就结果来看for写法的info参考了infoArray且i也是参考 08/23 01:02
8F：→ usherII: 那如果坚持要用for 我该如何准确传递个别info ? 08/23 01:04
9F：→ ssccg: 因为js里面变数只有function scope，for block不会有独立的 08/23 01:56
10F：→ ssccg: scope，所以没有新的var，都是同一个 08/23 02:00
11F：→ ssccg: 需要留着之後用的变数就要放在多一层function中 08/23 02:07
12F：→ ssccg: _func = function() ←里面要多存一份info和_label 08/23 02:09
13F：→ usherII: 感谢楼上～ 变数是function scope就打通了！ 08/23 09:12