javasript 变量作用域 (二)
自从在程序世界里面引入了面向对象的概念,引起天翻地覆的变化。用经典的话说:万事万物皆对象。javascript也是面向对象的,可以封装,继承,多态。但是在这些特性中我们没有class,只有function.
五 function是引用类型
当我们很轻易的定义一个函数时候,可以通过new关键字定义其一个实例。
function foo(){} var instance1 = new foo();
经常碰到的问题
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> </head> <body> <input type="button" id="test" value="Click button1" /> <input type="button" value="Click button2" /> <script type="text/javascript"> var eleArr = document.getElementsByTagName("input"); for(var i=0;i<=eleArr.length-1; ++i) { eleArr[i].onclick = function() { alert(i); } } </script> </body> </html>
当我们点击2个button的时候都弹出的是2,原因如下
- 语句在运行时候执行,eleArr[0/1].onclick,会立即执行,即为2个button绑定click事件
- function不会立即执行,编译后被存储为正在运行时调用
- function是引用类型,所有实例对象是同一栈地址
- 没有块级作用域,执行完for以后,i变为2
解决方法,
- 构建【不同】的事件函数
eleArr[i].onclick = new Function("alert("+i+")");
new关键字会马上执行,此时的i当前值会传递出去
- 利用闭包
eleArr[i].onclick = (function(j) { return function(){alert(j)}; })(i);
()()形式就是语句,立即执行,闭包传递参数