提升(var)
我们都认为JavaScript代码执行的时候是由上到下一行一行执行的。但实际上这并不完全正确，有一种特殊情况会导致这个假设是错误的。
a = 2;
var a;
console.log( a );
可能许多人会认为是undefined，因为var a;声明是在a =2 之后，就认为了变量重新赋值undefined。但是，输出的结果是2。
console.log(a)
var a = 2;
上面这段代码你可能会认为会报错，但是结果是输出undefined。
那就让我们探索下是怎么回事吧
如果你像搞明白首先得去看一下之前作用域(一)篇章中我们所提到的编译原理 https://www.jianshu.com/p/7685863ca21f
引擎在执行之前会找到所有的声明。当你看到 var a = 2;的时候，JavaScript实际上会将他看成两个声明：var a;和 a =2;第一部分是编译，第二部分是执行。
所以，我们的var 声明的变量都会被提升，意思就是都会把这些变量先赋值成undefined，之后才去执行 a = 2;的赋值操作。
a = 2;
var a;
console.log(a)
所以这段代码 JavaScript 引擎的执行循序应该是 ：
var a; //a = undefined;
a = 2;
console.log(a);
函数优先
变量声明和函数声明都会被提升。 需要注意的是，var 声明的变量才会提升,let const声明的不会
var foo;
function foo() {
}
console.log(foo)
由于函数优先的原则，上面的代码我们声明的函数权重最高，所以打印的foo是函数
垃圾回收
js的垃圾回收机制是为了防止内存泄漏。内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的量，并释放掉它们所指向的内存。
什么时候会有垃圾？
在作用域中当整个作用域中的代码执行完后，作用域中的变量和方法都会没用，此时就是被当做垃圾了。比如局部作用域，一个函数执行完，里面的变量就可以被销毁，其占用内存被释放。
变量的声明周期
当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量，全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面。
看代码:
// windows 浏览器环境
var a = 1;
function foo() {
var b = 2;
}
foo();
上面的代码中，a变量会一直维持到浏览器关闭为止，但是foo中的b变量会在foo()执行完毕之后回收。
由于我们的a变量在之后的种种操作中还有可能会被用到，所以这个变量垃圾回收机制不会对它进行回收，但是b变量仅仅存在于foo()的作用域中，当函数执行完毕了之后我们从外部是访问不到b变量的，所以垃圾回收机制会对b变量进行回收操作。
标记清除
一个变量-->进入环境（被标记，有此标记为不能被清除）-->执行-->离开环境（被标记，这个标记告诉机制能被清除）-->回收机制一段周期后，变量被清除。
闭包
我对闭包的理解：变量没有被垃圾回收机制回收。
当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
下面这段代码大多数人认为是闭包
function fn1(){
var a = 2;
function fn2(){
console.log(a)
}
fn2();
}
fn1();
这确切来说 是作用域嵌套，而不属于闭包。
看下面的代码:
function fn1(){
var a = 1;
function fn2(){
console.log(a)
}
return fn2;
}
var fn3 = fn1();
fn3() // 1;
上面的代码清晰的给我们展示了闭包，函数fn2的词法作用域能够访问fn1的内部作用域。然后我们将fn2()本身当作一个值类型进行传递。在执行fn1()之后，返回值fn2被赋值给fn3。实际上我们只是通过不同的标识符调用了内部的函数fn2。
fn2显然可以被正常执行，但是它在自己定义的词法作用域之外的地方执行。
在fn1执行了之后，垃圾回收机制通常会准备对fn1内部的作用域进行垃圾回收，看上去fn1不会再被使用，所以回收机制会考虑对他的回收，但是闭包会阻止这一回收，由于fn2还在使用着这个作用域。所以我们再执行fn3的时候还能够访问到它的词法作用域。
无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。
function fn1(){
var a = 2;
function fn2(){
console.log(a)
}
fn3(fn2);
}
function fn3(fn){
fn(); // 此处形成闭包
}
函数fn2执行的时候所处的环境不是它定义的词法作用域环境。
代码中处处存在闭包的身影
function wait(message) {
setTimeout(function timer() {
console.log(message);
}, 1000);
}
wait("Hello, closure!");
上面的例子中，将一个wait作用域下的 timer 函数 传递给 setTimeout 函数，当执行wait 1000毫秒之后，它的内部作用域不会消失，timer 函数保有wait函数作用域的闭包。
假设setTimeout 的内部结构如下定义
function setTimeout(fn ,time){
time 时间后 执行 : fn();
}
所以当我们将 timer 函数传入setTimeout 函数之后， 调用timer函数 时候其实已经不在它之前定义的作用域环境中了。
我们再来看看vue源码中，153行到172行
/**
* Create a cached version of a pure function.
*/
function cached(fn) {
var cache = Object.create(null);
return (function cachedFn(str) {
var hit = cache[str];
return hit || (cache[str] = fn(str))
})
}
/**
* Camelize a hyphen-delimited string.
*/
var camelizeRE = /-(\w)/g;
var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});
从命名上看，我们知道作者肯定是用来缓存东西。将上面代码进行简化:
function fn1(fn){
var a = 2;
function fn2(){
fn(a);
}
return fn2;
}
function fn4(a){
console.log(a);
}
var fn3 = fn1(fn4);
fn3();
函数fn2执行的时候不处于自己定义的词法作用域内，所以形成了闭包。
大多数人会把IIFE模式认为是闭包 其实不是：
var a = 2;
(function(){
console.log(a);
}())
这段代码也许会有人认为这是闭包，其实并不属于，因为函数并没有在它本身的词法作用域之外去执行，可能看上去像是形成了闭包，但这也许像是作用域封装的一种形式。
回顾
回顾一下之前所将的面试题中。
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 200);
}
我们通过IIFE来创建一个作用域试一下
for (var i = 0; i < 5; i++) {
(function () {
var j = i;
setTimeout(() => {
console.log(j)
}, 200);
}())
}
现在它可以正常的打印了。由于setTImeout执行的函数时不是自身所定义的词法作用域，所以会形成闭包，j 变量没有被回收。
如果你还是不太容易理解上述代码，你可以转化一下思路:
for(var i = 1;i < 5; i++) {
function fn1(){
var j = i;
fn2(function(){
console.log(j)
}, 200)
}
fn1();
}
function fn2(fn, time) {
time 时间后执行 fn();
}
块作用域
es6中提出了块作用域的概念，我没每次使用IIFE都会创建一个新的作用域，可以理解为这就是块作用域，es6中的 let 声明可以用来劫持块作用域，所以上例的面试题中，我们可以这么写
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 200);
}
注：本文是对《你不知道的JavaScript》这本书的一些学习总结和自身看法
网友评论