Javascript知识分享

最近在读大叔译的javascript编程精解这本书，确实是本好书，大爱。

以前对javascript某些概念迷迷糊糊，虽然知道怎么回事，但一直弄不明白其中的原因...

那么就先拿以前一直弄不明白的这道题讲讲吧，如下：

例1：

<a href="javascript:;">点我</a> /

<a href="javascript:;">点我</a> /

<a href="javascript:;">点我</a>

<script type="text/javascript">

var atags = document.getElementsByTagName('a');

for (var i = 0, max = atags.length; i < max; i++) {

atags[i].onclick = function() {

alert(i);

}

}

</script>

预期结果可能是想弹出 0,1,2。可惜的是都弹出了：3

如果你一搜，那很多结果会是叫你用闭包，如下面：

例2：

<script type="text/javascript">

var atags = document.getElementsByTagName('a');

for (var i = 0, max = atags.length; i < max; i++) {

(function(index) {

atags[i].onclick = function() {

alert(index);

}

})(i);

}

</script>

那这样真是闭包的原因吗？首先我们来了解javascript的几个知识点：
1、作用域

2、闭包

3、自执行函数。

4、值类型和引用类型

我来引用一下最近读这本书的几句精解：
1、JavaScript唯一能创建新作用域的地方是 function

2、包裹一些局部变量的一个函数叫做一个闭包

3、自执行函数表达式这个大家应该都很清楚了，不清楚就去看下大叔的：即调用的函数表达式

4、这个也应该清楚吧，我说下吧：Number Boolean String 在 js 里属于值类型，对像属于引用类型，如下例：

<script type="text/javascript">

function changeValue(value) {

value = 5;

}

function changeObj(objValue) {

objValue.i = 5;

}

var i = 0;

var obj = { i: 0 };

changeValue(i);

changeObj(obj);

alert(i); //0

alert(obj.i); //5

</script>

到这里，上面的几个知识点，应该都比较清楚了，现在我们来分析一下例2是不是闭包这回事。

先来看作用域：JavaScript唯一能创建新作用域的地方是 function，那么就是说像 for 这类的是不会产生自己的作用域的。我们来实验一下。

for (var i = 0; i < 5; i++) {

//这里干点啥

}

alert(i); //5

可以看出，for里的定义确实不会产生自己的作用域，这个其实也就是在全局里定义了一个变量i，就像以下这样：

var i = 0;

for (; i < 5; i++) {

}

alert(i); //5

贴心提示：从上面的例子我们能看出，一定要理解作用域，否则很容易发生冲突。比如：

//a某在这写了个变量 i

var i = 9527;

//b某在这写了这货

for (var i = 0; i < 5; i++) {

//

}

//a某在这果断悲剧了。

alert(i);

那么我们再来看上面的例1，这时我们应该很清楚为什么会全部弹出：3了。

因为所有链接弹出的是全局变量i，而全局变量i在循环完后的值是3，如下：

<script type="text/javascript">

var atags = document.getElementsByTagName('a');

for (var i = 0, max = atags.length; i < max; i++) {

atags[i].onclick = function() {

alert(i);

}

}

alert(i); //这里显示：3

</script>

那么例2是闭包的原因吗？我们看第2个知识点：
2、包裹一些局部变量的一个函数叫做一个闭包 //显然例2不能算是闭包。

再说为什么例2可以达到预期呢，3、4知识点来解释。

自执行函数 和 值类型。

我们在调用一个函数并传一个值类型参数时，实际是把值给传过去了。可以看第4知识点的例子。

那我们就不难理解例2的结果了。比如我们可以把那个自执行函数拿到外面：

<script type="text/javascript">

function bind(index) {

atags[index].onclick = function() {

alert(index);

}

}

var atags = document.getElementsByTagName('a');

for (var i = 0, max = atags.length; i < max; i++) {

bind(i);

}

</script>

好，这篇就到这了，有什么说错的地方欢迎大家指正。