与做用域相关的闭包、内存泄漏、this

做用域是 JavaScript 里的一个很是重要和基础的概念. 不少人认为本身理解了做用域, 可是在遇到闭包时却说不出个因此然, 甚至不能识别出来.

闭包也是个很是重要, 且常常被误解的概念. 然而闭包就是基于做用域书写代码时所产生的天然结果. 假若抛开做用域讲闭包, 那都是耍流氓. 闭包能够说在平时的代码里随处可见, 但真正让闭包发挥积极做用的作法是隔离做用域、模块函数等.

做用域机制是不能直接查看的, 咱们首先模拟一个场景来尽量的说明做用域这套规则, 而后经过代码片断和开发者工具进行验证.

游戏存档

想必你们都有玩过游戏的经验. 刚开始的时候, 也就是第一关, 难度比较简单. 到了第二关的时候, 就在第一关的基础上加些难缠的角色, 难度相应地加大了. 关卡越是日后, 难缠的角色也就会愈来愈多.

可在游戏的时候, 因为各类缘由, 每每咱们不可能一会儿经过全部的关卡, 因此游戏提供了存档的功能. 下次再玩的时候能够从存档里续上. 若是不想这样, 彻底能够从头玩起.

为何咱们能从存档里直接跳到上次的关卡, 很显然, 这里是有记录存储的. 好比第一关有个场景食人花和海王, 第二关又多了个邪恶人等等. 每一个关卡都会记录该关卡新增的角色或场景同时也会存储以前关卡的记录. 这样就保证了不一样的存档的独立性, 不管在哪一个关卡存档, 下次也定会续上以前的地方. 固然了, 咱们也能够回到上一个关卡.

( 海王之雄风&敌人之邪恶)

几个知识点

结合上面的场景, 咱们再回头看看如下几个知识点.

1. 标识符: 变量、函数、属性的名字, 或者函数的参数.

2. 每一个函数都有本身的执行环境. 当执行流进入一个函数时, 函数的环境就会被推入一个环境栈中. 而在函数执行后, 栈将其环境弹出, 把控制权返回以前的执行环境.

3. 执行环境定义了变量或函数有权访问的其它数据. 每一个执行环境都有一个与之关联的变量对象, 环境中定义的全部变量和函数都保存在这个对象中. 某个执行环境中的全部代码执行完毕后, 该环境被销毁, 保存在其中的全部变量和函数定义也随之销毁.

4. 当代码在一个环境中执行时, 会建立变量对象的一个做用域链.

5. 做用域链是保证对执行环境有权访问的全部变量和函数的有序访问. 做用域的前端始终都是当前执行的代码所在的变量对象. 若是这个环境是函数, 则将其活动对象做为变量对象. 活动对象在最开始只包含一个变量, 即 arguments 对象. 做用域链中的下一个变量对象来自包含(外部)环境. 全局执行环境的变量对象始终都是做用域链的最后一个对象.

6. 当某个环境中为了读取或写入而引入一个标识符时, 必须经过搜索来肯定该标识符来肯定该标识符实际表明什么. 搜索过程从做用域链的前端开始, 向上逐级查询与给定名字匹配的标识符. 若是在局部环境中找到了该标识符, 搜索过程中止, 变量就绪. 若是在局部环境中没有找到该变量名, 则继续沿做用域链向上搜索. 搜索过程将一直追溯到全局环境的变量对象. 若是在全局环境中也没有找到这个标识符, 则意味着该变量还没有声明.

7. 做用域链本质上时一个指向变量对象的指针列表, 它只引用但实际不包含变量对象.

若是咱们把以上的几个知识点串起来, 这就是所谓的做用域链规则了. 上图解释一波.( arguments 应该加到变量对象里的, 图中没体现, 疏忽)

图解做用域

如今咱们从最后两行提及,

var outer = outerFn(10);
var inner = outer(10);
复制代码

执行 outer = outerFn(10) 后, outer 拥有了返回函数的引用. outer(10) 在执行的时候它会建立 属于它本身 的做用域链, 这里包含函数所处外部环境的变量对象.

在读取 initial 变量时, 在 Inner 变量对象中没有检索到, 它会沿着做用域链向上搜索, 在 outer 变量对象里找到了该标识符, 搜索过程中止, 变量就绪.

函数在定义的时候就已经决定了以后执行时, 做用域里将包含什么. 这也解释了, 即便咱们把定义在函数内部的函数扔在外边执行也能访问到函数内部的变量. 这和内部函数在哪执行没有半毛钱关系.

为何强调 属于它本身 的呢?

function outer() {
    var num = 0;
    return function inner() {
        return num++;
    }
}
let innerFn_1 = outer();
let a_1 = innerFn_1()
let innerFn_2 = outer();
let a_2 = innerFn_2();

let a_1_1 = innerFn_1();
let a_2_2 = innerFn_2();
复制代码

innerFn_1 和 innerFn_2 都属于本身的做用域链, 而 a_1 和 a_2 则分别在 innerFn_1 和 innerFn_2 上建立了属于本身的做用域链. 因此它们函数里的 num 是属于不一样做用域链里的变量. 但对于 a_1 和 a_1_1 来讲它们都是基于 innerFn_1, 拥有同一 outer 变量对象, num 天然也是同一个, 因此会累加. 同理 a_2 和 a_2_2.

若是理解了这个, 那么面试常考的一题就小菜一碟了.

for(var i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i*1000)
}
复制代码

重点是执行的时候才会建立变量对象的一个做用域链.

闭包是什么?

当函数能够记住并访问所在的做用域, 即便函数是在当前做用域以外执行, 这时就产生了闭包. 这就和以前提到的游戏存档差很少.

好了, 扔几个闭包出来巩固一下.

function outer_1() {
    var a = 'hello world';
    function inner() {
        console.log(a)
    }
    outer_2(inner)
}
function outer_2(fn) {
    fn()
}
复制代码

这里也有闭包.

var a = new array(99999999);
function b() {
    console.log(b)
}
b()
window.addEventListener('click', function() {
    console.log('hello world')
})
复制代码

DevTools里直观看闭包

还有开头所说的能够结合开发者工具直观地看一下, 一张动态图解释一切.

内存泄漏

闭包之因此能成为闭包, 是由于它记录了函数所在的做用域. 现主流的自动垃圾收集机制正由于闭包的这个特色而不能释放内存. 闭包的滥用会致使致使内存能分配的空间变少, 最终崩溃.

正常来讲, 函数在执行的过程当中, 局部变量会被分配相应的内存空间, 以便存储它们的值, 直至函数执行结束. 此时局部变量占有的空间会被释放以供未来使用.

常说的回收机制之一, 标记清除, 它的工做原理是, 当变量进入执行环境时, 储存在内存中的全部变量都会被加上标记(至于什么标记咱们不关心), 而后找到 环境中的变量 以及 被环境中引用的变量, 把它们以前加的标记给去掉. 而剩下的被标记的变量将被视为 准备 删除的变量. 最后, 垃圾收集器找出再也不继续使用的变量, 释放其占用的内存. 因此, 一旦数据再也不被须要, 应解除引用, 将其值设置为null.

outer = null;
inner = null;
复制代码

内部函数的执行环境会保存着外部环境活动对象的引用, 内部函数被扔出去后, 就意味着外部环境中的变量不能被销毁了.

this对象

执行环境里记录的不仅是这些, 它也记录了函数调用栈、函数调用方式等. this 和做用域有关系, 但不是大家想象的那种关系. 每一个函数在被调用时都会自动取得两个特殊变量: this 和 arguments. 内部函数在搜索这两个变量时, 只会搜索到其活动对象为止(即当前变量对象). 所以永远不可能直接访问到外部函数中的这两个变量. 除非咱们把外部做用域中的 this 对象保存在一个闭包可以访问到的变量里.

// 很常见是否是😂
let obj = {
    a: function() {
        var self = this;
        return function() {
            console.log(self)
        }
    }
}
复制代码

函数内部的 this 在函数执行时才正式被赋予相应的值, 因此说函数的调用位置很关键. 能够这么说, 谁 直接 调用了这个函数, this 就指向了谁. 若是不是对象在直接调用这个函数, 咱们可通通认为是 undefined, 非严格模式下浏览器环境就是 window. 若是真想知道为何, 能够直接看规范(神烦).

'use strict'
function a() {
    console.log(this)
}
var b = {
    a: function() {
        console.log(this);
    },
    b: function() {
        return a;
    }
}
let b_a = b.a;
a();    //1. undefined;
b_a();  //2. undefined;
b.a();  //3. {a: f, b: f};
b.b()();    //4. undefined;
(true && b.a)() //5. undefined;
new a();    //6. {}
b.call(b);  //7. {a: f, b: f};
复制代码

从 1 ~ 6, 咱们看看哪一个对象直接调用了该函数.

第 1 个没找到调用对象, 就是个普通函数调用. 第 2 个通过 b_a = b.a 赋值操做后, 返回的就是那个普通函数, 就是一普通的函数调用. 第 3 个很直接, 就是 b 这个对象了. 第 4 个是个闭包, 首先 this 只在当前活动对象里找 this 对象, 不知道是哪一个对象, 但确定不会是 b. 第 5 个和第 2 个是一个道理. 第 6 个吧, 貌似不算是函数调用了吧, 不过咱们知道, this 是指向新建立的空对象. 第 7个就更直接了, 人家都指名道姓就差喊出来了.

this 绑定对象的几条准则貌似在我这里就剩一条了😌.