js学习笔记归档梳理（1）

js学习笔记归档梳理

  最近在梳理关于js一些原理层次的东西，感觉学的有点乱，是时候整理沉淀一下记录成文字了。在我看来，最难理解的核心就两点，一是对闭包的理解，二是对原型链的深入。在这里我先说说闭包。

---

大家都知道闭包是JavaScript的难点，首先我们得知道什么是闭包？

《JavaScript高级程序设计)》中是这样说的：

闭包就是指有权访问另一个函数中的变量的函数。

《JavaScript权威指南》这样定义：

函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中成为“闭包”。

简单的来说呢，这个牵扯到JavaScript作用域的问题。

在es6以前，js其实只有一种作用域，那就是函数级作用域，也就是说任何的私有变量或者函数必须包裹在函数内才能导致不产生全局的变量污染。当然es6以后出现的let（）也有这个功能了，关于let的用法可参考《ECMAScript 6 入门》中第二章。这里暂且按住不表。

那么闭包是什么呢，闭包简单来说就是一个特殊的函数，能在自己的作用域里调用其他函数中的私有变量或者私有函数的特殊函数。通俗的来讲就是闭包就还一个嵌套在其他函数里的函数，其中可以引用外部函数的参数和变量，这些参数和变量不会被js的垃圾回收机制自动回收，且变量和参数不会对外部的作用域造成污染。

说完了是什么，那么为什么要创建闭包，它又有什么功能呢？

在我看来好处有三点：

1. 提供访问函数中的私有变量的入口

举个例子：

function Obj(){
    var privateVar = 1;
    function privateFunc() {
        return privateVar;
    }
    //特权方法（闭包访问私有变量和私有函数并传递给外界）
    this.publicFunc = function() {
        privateVar++;
        return privateFunc();
    };
}

var obj = new Obj();
console.log(obj.publicFunc());

这里就可以看到一个闭包就能把函数中的私有变量以及私有函数的值取出到了外部作用域。

2. 作用域隔离

闭包的另一个作用是防止变量污染，限制向全局作用域中添加过多的变量和函数。

function fun1() {
    var a = 1;
    (function fun2() {
        var a = 2;
        a += 1;
        console.log(a);
    })();
    console.log(a);
}
fun1();

我们可以看到，在fun2()这个闭包里定义的新的变量并进行更改时，并不会对外部变量造成污染。

3. 在循环中包含函数且该函数中使用了遍历数据

记得在知乎上看到一道面试题，地址搜不到了，大体说是要利用循环给一个数组绑定数组索引对应的值，我先列一个错误的写法：

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 5; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
    console.log(funcs[i]());
}

这样并不能得到想要的结果，因为result[i]绑定的是一个函数，但是当场并不执行，等到console.log()的时候才想到去执行，并调用i，但此时i早已结束了循环，此时的值为5，因此，输出为5个5，而不是0-4。

那么需要怎么改才能达到想要的结果呢，这个时候，闭包闪亮登场了。

function _createFunctions(){
    var result = new Array();
    for (var i=0; i < 5; i++){
        (function(i) {
            result[i] = function(){
                return i;
            };
        })(i);
    }
    return result;
}
var funcs = _createFunctions();
for (var i=0; i < funcs.length; i++){
    console.log(funcs[i]());
}

加一个IIFE，并将遍历参数传了进去，一切都不一样了，为什么呢？

这就又得提到垃圾回收机制了，由于闭包函数传入了外部函数的参数变量i，因此在var funcs = _createFunctions();这一句之后_createFunctions()被销毁，但是函数变量i不会随着外部函数_createFunctions()的销毁而回收，因为闭包能够保持对当前i的引用，于是在真正调用时，执行闭包中的i为当时循环遍历到的数值，从而输出了0-4.

最后，我们再来做道课后习题来巩固一下吧。
更改下面的代码，使得它能够每个一秒分别输出0-4:

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

我想到了两个利用闭包的解法

法一：

(function fun2() {
    for (var i = 0; i < 5; i++) {
        (function(i) {
            setTimeout(function() {
                console.log(i);
            },1000*(i+1));
        })(i);
    }
})();

法二：

(function _fun2(i) {
    if (i < 5) {
        setTimeout(function() {
            console.log(i);
            _fun2(++i);
        }, 1000);
    }
})(0);

原理我就不细说啦，自己琢磨琢磨会有更多收获的哦。

---

啊，第一次尝试markdown写博客，花了好多时间啊，那原型链的知识就留到下次在整理吧。