javasript 变量作用域（二）

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AndrewZhang/archive/2012/02/24/2366761.html

文章标签：

#xhtml #javascript #ViewUI

本文深入探讨了JavaScript的面向对象特性，包括函数作为引用类型、类的缺失、事件绑定问题及其解决方法，通过实例展示了如何构建不同的事件函数和使用闭包传递参数。

自从在程序世界里面引入了面向对象的概念，引起天翻地覆的变化。用经典的话说：万事万物皆对象。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);
```
（）（）形式就是语句，立即执行，闭包传递参数