先导知识
变量声明
当你声明一个变量的时候，一般是这样的：
var a = 'a string';
var b = new String('a string');
但这个时候你用typeof函数检测这两个变量的类型，就会发现以下结果：
console.log(typeof a);//string
console.log(typeof b);//object
这是为什么呢？
这就要说到javaScript的变量存储，变量存储有两种方式：
其一：简单的值类型（undefined、number、string、boolean）存储在栈里。
其二：引用类型（函数、数组、对象、null）存储在堆里，栈里储存他们的内存地址（如下图）。
String，Number，Boolean等类都派生自Object对象，因此通过 new 关键字构造的她们都属于对象，而不是简单的值类型。
例子里的变量b，通过String构造函数声明，则b的__proto__指向String函数的prototype对象，因而b也继承有String函数的prototype的所有属性。
而变量a的声明方法是直接通过等号赋值，则变成了一个简单的值类型，存储在栈中。
作用域和上下文环境
乍一听这个名词我们可能有点不太能理解，我们先这么浅薄地理解：
作用域是函数的一块“领地”，上下文环境保存作用域内的参数名和值，例如：
var a = 1,
foo = function(b){
console.log(a+b);
};
foo(2);
1、 因为我们的代码在全局环境内执行，在执行代码之前（即预编译），将先创建全局上下文环境，再把全局上下文环境压入上下文栈:
| 全局上下文环境 | |
|---|---|
| a | undefined |
| foo | undefined |
| this | window |
| 全局上下文环境 | |
|---|---|
| a | 1 |
| foo | function |
| this | window |
3、 然后我们调用foo函数，我们的上下文环境就要转到foo函数内部，并把foo函数执行上下文环境压入上下文栈，：
| foo函数执行上下文环境 | |
|---|---|
| b | 2 |
| arguments | [2] |
| this | window |
这时候上下文栈内有两个上下文环境：全局上下文 和 foo函数执行上下文。
但是在执行的时候，我们发现foo函数的作用域里没有变量a，我们要到哪里取呢？
答案是创建这个函数的作用域里取，foo函数是全局创建的，因此我们就回到全局作用域里找变量a。
然后看到全局上下文环境中，有变量a，它的值是1。
a + b == 1 + 2 == 3
因此，最后控制台输出：3
4、到此为止，foo函数执行完毕，foo函数执行上下文环境出栈销毁，最后留下全局上下文环境：
把整个过程连在一起，就是下面这张图：
作用域和上下文的区别
作用域只是一个“地盘”，一个抽象的概念，其中没有变量。
要通过作用域对应的执行上下文环境来获取变量的值。
同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。
所以，作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。
闭包
概念
了解到我们的先导知识后，我们最后来看闭包，闭包有两种情况：
-
函数作为返回值
function fn(){ return function foo(){ console.log('闭包'); } } //调用fn立即执行foo -
函数作为参数被传递
/* * @params n,m number型 * @return 返回两个数相加额结果 */ function add(n,m){ return n+m; } //闭包 （function fn(f){ var n = 1,m = 2; f(n,m); // 调用add函数 })(add); // add函数作为参数f传入
闭包的重点其实就在于，函数执行完毕之后，上下文环境不会被销毁，例如：
但其实fn的上下文环境并没有出栈，fn函数的上下文环境依旧可以访问到。
这也是为什么说闭包会导致内存泄漏和增加内存开销。
应用场景
那在什么场景下可以用到闭包呢
1、模拟私有变量
var Counter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
var counter1 = Counter();// 上下文环境一
var counter2 = Counter();// 上下文环境二，与环境一不共享变量
每个闭包有自己的上下文环境，上文的例子中，创建了两个私有成员，变量privateCounter和函数changeBy。
这两个变量都必须要用Counter.increment，Counter.decrement 和 Counter.value这三个方法中的一个调用，这就实现了私有成员。
2、函数防抖
/**
* @function debounce 函数防抖
* @param {Function} fn 需要防抖的函数
* @param {Number} interval 间隔时间
* @return {Function} 经过防抖处理的函数
* */
function debounce(fn, interval) {
let timer = null; // 定时器
return function() {
// 清除上一次的定时器
clearTimeout(timer);
// 拿到当前的函数作用域
let _this = this;
// 拿到当前函数的参数数组
let args = Array.prototype.slice.call(arguments, 0);
// 开启倒计时定时器
timer = setTimeout(function() {
// 通过apply传递当前函数this，以及参数
fn.apply(_this, args);
// 默认300ms执行
}, interval || 300)
}
}
3、函数节流
/**
* @function throttle 函数节流
* @param {Function} fn 需要节流的函数
* @param {Number} interval 间隔时间
* @return {Function} 经过节流处理的函数
* */
function throttle(fn, interval) {
let timer = null; // 定时器
let firstTime = true; // 判断是否是第一次执行
// 利用闭包
return function() {
// 拿到函数的参数数组
let args = Array.prototype.slice.call(arguments, 0);
// 拿到当前的函数作用域
let _this = this;
// 如果是第一次执行的话，需要立即执行该函数
if(firstTime) {
// 通过apply，绑定当前函数的作用域以及传递参数
fn.apply(_this, args);
// 修改标识为null，释放内存
firstTime = null;
}
// 如果当前有正在等待执行的函数则直接返回
if(timer) return;
// 开启一个倒计时定时器
timer = setTimeout(function() {
// 通过apply，绑定当前函数的作用域以及传递参数
fn.apply(_this, args);
// 清除之前的定时器
timer = null; // 默认300ms执行一次
}, interval || 300)
}
}
4、setTimeout场景
for(var i = 0; i < 5 ; i++ ){
setTimeout(function(){console.log(i)},100);
}
我们知道js是单线程的，setTimeout则是异步方法，因此每次遍历碰到setTimeout，就把里面的代码放到待执行栈里，等for循环遍历结束，再执行。
而因为i是用var定义的值类型，直接存储在栈内，每一次循环，i的值都被新值覆盖，因此最后一次循环结束，i=5。
然后才开始执行五次console.log(i);
即得到输出：5 5 5 5 5。
要解决这个问题，第一个方法是使用自执行函数提供闭包条件，再把i值保存到闭包中。
自执行函数会立即执行，因此setTimeout函数不会被压入待执行栈而立即执行。
for(var i = 0; i < 5 ; i++ ){
(function(i){
setTimeout(function(){console.log(i)},100);
})(i)
}
// => 0 1 2 3 4
还有一种方法是把var改成let，此中原理也可参照扩展阅读中var和let的区别。
扩展
var和let的区别
-
作用域
var 的作用域在整个函数
let 的作用域在{}内，例如：
function fn(flag){ if(flag){ let i = 'success'; } console.log(i) } fn(true); //VM167:5 Uncaught ReferenceError: i is not defined我们发现，i 的作用域在 if 语句里，一旦 if 语句执行结束，i 就被销毁，因此，当代码执行到console.log(i)的时候，自然找不到变量。
把let给改成var，函数就能够正常运行。
-
变量提升
var 在函数声明的时候就创建了空间，并被赋值为undefined。
(function fn(){ console.log(a); // =>undefined var a = 1; console.log(a); // =>1 })()执行的顺序相当于：
1、var a = undefined;
2、console.log(a); // =>undefined
3、a = 1;
4、console.log(a); // =>1let 则只有到执行到声明语句的时候才创建空间。
(function fn(){ console.log(a); let a = 1; console.log(a); })() //Uncaught ReferenceError: a is not defined执行的顺序是：
1、console.log(a)
2、找不到a
3、抛出异常Uncaught ReferenceError: a is not defined
