JavaScript 块级作用域 与 自执行函数

ES6出现了一个可以替代自执行函数的东西。

拿实例说话

就算没仔细看过jquery源码，想比你也见过开头的这种代码：

这是一种典型的自执行函数，也就是立即执行函数。这种函数是在JavaScript 的变量作用域影响下出现的。

先来比较一下下面两段代码：

1.1 自执行函数

var v = "hello";
(function(){
  console.log(v);
  var v = "world";
})();

输出：underfined

1.2 块作用域

var v = "hello";
if(true){
  console.log(v);
  var v = "world";
}

输出：hello

ES6之前是没有块作用域这个概念了，这对编程产生了很大的影响，不过，聪明的程序猿们还是想出了解决的方法。

那jquery源码为例（第一个截图），

1. 不适用任何加工。 如果说没有使用自执行函数，结果是这样的：

1 var deletedIds = [];

你在代码中已经定义过deletedIds，jquery中再定义一个，是不是把你的覆盖掉？

2. 加一个方法

那聪明的你要说了，可以写在一个函数中啊。是的，没错。结果是这样的：

function jquery(){
  var deletedIds  = [];
  window.$ = ...
}

那怎么调用呢？你还能像现在这样(selector)去调用吗？不能，得先执行jquery()方法才能调用(selector)。

3. 加一个自执行函数

什么是自执行函数，只要加载该文件，它就会自执行函数。就像jquery源码中那样，加载jquery文件后，window.$就已经被赋值了，只需要使用即可。

4. let关键字的使用

ES6以后，出现了个牛逼的关键字 -- let

let关键字的出现，也象征着JavaScript出现了块级作用域。关于它的更多知识，可以查看阮一峰的书籍《ECMAScript6入门》。

电子版：http://es6.ruanyifeng.com/#docs/let

大致就是：let声明的变量，只在let命令所在的代码块内有效。它要求变量必须先声明后使用。

如果把1.2中的代码变为下面这样：

var v = "hello";
if(true){
  console.log(v);
  let v = "world";
}

就会报错：ReferenceError

经典例子

定义一个数组a[10], for循环为每一个下标绑定一个方法，方法内输出该下标。

错误代码：

上面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。

没有let关键字前：

有了let关键字后：