yygmind / blog Goto Github PK

JavaScript深入之内存空间详细图解

https://muyiy.cn/blog/1/1.3.html#%E6%A0%88%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84

会导致内存溢出吧。

1、jsonp
2、CORS

• 设置多个Access-Control-Allow-Origin
  https://blog.csdn.net/zlp_zky/article/details/70213811

对变量对象和激活对象这个有点不明白 这两个是不是ES3的概念呢 在ES5中通过 VariableEnvironment
LexicalEnvironment 这个些概念来表达了

Originally posted by @icantunderstand in #13 (comment)

本期的主题是调用堆栈，本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，文末点击查看全部文章。

如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。

JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量，所以也叫常量池。

昨天文章介绍了堆和栈，小结一下：

• 基本类型：--> 栈内存（不包含闭包中的变量）
• 引用类型：--> 堆内存

今日补充一个知识点，就是闭包中的变量并不保存中栈内存中，而是保存在堆内存中，这也就解释了函数之后之后为什么闭包还能引用到函数内的变量。

function A() {
  let a = 1
  function B() {
      console.log(a)
  }
  return B
}

闭包的简单定义是：函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。

函数 A 弹出调用栈后，函数 A 中的变量这时候是存储在堆上的，所以函数B依旧能引用到函数A中的变量。现在的 JS 引擎可以通过逃逸分析辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。

闭包的介绍点到为止，【进阶2期】 作用域闭包会详细介绍，敬请期待。

今天文章的重点是内存回收和内存泄漏。

内存回收

JavaScript有自动垃圾收集机制，垃圾收集器会每隔一段时间就执行一次释放操作，找出那些不再继续使用的值，然后释放其占用的内存。

• 局部变量和全局变量的销毁
  • 局部变量：局部作用域中，当函数执行完毕，局部变量也就没有存在的必要了，因此垃圾收集器很容易做出判断并回收。
  • 全局变量：全局变量什么时候需要自动释放内存空间则很难判断，所以在开发中尽量避免使用全局变量。
• 以Google的V8引擎为例，V8引擎中所有的JS对象都是通过堆来进行内存分配的
  • 初始分配：当声明变量并赋值时，V8引擎就会在堆内存中分配给这个变量。
  • 继续申请：当已申请的内存不足以存储这个变量时，V8引擎就会继续申请内存，直到堆的大小达到了V8引擎的内存上限为止。
• V8引擎对堆内存中的JS对象进行分代管理
  • 新生代：存活周期较短的JS对象，如临时变量、字符串等。
  • 老生代：经过多次垃圾回收仍然存活，存活周期较长的对象，如主控制器、服务器对象等。

垃圾回收算法

对垃圾回收算法来说，核心**就是如何判断内存已经不再使用，常用垃圾回收算法有下面两种。

• 引用计数（现代浏览器不再使用）
• 标记清除（常用）

引用计数

引用计数算法定义“内存不再使用”的标准很简单，就是看一个对象是否有指向它的引用。如果没有其他对象指向它了，说明该对象已经不再需要了。

// 创建一个对象person，他有两个指向属性age和name的引用
var person = {
    age: 12,
    name: 'aaaa'
};

person.name = null; // 虽然name设置为null，但因为person对象还有指向name的引用，因此name不会回收

var p = person; 
person = 1;         //原来的person对象被赋值为1，但因为有新引用p指向原person对象，因此它不会被回收

p = null;           //原person对象已经没有引用，很快会被回收

引用计数有一个致命的问题，那就是循环引用

如果两个对象相互引用，尽管他们已不再使用，但是垃圾回收器不会进行回收，最终可能会导致内存泄露。

function cycle() {
    var o1 = {};
    var o2 = {};
    o1.a = o2;
    o2.a = o1; 

    return "cycle reference!"
}

cycle();

cycle函数执行完成之后，对象o1和o2实际上已经不再需要了，但根据引用计数的原则，他们之间的相互引用依然存在，因此这部分内存不会被回收。所以现代浏览器不再使用这个算法。

但是IE依旧使用。

var div = document.createElement("div");
div.onclick = function() {
    console.log("click");
};

上面的写法很常见，但是上面的例子就是一个循环引用。

变量div有事件处理函数的引用，同时事件处理函数也有div的引用，因为div变量可在函数内被访问，所以循环引用就出现了。

标记清除（常用）

标记清除算法将“不再使用的对象”定义为“无法到达的对象”。即从根部（在JS中就是全局对象）出发定时扫描内存中的对象，凡是能从根部到达的对象，保留。那些从根部出发无法触及到的对象被标记为不再使用，稍后进行回收。

无法触及的对象包含了没有引用的对象这个概念，但反之未必成立。

所以上面的例子就可以正确被垃圾回收处理了。

所以现在对于主流浏览器来说，只需要切断需要回收的对象与根部的联系。最常见的内存泄露一般都与DOM元素绑定有关：

email.message = document.createElement(“div”);
displayList.appendChild(email.message);

// 稍后从displayList中清除DOM元素
displayList.removeAllChildren();

上面代码中，div元素已经从DOM树中清除，但是该div元素还绑定在email对象中，所以如果email对象存在，那么该div元素就会一直保存在内存中。

内存泄漏

对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。 对于不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）

内存泄漏识别方法

1、浏览器方法

1. 打开开发者工具，选择 Memory
2. 在右侧的Select profiling type字段里面勾选 timeline
3. 点击左上角的录制按钮。
4. 在页面上进行各种操作，模拟用户的使用情况。
5. 一段时间后，点击左上角的 stop 按钮，面板上就会显示这段时间的内存占用情况。

2、命令行方法

使用 Node 提供的 process.memoryUsage 方法。

console.log(process.memoryUsage());

// 输出
{ 
  rss: 27709440,		// resident set size，所有内存占用，包括指令区和堆栈
  heapTotal: 5685248,   // "堆"占用的内存，包括用到的和没用到的
  heapUsed: 3449392,	// 用到的堆的部分
  external: 8772 		// V8 引擎内部的 C++ 对象占用的内存
}

判断内存泄漏，以heapUsed字段为准。

详细的JS内存分析将在【进阶20期】性能优化详细介绍，敬请期待。

WeakMap

ES6 新出的两种数据结构：WeakSet 和 WeakMap，表示这是弱引用，它们对于值的引用都是不计入垃圾回收机制的。

const wm = new WeakMap();
const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

先新建一个 Weakmap 实例，然后将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。

昨日思考题解答

昨天文章留了一道思考题，群里讨论很热烈，大家应该都知道原理了，现在来简单解答下。

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

a.x 	// --> undefined
b.x 	// --> {n: 2}

答案已经写上面了，这道题的关键在于

• 1、优先级。.的优先级高于=，所以先执行a.x，堆内存中的{n: 1}就会变成{n: 1, x: undefined}，改变之后相应的b.x也变化了，因为指向的是同一个对象。
• 2、赋值操作是从右到左，所以先执行a = {n: 2}，a的引用就被改变了，然后这个返回值又赋值给了a.x，需要注意的是这时候a.x是第一步中的{n: 1, x: undefined}那个对象，其实就是b.x，相当于b.x = {n: 2}

今日份思考题

问题一：

从内存来看 null 和 undefined 本质的区别是什么？

问题二：

ES6语法中的 const 声明一个只读的常量，那为什么下面可以修改const的值？

const foo = {}; 
foo = {}; // TypeError: "foo" is read-only
foo.prop = 123;
foo.prop // 123

问题三：

哪些情况下容易产生内存泄漏？

参考

JavaScript 内存机制

MDN之运算符优先级

由ES规范学JavaScript(二)：深入理解“连等赋值”问题

InterviewMap

进阶系列目录

• 【进阶1期】 调用堆栈
• 【进阶2期】 作用域闭包
• 【进阶3期】 this全面解析
• 【进阶4期】 深浅拷贝原理
• 【进阶5期】 原型Prototype
• 【进阶6期】 高阶函数
• 【进阶7期】 事件机制
• 【进阶8期】 Event Loop原理
• 【进阶9期】 Promise原理
• 【进阶10期】Async/Await原理
• 【进阶11期】防抖/节流原理
• 【进阶12期】模块化详解
• 【进阶13期】ES6重难点
• 【进阶14期】计算机网络概述
• 【进阶15期】浏览器渲染原理
• 【进阶16期】webpack配置
• 【进阶17期】webpack原理
• 【进阶18期】前端监控
• 【进阶19期】跨域和安全
• 【进阶20期】性能优化
• 【进阶21期】VirtualDom原理
• 【进阶22期】Diff算法
• 【进阶23期】MVVM双向绑定
• 【进阶24期】Vuex原理
• 【进阶25期】Redux原理
• 【进阶26期】路由原理
• 【进阶27期】VueRouter源码解析
• 【进阶28期】ReactRouter源码解析

交流

进阶系列文章汇总：https://github.com/yygmind/blog，内有优质前端资料，欢迎领取，觉得不错点个star。

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！

bind()

bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数，传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。bind返回的绑定函数也能使用 new 操作符创建对象：这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。（来自参考1）

语法：fun.bind(thisArg[, arg1[, arg2[, ...]]])

bind 方法与 call / apply 最大的不同就是前者返回一个绑定上下文的函数，而后两者是直接执行了函数。

来个例子说明下

var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    return {
		value: this.value,
		name: name,
		age: age
    }
};

bar.call(foo, "Jack", 20); // 直接执行了函数
// {value: 1, name: "Jack", age: 20}

var bindFoo1 = bar.bind(foo, "Jack", 20); // 返回一个函数
bindFoo1();
// {value: 1, name: "Jack", age: 20}

var bindFoo2 = bar.bind(foo, "Jack"); // 返回一个函数
bindFoo2(20);
// {value: 1, name: "Jack", age: 20}

通过上述代码可以看出bind 有如下特性：

• 1、可以指定this
• 2、返回一个函数
• 3、可以传入参数
• 4、柯里化

使用场景

1、业务场景

经常有如下的业务场景

var nickname = "Kitty";
function Person(name){
    this.nickname = name;
    this.distractedGreeting = function() {

        setTimeout(function(){
            console.log("Hello, my name is " + this.nickname);
        }, 500);
    }
}
 
var person = new Person('jawil');
person.distractedGreeting();
//Hello, my name is Kitty

这里输出的nickname是全局的，并不是我们创建 person 时传入的参数，因为 setTimeout 在全局环境中执行（不理解的查看【进阶3-1期】），所以 this 指向的是window。

这边把 setTimeout 换成异步回调也是一样的，比如接口请求回调。

解决方案有下面两种。

解决方案1：缓存 this值

var nickname = "Kitty";
function Person(name){
    this.nickname = name;
    this.distractedGreeting = function() {
        
		var self = this; // added
        setTimeout(function(){
            console.log("Hello, my name is " + self.nickname); // changed
        }, 500);
    }
}
 
var person = new Person('jawil');
person.distractedGreeting();
// Hello, my name is jawil

解决方案2：使用 bind

var nickname = "Kitty";
function Person(name){
    this.nickname = name;
    this.distractedGreeting = function() {

        setTimeout(function(){
            console.log("Hello, my name is " + this.nickname);
        }.bind(this), 500);
    }
}
 
var person = new Person('jawil');
person.distractedGreeting();
// Hello, my name is jawil

完美！

2、验证是否是数组

【进阶3-3期】介绍了 call 的使用场景，这里重新回顾下。

function isArray(obj){ 
    return Object.prototype.toString.call(obj) === '[object Array]';
}
isArray([1, 2, 3]);
// true

// 直接使用 toString()
[1, 2, 3].toString(); 	// "1,2,3"
"123".toString(); 		// "123"
123.toString(); 		// SyntaxError: Invalid or unexpected token
Number(123).toString(); // "123"
Object(123).toString(); // "123"

可以通过toString() 来获取每个对象的类型，但是不同对象的 toString()有不同的实现，所以通过 Object.prototype.toString() 来检测，需要以 call() / apply() 的形式来调用，传递要检查的对象作为第一个参数。

另一个验证是否是数组的方法，这个方案的优点是可以直接使用改造后的 toStr。

var toStr = Function.prototype.call.bind(Object.prototype.toString);
function isArray(obj){ 
    return toStr(obj) === '[object Array]';
}
isArray([1, 2, 3]);
// true

// 使用改造后的 toStr
toStr([1, 2, 3]); 	// "[object Array]"
toStr("123"); 		// "[object String]"
toStr(123); 		// "[object Number]"
toStr(Object(123)); // "[object Number]"

上面方法首先使用 Function.prototype.call函数指定一个 this 值，然后 .bind 返回一个新的函数，始终将 Object.prototype.toString 设置为传入参数。其实等价于 Object.prototype.toString.call() 。

这里有一个前提是toString()方法没有被覆盖

Object.prototype.toString = function() {
    return '';
}
isArray([1, 2, 3]);
// false

3、柯里化（curry）

只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。

可以一次性地调用柯里化函数，也可以每次只传一个参数分多次调用。

var add = function(x) {
  return function(y) {
    return x + y;
  };
};

var increment = add(1);
var addTen = add(10);

increment(2);
// 3

addTen(2);
// 12

add(1)(2);
// 3

这里定义了一个 add 函数，它接受一个参数并返回一个新的函数。调用 add 之后，返回的函数就通过闭包的方式记住了 add 的第一个参数。所以说 bind 本身也是闭包的一种使用场景。

模拟实现

bind（） 函数在 ES5 才被加入，所以并不是所有浏览器都支持，IE8及以下的版本中不被支持，如果需要兼容可以使用 Polyfill 来实现。

首先我们来实现以下四点特性：

• 1、可以指定this
• 2、返回一个函数
• 3、可以传入参数
• 4、柯里化

模拟实现第一步

对于第 1 点，使用 call / apply 指定 this 。

对于第 2 点，使用 return 返回一个函数。

结合前面 2 点，可以写出第一版，代码如下：

// 第一版
Function.prototype.bind2 = function(context) {
    var self = this; // this 指向调用者
    return function () { // 实现第 2点
        return self.apply(context); // 实现第 1 点
    }
}

测试一下

// 测试用例
var value = 2;
var foo = {
    value: 1
};

function bar() {
	return this.value;
}

var bindFoo = bar.bind2(foo);

bindFoo(); // 1

模拟实现第二步

对于第 3 点，使用 arguments 获取参数数组并作为 self.apply() 的第二个参数。

对于第 4 点，获取返回函数的参数，然后同第3点的参数合并成一个参数数组，并作为 self.apply() 的第二个参数。

// 第二版
Function.prototype.bind2 = function (context) {

    var self = this;
    // 实现第3点，因为第1个参数是指定的this,所以只截取第1个之后的参数
	// arr.slice(begin); 即 [begin, end]
    var args = Array.prototype.slice.call(arguments, 1); 

    return function () {
        // 实现第4点，这时的arguments是指bind返回的函数传入的参数
        // 即 return function 的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply( context, args.concat(bindArgs) );
    }
}

测试一下：

// 测试用例
var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    return {
		value: this.value,
		name: name,
		age: age
    }
};

var bindFoo = bar.bind2(foo, "Jack");
bindFoo(20);
// {value: 1, name: "Jack", age: 20}

模拟实现第三步

到现在已经完成大部分了，但是还有一个难点，bind 有以下一个特性

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

来个例子说明下：

var value = 2;
var foo = {
    value: 1
};
function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}
bar.prototype.friend = 'kevin';

var bindFoo = bar.bind(foo, 'Jack');
var obj = new bindFoo(20);
// undefined
// Jack
// 20

obj.habit;
// shopping

obj.friend;
// kevin

上面例子中，运行结果this.value 输出为 undefined，这不是全局value 也不是foo对象中的value，这说明 bind 的 this 对象失效了，new 的实现中生成一个新的对象，这个时候的 this指向的是 obj。（【进阶3-1期】有介绍new的实现原理，下一期也会重点介绍）

这里可以通过修改返回函数的原型来实现，代码如下：

// 第三版
Function.prototype.bind2 = function (context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        
        // 注释1
        return self.apply(
            this instanceof fBound ? this : context, 
            args.concat(bindArgs)
        );
    }
    // 注释2
    fBound.prototype = this.prototype;
    return fBound;
}

• 注释1：
  • 当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true，可以让实例获得来自绑定函数的值，即上例中实例会具有 habit 属性。
  • 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
• 注释2： 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值，即上例中 obj 可以获取到 bar 原型上的 friend。

注意：这边涉及到了原型、原型链和继承的知识点，可以看下我之前的文章。

JavaScript常用八种继承方案

模拟实现第四步

上面实现中 fBound.prototype = this.prototype有一个缺点，直接修改 fBound.prototype 的时候，也会直接修改 this.prototype。

来个代码测试下：

// 测试用例
var value = 2;
var foo = {
    value: 1
};
function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}
bar.prototype.friend = 'kevin';

var bindFoo = bar.bind2(foo, 'Jack'); // bind2
var obj = new bindFoo(20); // 返回正确
// undefined
// Jack
// 20

obj.habit; // 返回正确
// shopping

obj.friend; // 返回正确
// kevin

obj.__proto__.friend = "Kitty"; // 修改原型

bar.prototype.friend; // 返回错误，这里被修改了
// Kitty

解决方案是用一个空对象作为中介，把 fBound.prototype 赋值为空对象的实例（原型式继承）。

var fNOP = function () {};			// 创建一个空对象
fNOP.prototype = this.prototype; 	// 空对象的原型指向绑定函数的原型
fBound.prototype = new fNOP();		// 空对象的实例赋值给 fBound.prototype

这边可以直接使用ES5的 Object.create()方法生成一个新对象

fBound.prototype = Object.create(this.prototype);

不过 bind 和 Object.create()都是ES5方法，部分IE浏览器（IE < 9）并不支持，Polyfill中不能用 Object.create()实现 bind，不过原理是一样的。

第四版目前OK啦，代码如下：

// 第四版，已通过测试用例
Function.prototype.bind2 = function (context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fNOP = function () {};

    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(
            this instanceof fNOP ? this : context, 
            args.concat(bindArgs)
        );
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

模拟实现第五步

到这里其实已经差不多了，但有一个问题是调用 bind 的不是函数，这时候需要抛出异常。

if (typeof this !== "function") {
  throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
}

所以完整版模拟实现代码如下：

// 第五版
Function.prototype.bind2 = function (context) {

    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fNOP = function () {};

    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

【进阶3-2期】思考题解

// 1、赋值语句是右执行的,此时会先执行右侧的对象
var obj = {
    // 2、say 是立即执行函数
    say: function() {
        function _say() {
            // 5、输出 window
            console.log(this);
        }
        // 3、编译阶段 obj 赋值为 undefined
        console.log(obj);
        // 4、obj是 undefined，bind 本身是 call实现，
        // 【进阶3-3期】：call 接收 undefined 会绑定到 window。
        return _say.bind(obj);
    }(),
};
obj.say();

【进阶3-3期】思考题解

call 的模拟实现如下，那有没有什么问题呢？

Function.prototype.call = function (context) {
    context = context ? Object(context) : window; 
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('context.fn(' + args +')');

    delete context.fn;
    return result;
}

当然是有问题的，其实这里假设 context 对象本身没有 fn 属性，这样肯定不行，我们必须保证 fn属性的唯一性。

ES3下模拟实现

解决方法也很简单，首先判断 context中是否存在属性 fn，如果存在那就随机生成一个属性fnxx，然后循环查询 context 对象中是否存在属性 fnxx。如果不存在则返回最终值。

一种循环方案实现代码如下：

function fnFactory(context) {
	var unique_fn = "fn";
    while (context.hasOwnProperty(unique_fn)) {
    	unique_fn = "fn" + Math.random(); // 循环判断并重新赋值
    }
    
    return unique_fn;
}

一种递归方案实现代码如下：

function fnFactory(context) {
	var unique_fn = "fn" + Math.random();
    if(context.hasOwnProperty(unique_fn)) {
        // return arguments.callee(context); ES5 开始禁止使用
        return fnFactory(context); // 必须 return
    } else {
        return unique_fn;
    }
}

模拟实现完整代码如下：

function fnFactory(context) {
	var unique_fn = "fn";
    while (context.hasOwnProperty(unique_fn)) {
    	unique_fn = "fn" + Math.random(); // 循环判断并重新赋值
    }
    
    return unique_fn;
}

Function.prototype.call = function (context) {
    context = context ? Object(context) : window; 
    var fn = fnFactory(context); // added
    context[fn] = this; // changed

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('context[fn](' + args +')'); // changed

    delete context[fn]; // changed
    return result;
}

// 测试用例在下面

ES6下模拟实现

ES6有一个新的基本类型Symbol，表示独一无二的值，用法如下。

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1); // "symbol"
console.log(symbol3.toString()); // "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo')); // false

不能使用 new 命令，因为这是基本类型的值，不然会报错。

new Symbol();
// TypeError: Symbol is not a constructor

模拟实现完整代码如下：

Function.prototype.call = function (context) {
  context = context ? Object(context) : window; 
  var fn = Symbol(); // added
  context[fn] = this; // changed

  let args = [...arguments].slice(1);
  let result = context[fn](...args); // changed

  delete context[fn]; // changed
  return result;
}
// 测试用例在下面

测试用例在这里：

// 测试用例
var value = 2;
var obj = {
    value: 1,
    fn: 123
}

function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name: name,
        age: age
    }
}

bar.call(null); 
// 2

console.log(bar.call(obj, 'kevin', 18));
// 1
// {value: 1, name: "kevin", age: 18}

console.log(obj);
// {value: 1, fn: 123}

扩展一下

有两种方案可以判断对象中是否存在某个属性。

var obj = {
     a: 2
};
Object.prototype.b = function() {
    return "hello b";
}

• 1、in 操作符

in 操作符会检查属性是否存在对象及其 [[Prototype]] 原型链中。

("a" in obj);     // true
("b" in obj);     // true

• 2、Object.hasOwnProperty(...)方法

hasOwnProperty(...)只会检查属性是否存在对象中，不会向上检查其原型链。

obj.hasOwnProperty("a");     //true
obj.hasOwnProperty("b");     //false

注意以下几点：

• 1、看起来 in 操作符可以检查容器内是否有某个值，实际上检查的是某个属性名是否存在。对于数组来说，4 in [2, 4, 6] 结果返回 false，因为 [2, 4, 6] 这个数组中包含的属性名是0，1，2 ，没有4。
• 2、所有普通对象都可以通过 Object.prototype 的委托来访问 hasOwnProperty(...)，但是对于一些特殊对象（ Object.create(null) 创建）没有连接到 Object.prototype，这种情况必须使用 Object.prototype.hasOwnProperty.call(obj, "a")，显示绑定到 obj 上。又是一个 call 的用法。

本期思考题

用 JS 实现一个无限累加的函数 add，示例如下：

add(1); // 1
add(1)(2);  // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10 

// 以此类推

参考

不用 call 和 apply 方法模拟实现 ES5 的 bind 方法

JavaScript 深入之 bind 的模拟实现

MDN 之 Function.prototype.bind()

MDN 之 Symbol

第 4 章: 柯里化（curry）

进阶系列目录

• 【进阶1期】 调用堆栈
• 【进阶2期】 作用域闭包
• 【进阶3期】 this全面解析
• 【进阶4期】 深浅拷贝原理
• 【进阶5期】 原型Prototype
• 【进阶6期】 高阶函数
• 【进阶7期】 事件机制
• 【进阶8期】 Event Loop原理
• 【进阶9期】 Promise原理
• 【进阶10期】Async/Await原理
• 【进阶11期】防抖/节流原理
• 【进阶12期】模块化详解
• 【进阶13期】ES6重难点
• 【进阶14期】计算机网络概述
• 【进阶15期】浏览器渲染原理
• 【进阶16期】webpack配置
• 【进阶17期】webpack原理
• 【进阶18期】前端监控
• 【进阶19期】跨域和安全
• 【进阶20期】性能优化
• 【进阶21期】VirtualDom原理
• 【进阶22期】Diff算法
• 【进阶23期】MVVM双向绑定
• 【进阶24期】Vuex原理
• 【进阶25期】Redux原理
• 【进阶26期】路由原理
• 【进阶27期】VueRouter源码解析
• 【进阶28期】ReactRouter源码解析

交流

进阶系列文章汇总如下，内有优质前端资料，觉得不错点个star。

https://github.com/yygmind/blog

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！

本期的主题是调用堆栈，本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，文末点击查看全部文章。

如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。

执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念。

执行上下文的类型

执行上下文总共有三种类型

• 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。

• 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。

• Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用。

执行栈

执行栈，也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。

首次运行JS代码时，会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下文并Push到当前执行栈的栈顶。

根据执行栈LIFO规则，当栈顶函数运行完成后，其对应的函数执行上下文将会从执行栈中Pop出，上下文控制权将移到当前执行栈的下一个执行上下文。

var a = 'Hello World!';

function first() {  
  console.log('Inside first function');  
  second();  
  console.log('Again inside first function');  
}

function second() {  
  console.log('Inside second function');  
}

first();  
console.log('Inside Global Execution Context');

// Inside first function
// Inside second function
// Again inside first function
// Inside Global Execution Context

执行上下文的创建

执行上下文分两个阶段创建：1）创建阶段； 2）执行阶段

创建阶段

• 1、确定 this 的值，也被称为 This Binding。

• 2、LexicalEnvironment（词法环境） 组件被创建。

• 3、VariableEnvironment（变量环境） 组件被创建。

直接看伪代码可能更加直观

ExecutionContext = {  
  ThisBinding = <this value>,     // 确定this 
  LexicalEnvironment = { ... },   // 词法环境
  VariableEnvironment = { ... },  // 变量环境
}

This Binding

• 全局执行上下文中，this 的值指向全局对象，在浏览器中this 的值指向 window 对象，而在nodejs中指向这个文件的module对象。

• 函数执行上下文中，this 的值取决于函数的调用方式。具体有：默认绑定、隐式绑定、显式绑定（硬绑定）、new绑定、箭头函数，具体内容会在【this全面解析】部分详解。

词法环境（Lexical Environment）

词法环境有两个组成部分

• 1、环境记录：存储变量和函数声明的实际位置

• 2、对外部环境的引用：可以访问其外部词法环境

词法环境有两种类型

• 1、全局环境：是一个没有外部环境的词法环境，其外部环境引用为 null。拥有一个全局对象（window 对象）及其关联的方法和属性（例如数组方法）以及任何用户自定义的全局变量，this 的值指向这个全局对象。

• 2、函数环境：用户在函数中定义的变量被存储在环境记录中，包含了arguments 对象。对外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境。

直接看伪代码可能更加直观

GlobalExectionContext = {  // 全局执行上下文
  LexicalEnvironment: {    	  // 词法环境
    EnvironmentRecord: {   		// 环境记录
      Type: "Object",      		   // 全局环境
      // 标识符绑定在这里 
      outer: <null>  	   		   // 对外部环境的引用
  }  
}

FunctionExectionContext = { // 函数执行上下文
  LexicalEnvironment: {  	  // 词法环境
    EnvironmentRecord: {  		// 环境记录
      Type: "Declarative",  	   // 函数环境
      // 标识符绑定在这里 			  // 对外部环境的引用
      outer: <Global or outer function environment reference>  
  }  
}

变量环境

变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性。

在 ES6 中，词法 环境和 变量 环境的区别在于前者用于存储**函数声明和变量（ let 和 const ）绑定，而后者仅用于存储变量（ var ）**绑定。

使用例子进行介绍

let a = 20;  
const b = 30;  
var c;

function multiply(e, f) {  
 var g = 20;  
 return e * f * g;  
}

c = multiply(20, 30);

执行上下文如下所示

GlobalExectionContext = {

  ThisBinding: <Global Object>,

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  
      // 标识符绑定在这里  
      a: < uninitialized >,  
      b: < uninitialized >,  
      multiply: < func >  
    }  
    outer: <null>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  
      // 标识符绑定在这里  
      c: undefined,  
    }  
    outer: <null>  
  }  
}

FunctionExectionContext = {  
   
  ThisBinding: <Global Object>,

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      Arguments: {0: 20, 1: 30, length: 2},  
    },  
    outer: <GlobalLexicalEnvironment>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      g: undefined  
    },  
    outer: <GlobalLexicalEnvironment>  
  }  
}

变量提升的原因：在创建阶段，函数声明存储在环境中，而变量会被设置为 undefined（在 var 的情况下）或保持未初始化（在 let 和 const 的情况下）。所以这就是为什么可以在声明之前访问 var 定义的变量（尽管是 undefined ），但如果在声明之前访问 let 和 const 定义的变量就会提示引用错误的原因。这就是所谓的变量提升。

执行阶段

此阶段，完成对所有变量的分配，最后执行代码。

如果 Javascript 引擎在源代码中声明的实际位置找不到 let 变量的值，那么将为其分配 undefined 值。

参考

理解 Javascript 执行上下文和执行栈

进阶系列目录

• 【进阶1期】 调用堆栈
• 【进阶2期】 作用域闭包
• 【进阶3期】 this全面解析
• 【进阶4期】 深浅拷贝原理
• 【进阶5期】 原型Prototype
• 【进阶6期】 高阶函数
• 【进阶7期】 事件机制
• 【进阶8期】 Event Loop原理
• 【进阶9期】 Promise原理
• 【进阶10期】Async/Await原理
• 【进阶11期】防抖/节流原理
• 【进阶12期】模块化详解
• 【进阶13期】ES6重难点
• 【进阶14期】计算机网络概述
• 【进阶15期】浏览器渲染原理
• 【进阶16期】webpack配置
• 【进阶17期】webpack原理
• 【进阶18期】前端监控
• 【进阶19期】跨域和安全
• 【进阶20期】性能优化
• 【进阶21期】VirtualDom原理
• 【进阶22期】Diff算法
• 【进阶23期】MVVM双向绑定
• 【进阶24期】Vuex原理
• 【进阶25期】Redux原理
• 【进阶26期】路由原理
• 【进阶27期】VueRouter源码解析
• 【进阶28期】ReactRouter源码解析

交流

进阶系列文章汇总：https://github.com/yygmind/blog，内有优质前端资料，欢迎领取，觉得不错点个star。

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！

第1章 作用域是什么

• 问题1：变量储存在哪里？
• 问题2：程序需要时如何找到它们？

1.1 编译原理

JavaScript语言是“动态”或“解释执行”语言，但事实上是一门编译语言。但它不是提前编译的，编译结果也不能在分布式系统中移植。

传统编译语言流程中，程序在执行之前会经历三个步骤，统称为“编译”。

• 分词/词法分析（Tokenizing/Lexing）

  将由字符组成的字符串分解成（对编程语言来说）有意义的代码块。

  var a = 2;

  上面这段程序会被分解成以下词法单元：var、a、=、2、;。

  空格是否会被当做词法单元，取决于空格在这门语言中是否有意义。

• 解析/语法分析（Parsing）

  将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的数。这个数被称作抽象语法树（Abstract Syntax Tree, AST）。

  var a = 2;

  以上代码的抽象语法树如下所示：

  • VariableDeclaration 顶级节点
    • Identifier 子节点，值为a
    • AssignmentExpression 子节点
      • NumericLiteral 子节点，字为2

• 代码生成

  将AST转换成可执行代码的过程。过程与语言、目标平台等相关。

  简单来说就是可以通过某种方法将var a = 2;的AST转化为一组机器指令。用来创建一个叫做a的变量（包括分配内存等），并将一个值存储在a中。

1.2 理解作用域

1.2.1 演员表

• 引擎：从头到尾负责整个JavaScript程序的编译和执行。
• 编译器：负责语法分析和代码生成等
• 作用域：负责收集并维护由所有声明的标识符（变量、函数）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

1.2.2 对话

var a = 2;存在2个不同的声明。

• 1、编译器在编译时处理（var a）：在当前作用域中声明一个变量（如果之前没有声明过）。

  st=>start: Start
  e=>end: End
  op1=>operation: 分解成词法单元
  op2=>operation: 解析成树结构AST
  cond=>condition: 当前作用域存在变量a?
  op3=>operation: 忽略此声明，继续编译
  op4=>operation: 在当前作用域集合中声明新变量a
  op5=>operation: 生成代码
  st->op1->op2->cond
  cond(yes)->op3->op5->e
  cond(no)->op4->op5->e
  

• 2、引擎在运行时处理（a = 2）：在作用域中查找该变量，如果找到就对变量赋值。

st=>start: Start
e=>end: End
cond=>condition: 当前作用域存在变量a?
cond2=>condition: 全局作用域?
op1=>operation: 引擎使用这个变量a
op2=>operation: 引擎向上一级作用域查找变量a
op3=>operation: 引擎把2赋值给变量a
op4=>operation: 举手示意，抛出异常
st->cond
cond(yes)->op1->op3->e
cond(no)->cond2(no)->op2(right)->cond
cond2(yes)->op4->e

1.2.3 LHS和RHS查询

L和R分别代表一个赋值操作的左侧和右侧，当变量出现在赋值操作的左侧时进行LHS查询，出现在赋值操作的**非左侧**时进行RHS查询。

• LHS查询（左侧）：找到变量的容器本身，然后对其赋值
• RHS查询（非左侧）：查找某个变量的值，可以理解为 retrieve his source value，即取到它的源值

function foo(a) {
    console.log( a ); // 2
}

foo(2);

上述代码共有1处LHS查询，3处RHS查询。

• LHS查询有：

  • 隐式的a = 2中，在2被当做参数传递给foo(…)函数时，需要对参数a进行LHS查询

• RHS查询有：

  • 最后一行foo(...)函数的调用需要对foo进行RHS查询

  • console.log( a );中对a进行RHS查询

  • console.log(...)本身对console对象进行RHS查询

1.3 作用域嵌套

遍历嵌套作用域链的规则：引擎从当前的执行作用域开始查找变量，如果找不到就向上一级继续查找。当抵达最外层的全局作用域时，无论找到还是没有找到，查找过程都会停止。

1.4 异常

ReferenceError和作用域判别失败相关，TypeError表示作用域判别成功了，但是对结果的操作是非法或不合理的。

• RHS查询在作用域链中搜索不到所需的变量，引擎会抛出ReferenceError异常。
• 非严格模式下，LHS查询在作用域链中搜索不到所需的变量，全局作用域中会创建一个具有该名称的变量并返还给引擎。
• 严格模式下（ES5开始，禁止自动或隐式地创建全局变量），LHS查询失败会抛出ReferenceError异常
• 在RHS查询成功情况下，对变量进行不合理的操作，引擎会抛出TypeError异常。（比如对非函数类型的值进行函数调用，或者引用null或undefined类型的值中的属性）

1.5 小结

var a = 2被分解成2个独立的步骤。

• 1、var a在其作用域中声明新变量
• 2、a = 2会LHS查询a，然后对其进行赋值

第2章 词法作用域

2.1 词法阶段

词法作用域是定义在词法阶段的作用域，是由写代码时将变量和块作用域写在哪里来决定的，所以在词法分析器处理代码时会保持作用域不变。（不考虑欺骗词法作用域情况下）

2.1.1 查找

• 作用域查找会在找到第一个匹配的标识符时停止。

• 遮蔽效应：在多层嵌套作用域中可以定义同名的标识符，内部的标识符会“遮蔽”外部的标识符。

• 全局变量会自动变成全局对象的属性，可以间接的通过对全局对象属性的引用来访问。通过这种技术可以访问那些被同名变量所遮蔽的全局变量，但是非全局的变量如果被遮蔽了，无论如何都无法被访问到。

  window.a

• 词法作用域只由函数被声明时所处的位置决定。

• 词法作用域查找只会查找一级标识符，比如a、b、c。对于foo.bar.baz，词法作用域只会查找foo标识符,找到之后，对象属性访问规则会分别接管对bar和baz属性的访问。

2.2 欺骗词法

欺骗词法作用域会导致性能下降。以下两种方法不推荐使用

2.2.1 eval

eval(..)函数可以接受一个字符串为参数，并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。

function foo (str, a) {
    eval( str ); // 欺骗！
    console.log( a, b );
}

var b = 2;
foo( "var b = 3;", 1 ); // 1, 3

eval('var b = 3')会被当做本来就在那里一样来处理。

• 非严格模式下，如果eval(..)中所执行的代码包含一个或多个声明，会在运行期修改书写期的词法作用域。上述代码中在foo(..)内部创建了一个变量b，并遮蔽了外部作用域中的同名变量。
• 严格模式下，eval(..)在运行时有自己的词法作用域，其中的声明无法修改作用域。

function foo (str) {
    "use strict"; 
    eval( str ); 
    console.log( a ); // ReferenceError: a is not defined
}

foo( "var a = 2;" ); 

• setTimeout(..)和setInterval(..)的第一个参数可以是字符串，会被解释为一段动态生成的函数代码。已过时，不要使用
• new Function(..) 的最后一个参数可以接受代码字符串（前面的参数是新生成的函数的形参）。避免使用

2.2.2 with

with通常被当做重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。

var obj = {
    a: 1,
    b: 2,
    c: 3
};

// 单调乏味的重复“obj”
obj.a = 2;
obj.b = 3;
obj.c = 4;

// 简单的快捷方式
with (obj) {
	a = 3;
    b = 4;
    c = 5;
}

with可以将一个没有或有多个属性的对象处理为一个完全隔离的词法作用域，这个对象的属性会被处理为定义在这个作用域中的词法标识符。

这个块内部正常的var声明并不会被限制在这个块的作用域中，而是被添加到with所处的函数作用域中。

function foo(obj) {
    with (obj) {
        a = 2;
    }
}

var o1 = {
    a: 3
};

var o2 = {
    b : 3
}

foo( o1 );
console.log( o1.a ); // 2

foo( o2 );
console.log( o2.a ); // undefined
console.log( a ); // 2 -- 不好，a被泄露到全局作用域上了！

上面例子中，创建了o1和o2两个对象。其中一个有a属性，另一个没有。在with(obj){..}内部是一个LHS引用，并将2赋值给它。

• o1传递进去后，with声明的作用域是o1,a = 2赋值操作找到o1.a并将2赋值给它。
• o2传递进去后，作用域o2中并没有a属性，因此进行正常的LHS标识符查找，o2的作用域、foo(..)的作用域和全局作用域都没有找到标识符a，因此当a = 2执行时，自动创建了一个全局变量（非严格模式），所以o2.a保持undefined。

2.2.3 性能

• JavaScript引擎会在编译阶段进行数项的性能优化，其中有些优化依赖于能够根据代码的词法进行静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到标识符。
• 引擎在代码中发现eval(..)或with，它只能简单的假设关于标识符位置的判断都是无效的。因为无法在词法分析阶段明确知道eval(..)会接收到什么代码，这些代码会如何对作用域进行修改，也无法知道传递给with用来创建词法作用域的对象的内容到底是什么。
• 悲观情况下如果出现了eval(..)或with，所有的优化可能都是无意义的，最简单的做法就是完全不做任何优化。代码运行起来一定会变得非常慢。

2.3 小结

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。

编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。

有以下两个机制可以“欺骗”词法作用域：

• eval(..)：对一段包含一个或多个声明的”代码“字符串进行演算，借此来修改已经存在的词法作用域（运行时）。
• with：将一个对象的引用当做作用域来处理，将对象的属性当做作用域中的标识符来处理，创建一个新的词法作用域（运行时）。

副作用是引擎无法在编译时对作用域查找进行优化。因为引擎只能谨慎地认为这样的优化是无效的，使用任何一个都将导致代码运行变慢。不要使用它们

第3章 函数作用域和块作用域

3.1 函数中的作用域

属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。

function foo(a) {
    var b = 2;
    
    // 一些代码
    
    function bar() {
        // ...
    }
    
    // 更多的代码
    
    var c = 3;
}

foo(..)作用域中包含了标识符（变量、函数）a、b、c和bar。无论标识符声明出现在作用域中的何处，这个标识符所代表的变量或函数都将附属于所处的作用域。

全局作用域只包含一个标识符：foo。

3.2 隐藏内部实现

最小特权原则（最小授权或最小暴露原则）：在软件设计中，应该最小限度地暴露必要内容，而将其他内容都”隐藏“起来，比如某个模块或对象的API设计。

function doSomething(a) {
    function doSomethingElse(a) {
        return a - 1;
    }
    
    var b;
    
    b = a + doSomethingElse( a * 2 );
    
    console.log( b * 3 );
}

doSomething( 2 ); // 15

b和doSomethingElse(..)都无法从外部被访问，而只能被doSomething(..)所控制，设计上将具体内容私有化了。

3.2.1 规避冲突

”隐藏“作用域中的变量和函数带来的另一个好处是可以避免同名标识符之间的冲突。

function foo() {
    function bar(a) {
        i = 3; // 修改for循环所属作用域中的i
        console.log( a + i );
    }
    
    for (var i = 0; i < 10; i++) {
        bar( i * 2 ); // 糟糕，无限循环了！
    }
}
foo();

bar(..)内部的赋值表达式i = 3意外的覆盖了声明在foo(..)内部for循环中的i。

解决方案：

• 声明一个本地变量，任何名字都可以，例如var i = 3。
• 采用一个完全不同的标识符名称，例如var j = 3。

规避变量冲突的典型例子：

• 全局命名空间

  第三方库会在全局作用域中声明一个名字足够独特的变量，通常是一个对象，这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象（命名空间）的属性，而不是将自己的标识符暴露在顶级的词法作用域中。

• 模块管理

  任何库无需将标识符加入到全局作用域中，而是通过依赖管理器的机制将库的标识符显示的导入到另外一个特定的作用域中。

3.3 函数作用域

var a = 2;

function foo() { // <-- 添加这一行
    
    var a = 3;
    console.log( a ); // 3
    
} // <-- 以及这一行
foo(); // <-- 以及这一行

console.log( a ); // 2

上述函数作用域虽然可以将内部的变量和函数定义”隐藏“起来，但是会导致以下2个额外问题。

• 必须声明一个具名函数foo()，意味着foo这个名称本身”污染“了所在的作用域。
• 必须显示地通过函数名foo()调用这个函数才能运行其中的代码。

解决方案：

var a = 2;

(function foo(){ // <-- 添加这一行
    
    var a = 3;
    console.log( a ); // 3
    
})(); // <-- 以及这一行

console.log( a ); // 2

上述代码包装函数的声明以(function...开始，函数会被当做函数表达式而不是一个标准的函数声明来处理。

• 区分函数声明和函数表达式最简单的方法是看function关键字出现在声明中的位置（不仅仅是一行代码，而是整个声明中的位置）。
  • 函数声明：function是声明中的第一个词
  • 函数表达式：不是声明中的第一个词
• 函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。
  • 第一个片段中，foo被绑定在所在作用域中，可以直接通过foo()来调用它。
  • 第二个片段中，foo被绑定在函数表达式自身的函数中，而不是所在的作用域。(function foo(){ .. }中foo只能在..所代表的位置中被访问，外部作用域不行。foo变量名被隐藏在自身中意味着不会非必要地污染外部作用域。

3.3.1 匿名和具名

setTimeout( function() {
    console.log("I wait 1 second!");
}, 1000 );

上述是匿名函数表达式，因为function()..没有名称标识符。

函数表达式可以匿名，但函数声明不可以省略函数名。

匿名函数表达式有以下缺点：

• 在栈追踪中不会显示出有意义的函数名，会使得调试困难。
• 没有函数名，当函数需要引用自身时只能使用已经过期的arguments.callee引用
  • 递归
  • 事件触发后事件监听器需要解绑自身
• 匿名函数省略了对于代码可读性/可理解性很重要的函数名。

解决方案：

行内函数表达式可以解决上述问题，始终给函数表达式命名是一个最佳实践。

setTimeout( function timeoutHandler() { // <-- 快看，我有名字了！
    console.log( "I waited 1 second!" );
}, 1000 );

3.3.2 立即执行函数表达式

立即执行函数表达式（IIFE，Immediately Invoked Function Expression）

• 匿名/具名函数表达式

  第一个（ ）将函数变成表达式，第二个（ ）执行了这个函数

  var a = 2;
  (function IIFE() {
      
      var a = 3;
      console.log( a ); // 3
      
  })();
  
  console.log( a ); // 2

• 改进型(function(){ .. }())

  用来调用的（ ）被移进了用来包装的（ ）中。

• 当做函数调用并传递参数进去

  var a = 2;
  (function IIFE( global ) {
      
      var a = 3;
      console.log( a ); // 3
      console.log( global.a ); // 2
      
  })( window );
  
  console.log( a ); // 2

• 解决undefined标识符的默认值被错误覆盖导致的异常

  将一个参数命名为undefined，但是在对应的位置不传入任何值，这样就可以保证在代码块中undefined标识符的值真的是undefined。

  undefined = true;
  
  (function IIFE( undefined ) {
      
      var a;
      if (a === undefined) {
          console.log("Undefined is safe here!");
      }
  })();

• 倒置代码的运行顺序，将需要运行的函数放在第二位，在IIFE执行之后当做参数传递进去

  函数表达式def定义在片段的第二部分，然后当做参数（这个参数也叫做def）被传递进IIFE函数定义的第一部分中。最后，参数def（也就是传递进去的函数）被调用，并将window传入当做global参数的值。

  var a = 2;
  
  (function IIFE( def ) {
      def( window );
  })(function def( global ) {
     
      var a = 3;
      console.log( a ); // 3
      console.log( global.a ); // 2
      
  });

3.4 块作用域

表面上看JavaScript并没有块作用域的相关功能，除非更加深入了解（with、try/catch 、let、const）。

for (var i = 0; i < 10; i++) {
    console.log( i );
}

上述代码中i会被绑定在外部作用域（函数或全局）中。

var foo = true;

if (foo) {
    var bar = foo * 2;
    bar = something( bar );
    console.log( bar );
}

上述代码中，当使用var声明变量时，它写在哪里都是一样的，因为它们最终都会属于外部作用域。

3.4.1 with

块作用域的一种形式，用with从对象中创建出的作用域仅在**with声明中**而非外部作用域中有效。

3.4.2 try/catch

ES3规范中规定try/catch的catch分句会创建一个块作用域，其中声明的变量仅在catch中有效。

try {
    undefined(); // 执行一个非法操作来强制制造一个异常
}
catch (err) {
    console.log( err ); // 能够正常执行！
}

console.log( err )； // ReferenceError: err not found

当同一个作用域中的两个或多个catch分句用同样的标识符名称声明错误变量时，很多静态检查工具还是会发出警告，实际上这并不是重复定义，因为所有变量都会安全地限制在块作用域内部。

3.4.3 let

ES6引入了let关键字，可以将变量绑定到所在的任意作用域中（通常是{ .. }内部），即let为其声明的变量隐式地劫持了所在的块作用域。

var foo = true;

if (foo) {
    let bar = foo * 2;
    bar = something( bar );
    console.log( bar );
}

console.log( bar ); // ReferenceError

存在的问题

用let将变量附加在一个已经存在的的块作用域上的行为是隐式的，如果习惯性的移动这些块或者将其包含在其他的块中，可能会导致代码混乱。

解决方案

为块作用域显示地创建块。显式的代码优于隐式或一些精巧但不清晰的代码。

var foo = true;

if (foo) {
    { // <-- 显式的块
        let bar = foo * 2;
        bar = something( bar );
        console.log( bar );
    }
}

console.log( bar ); // ReferenceError

在if声明内部显式地创建了一个块，如果需要对其进行重构，整个块都可以被方便地移动而不会对外部if声明的位置和语义产生任何影响。

• 在let进行的声明不会在块作用域中进行提升

  console.log( bar ); // ReferenceError
  let bar = 2;

• 1、垃圾收集

  function process(data) {
      // 在这里做点有趣的事情
  }
  
  var someReallyBigData = { .. };
  
  process( someReallyBigData );
  
  var btn = document.getElementById( "my_button" );
  
  btn.addEventListener( "click", function click(evt) {
      console.log("button clicked");
  }, /*capturingPhase*/false );

  click函数的点击回调并不需要someReallyBigData。理论上当process(..)执行后，在内存中占用大量空间的数据结构就可以被垃圾回收了。但是，由于click函数形成了一个覆盖整个作用域的闭包，JS引擎极有可能依然保存着这个结构（取决于具体实现）。

• 2、let循环

  for (let i = 0; i < 10; i++) {
      console.log( i );
  }
  
  console.log( i ); // ReferenceError

  for循环头部的let不仅将i绑定到了for循环的块中，事实上它将其重新绑定到了循环的每一个迭代中，确保使用上一个循环迭代结束时的值重新进行赋值。

  {
      let j;
      for (j = 0; j < 10; j++) {
          let i = j; // 每个迭代重新绑定!
          console.log( i ); 
     	} 
  }

3.4.4 const

ES6引用了const，可以创建块作用域变量，但其值是固定的（常量）

var foo = true;

if(foo) {
    var a = 2;
    const b = 3; // 包含在if中的块作用域常量
    
    a = 3; // 正常!
    b = 4; // 错误!
}

console.log( a ); // 3
console.log( b ); // ReferenceError!

第4章 提升

• 任何声明在某个作用域内的变量，都将附属于这个作用域。
• 包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。
• var a = 2;会被看成两个声明，var a;和a = 2;，第一个声明在编译阶段进行，第二个赋值声明会被留在原地等待执行阶段。
• 所有的声明（变量和函数）都会被**“移动”到各自作用域的最顶端，这个过程叫做提升**
• 只有声明本身会被提升，而包括函数表达式在内的赋值或其他运行逻辑并不会提升。

a = 2;

var a;

console.log( a ); // 2

---------------------------------------
// 实际按如下形式进行处理
var a; // 编译阶段

a = 2; // 执行阶段

console.log( a ); // 2

console.log( a ); // undefinde

var a = 2;

---------------------------------------
// 实际按如下形式进行处理
var a; // 编译

console.log( a ); // undefinde

a = 2; // 执行

• 每个作用域都会进行变量提升

function foo() {
    var a;
    
    console.log( a ); // undefinde
    
    a = 2;
}

foo();

• 函数声明会被提升，但是函数表达式不会被提升。

foo(); // 不是ReferenceError，而是TypeError!

var foo = function bar() {
    // ...
};

上面这段程序中，变量标识符foo()被提升并分配给所在作用域，因此foo()不会导致ReferenceError。此时foo并没有赋值（如果它是一个函数声明而不是函数表达式，那么就会赋值），foo()由于对undefined值进行函数调用而导致非法操作，因此抛出TypeError异常。

• 即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用。

foo(); // TypeError
bar(); // ReferenceError

var foo = function bar() {
    // ...
};

---------------------------------------
// 实际按如下形式进行处理
var foo;

foo(); // TypeError
bar(); // ReferenceError

foo = function() {
    var bar = ...self...
    // ...
};

4.1 函数优先

• 函数声明和变量声明都会被提升，但是，函数首先被提升，然后才是变量

foo(); // 1

var foo;

function foo() {
    console.log( 1 ); 
};

foo = function() {
    console.log( 2 ); 
};

---------------------------------------
// 实际按如下形式进行处理

function foo() { // 函数提升是整体提升，声明 + 赋值
    console.log( 1 ); 
};

foo(); // 1

foo = function() {
    console.log( 2 ); 
};

• var foo尽管出现在function foo()...的声明之前，但它是重复的声明，且函数声明会被提升到普通变量之前，因此被忽略
• 后面出现的函数声明可以覆盖前面的。

foo(); // 3

function foo() {
    console.log( 1 ); 
};

var foo = function() {
    console.log( 2 ); 
};

function foo() {
    console.log( 3 ); 
};

• 一个普通块内部的函数声明通常会被提升到所在作用域的顶部，不会被条件判断所控制。尽量避免在普通块内部声明函数。

foo(); // "b"

var a = true;
if (a) {
    function foo() { console.log( "a" ); };
}
else {
    function foo() { console.log( "b" ); };
}

第5章 作用域闭包

5.1 闭包

• 当函数可以记住并访问所在的词法作用域，即使函数名是在当前词法作用域之外执行，这时就产生了闭包。

function foo() {
    var a = 2;
    
    function bar() {
		console.log( a );
    }
    
    return bar;
}

var baz = foo();

baz(); // 2 ---- 这就是闭包的效果

bar()在自己定义的词法作用域以外的地方执行。

bar()拥有覆盖foo()内部作用域的闭包，使得该作用域能够一直存活，以供bar()在之后任何时间进行引用，不会被垃圾回收器回收

• bar()持有对foo()内部作用域的引用，这个引用就叫做闭包。

// 对函数类型的值进行传递
function foo() {
    var a = 2;
    
    function baz() {
		console.log( a ); // 2
    }
    
    bar( baz );
}

function bar(fn) {
    fn(); // 这就是闭包
}

foo();

• 把内部函数baz传递给bar，当调用这个内部函数时（现在叫做fn），它覆盖的foo()内部作用域的闭包就形成了，因为它能够访问a。

// 间接的传递函数
var fn;

function foo() {
    var a = 2;
    
    function baz() {
		console.log( a ); 
    }
    
    fn = baz; // 将baz分配给全局变量
}

function bar() {
    fn(); // 这就是闭包
}

foo();
bar(); // 2

• 将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。

function wait(message) {
    
    setTimeout( function timer() {
        console.log( message );
    }, 1000 );
}

wait( "Hello, closure!" );

• 在引擎内部，内置的工具函数setTimeout(..)持有对一个参数的引用，这里参数叫做timer，引擎会调用这个函数，而词法作用域在这个过程中保持完整。这就是闭包
• 定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers或者任何其他的异步（或者同步）任务中，只要使用了回调函数，实际上就是在使用闭包！

// 典型的闭包例子：IIFE
var a = 2;

(function IIFE() {
    console.log( a );
})();

5.2 循环和闭包

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

//输入五次6

• 延迟函数的回调会在循环结束时才执行，输出显示的是循环结束时i的最终值。
• 尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个i

尝试方案1：使用IIFE增加更多的闭包作用域

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

//失败，因为IIFE作用域是空的，需要包含一点实质内容才可以使用

尝试方案2：IIFE增加变量

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

// 正常工作

尝试方案3：改进型，将i作为参数传递给IIFE函数

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

// 正常工作

5.2.1 块作用域和闭包

• let可以用来劫持块作用域，并且在这个块作用域中声明一个变量。
• 本质上这是将一个块转换成一个可以被关闭的作用域

for (var i = 1; i <= 5; i++) {
    let j = i; // 闭包的块作用域！
    setTimeout( function timer() {
        console.log( j );
    }, j * 1000 );
}

// 正常工作

• for循环头部的let声明会有一个特殊的行为。变量在循环过程中不止被声明一次，每次迭代都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

上面这句话参照3.4.3–---2.let循环，即以下

{
    let j;
    for (j = 0; j < 10; j++) {
        let i = j; // 每个迭代重新绑定!
        console.log( i ); 
   	} 
}

循环改进：

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

// 正常工作

5.3 模块

模块模式需要具备两个必要条件：

• 必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例，可以通过IIFE实现单例模式）
• 封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    
    function doSomething() {
        console.log( something );
    }
    
    function doAnother() {
        console.log( another.join( " ! ") );
    }
    
    return {
        doSomething: doSomething,
        doAnother: doAnother
    }
}

var foo = CoolModule();

foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

// 1、必须通过调用CoolModule()来创建一个模块实例
// 2、CoolModule()返回一个对象字面量语法{ key: value, ... }表示的对象，对象中含有对内部函数而不是内部数据变量的引用。内部数据变量保持隐藏且私有的状态。

• 使用IIFE实现单例模式

立即调用这个函数并将返回值直接赋予给单例的模块标识符foo。

var foo = (function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    
    function doSomething() {
        console.log( something );
    }
    
    function doAnother() {
        console.log( another.join( " ! ") );
    }
    
    return {
        doSomething: doSomething,
        doAnother: doAnother
    }
})();

foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

5.5.1 现代的模块机制

大多数模块依赖加载器/管理器本质上是将这种模块定义封装进一个友好的API。

var MyModules = (function Manager() {
    var modules = {};
    
    function define(name, deps, impl) {
        for (var i = 0; i < deps.length; i++ ) {
			deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply( impl, deps ); // 核心，为了模块的定义引用了包装函数(可以传入任何依赖)，并且将返回值(模块的API)，储存在一个根据名字来管理的模块列表中。
    }
    
    function get(name) {
        return modules[name];
    }
    
    return {
        define: define,
        get: get
    };
    
})();

使用上面的函数来定义模块：

MyModules.define( "bar", [], function() {
    function hello(who) {
        return "Let me introduct: " + who;
    }
    
    return {
        hello: hello
    };
} );

MyModules.define( "foo", ["bar"], function(bar) {
    var hungry = "hippo";
    
    function awesome() {
        console.log( bar.hello( hungry ).toUpperCase() );
    }
    
    return {
        awesome: awesome
    };
} );

var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );

console.log(
	bar.hello( "hippo" );
) // Let me introduct: hippo

foo.awesome(); // LET ME INTRODUCT: HIPPO

5.5.2 未来的模块机制

在通过模块系统进行加载时，ES6会将文件当做独立的模块来处理。每个模块都可以导入其他模块或特定的API成员，同样可以导出自己的API成员。

ES6模块没有“行内”格式，必须被定义在独立的文件中（一个文件一个模块）

• 基于函数的模块不能被静态识别（编译器无法识别），只有在运行时才会考虑API语义，因此可以在运行时修改一个模块的API。
• ES6模块API是静态的（API模块不会在运行时改变），会在编译期检查对导入模块的API成员的引用是否真实存在。

// bar.js

function hello(who) {
    return "Let me introduct: " + who;
}

export hello;


// foo.js
// 仅从“bar”模块导入hello()
import hello from "bar";

var hungry = "hippo";

function awesome() {
    console.log(
    	hello( hungry ).toUpperCase();
    );
}

export awesome;

// baz.js
// 导入完整的“foo”和”bar“模块
module foo from "foo";
module bar from "bar";

console.log(
	bar.hello( "rhino")
); // Let me introduct: rhino

foo.awesome(); // LET ME INTRODUCT: HIPPO

• import：将一个模块中的一个或多个API导入到当前作用域中，并分别绑定在一个变量上
• module：将整个模块的API导入并绑定到一个变量上。
• export：将当前模块的一个标识符（变量、函数）导出为公共API

附录A 动态作用域

• 词法作用域是在写代码或者定义时确定的，关注函数在何处声明，作用域链基于代码嵌套。
• 动态作用域是在运行时确定的（this也是），关注函数从何处调用，作用域链基于调用栈。
• JavaScript并不具备动态作用域，它只有词法作用域。但是this机制某种程度上很像动态作用域。

// 词法作用域，关注函数在何处声明，a通过RHS引用到了全局作用域中的a
function foo() {
    console.log( a ); // 2
}

function bar() {
    var a = 3;
    foo();
}

var a = 2;
bar();

-----------------------------
// 动态作用域，关注函数从何处调用，当foo()无法找到a的变量引用时，会顺着调用栈在调用foo()的地方查找a
function foo() {
    console.log( a ); // 3(不是2！)
}

function bar() {
    var a = 3;
    foo();
}

var a = 2;
bar();

附录B 块作用域的替代方案

ES3开始，JavaScript中就有了块作用域，包括with和catch分句。

// ES6环境
{
    let a = 2;
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

上述代码在ES6环境中可以正常工作，但是在ES6之前的环境中如何实现呢？

答案是使用catch分句，这是ES6中大部分功能迁移的首选方式。

try {
    throw 2;
} catch (a) {
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

B.1 Traceur

// 代码转换成如下形式
{
    try {
        throw undefined;
    } catch (a) {
        a = 2;
        console.log( a ); // 2
    }
}

console.log( a ); // ReferenceError

B.2 隐式和显式作用域

let声明会创建一个显式的作用域并与其进行绑定，而不是隐式地劫持一个已经存在的作用域（对比前面的let定义）。

let (a = 2) {
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

存在的问题：

let声明不包含在ES6中，Traceur编译器也不接受这种代码

• 方案一：使用合法的ES6语法并且在代码规范上做一些妥协

/*let*/ { let a = 2;
    console.log( a );
}

console.log( a ); // ReferenceError

• 方案二：使用let-er工具，生成完全标准的ES6代码，不会生成通过try/catch进行hack的ES3替代方案

{
    let a = 2;
    console.log( a );
}

console.log( a ); // ReferenceError

B.3 性能

• try/catch的性能的确很糟糕，但技术层面上没有合理的理由来说明try/catch必须这么慢，或者会一直慢下去。
• IIFE和try/catch不是完全等价的，因为如果把一段代码中的任意一部分拿出来用函数进行包裹，会改变这段代码的含义，其中的this、return、break和continue都会发生变化。IIFE并不是一个普适的方案，只适合在某些情况下进行手动操作。

交流

进阶系列文章汇总如下，内有优质前端资料，觉得不错点个star。

https://github.com/yygmind/blog

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！

本期的主题是调用堆栈，本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，文末点击查看全部文章。

如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。

JS是单线程的语言，执行顺序肯定是顺序执行，但是JS 引擎并不是一行一行地分析和执行程序，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。

翠花，上代码

例子一：变量提升

foo;  // undefined
var foo = function () {
    console.log('foo1');
}

foo();  // foo1，foo赋值

var foo = function () {
    console.log('foo2');
}

foo(); // foo2，foo重新赋值

例子二：函数提升

foo();  // foo2
function foo() {
    console.log('foo1');
}

foo();  // foo2

function foo() {
    console.log('foo2');
}

foo(); // foo2

例子三：声明优先级，函数 > 变量

foo();  // foo2
var foo = function() {
    console.log('foo1');
}

foo();  // foo1，foo重新赋值

function foo() {
    console.log('foo2');
}

foo(); // foo1

上面三个例子中，第一个例子是变量提升，第二个例子是函数提升，第三个例子是函数声明优先级高于变量声明。

需要注意的是同一作用域下存在多个同名函数声明，后面的会替换前面的函数声明。

执行上下文

执行上下文总共有三种类型

• 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。
• 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。
• Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用。

这部分内容在【进阶1-1期】中详细介绍了，点击查看【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

执行上下文栈

因为JS引擎创建了很多的执行上下文，所以JS引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文。

当 JavaScript 初始化的时候会向执行上下文栈压入一个全局执行上下文，我们用 globalContext 表示它，并且只有当整个应用程序结束的时候，执行栈才会被清空，所以程序结束之前， 执行栈最底部永远有个 globalContext。

ECStack = [		// 使用数组模拟栈
    globalContext
];

具体执行过程如下图所示，这部分内容在【进阶1-1期】中详细介绍了，点击查看【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

找不同

有如下两段代码，执行的结果是一样的，但是两段代码究竟有什么不同？

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

答案是 执行上下文栈的变化不一样。

第一段代码：

ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();

第二段代码：

ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();

函数上下文

在函数上下文中，用活动对象(activation object, AO)来表示变量对象。

活动对象和变量对象的区别在于

• 1、变量对象（VO）是规范上或者是JS引擎上实现的，并不能在JS环境中直接访问。
• 2、当进入到一个执行上下文后，这个变量对象才会被激活，所以叫活动对象（AO），这时候活动对象上的各种属性才能被访问。

调用函数时，会为其创建一个Arguments对象，并自动初始化局部变量arguments，指代该Arguments对象。所有作为参数传入的值都会成为Arguments对象的数组元素。

执行过程

执行上下文的代码会分成两个阶段进行处理

• 1、进入执行上下文

• 2、代码执行

进入执行上下文

很明显，这个时候还没有执行代码

此时的变量对象会包括（如下顺序初始化）：

• 1、函数的所有形参 (only函数上下文)：没有实参，属性值设为undefined。
• 2、函数声明：如果变量对象已经存在相同名称的属性，则完全替换这个属性。
• 3、变量声明：如果变量名称跟已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性。

上代码就直观了

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;
}

foo(1);

对于上面的代码，这个时候的AO是

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

形参arguments这时候已经有赋值了，但是变量还是undefined，只是初始化的值

代码执行

这个阶段会顺序执行代码，修改变量对象的值，执行完成后AO如下

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

总结如下：

• 1、全局上下文的变量对象初始化是全局对象

• 2、函数上下文的变量对象初始化只包括 Arguments 对象

• 3、在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值

• 4、在代码执行阶段，会再次修改变量对象的属性值

参考

JavaScript深入之执行上下文栈
JavaScript深入之变量对象

进阶系列目录

• 【进阶1期】 调用堆栈
• 【进阶2期】 作用域闭包
• 【进阶3期】 this全面解析
• 【进阶4期】 深浅拷贝原理
• 【进阶5期】 原型Prototype
• 【进阶6期】 高阶函数
• 【进阶7期】 事件机制
• 【进阶8期】 Event Loop原理
• 【进阶9期】 Promise原理
• 【进阶10期】Async/Await原理
• 【进阶11期】防抖/节流原理
• 【进阶12期】模块化详解
• 【进阶13期】ES6重难点
• 【进阶14期】计算机网络概述
• 【进阶15期】浏览器渲染原理
• 【进阶16期】webpack配置
• 【进阶17期】webpack原理
• 【进阶18期】前端监控
• 【进阶19期】跨域和安全
• 【进阶20期】性能优化
• 【进阶21期】VirtualDom原理
• 【进阶22期】Diff算法
• 【进阶23期】MVVM双向绑定
• 【进阶24期】Vuex原理
• 【进阶25期】Redux原理
• 【进阶26期】路由原理
• 【进阶27期】VueRouter源码解析
• 【进阶28期】ReactRouter源码解析

交流

进阶系列文章汇总：https://github.com/yygmind/blog，内有优质前端资料，欢迎领取，觉得不错点个star。

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！

本期的主题是作用域闭包，本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，文末点击查看全部文章。

如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。

红宝书(p178)上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数
关键在于下面两点：

• 是一个函数
• 能访问另外一个函数作用域中的变量

对于闭包有下面三个特性：

• 1、闭包可以访问当前函数以外的变量

function getOuter(){
  var date = '815';
  function getDate(str){
    console.log(str + date);  //访问外部的date
  }
  return getDate('今天是：'); //"今天是：815"
}
getOuter();

• 2、即使外部函数已经返回，闭包仍能访问外部函数定义的变量

function getOuter(){
  var date = '815';
  function getDate(str){
    console.log(str + date);  //访问外部的date
  }
  return getDate;     //外部函数返回
}
var today = getOuter();
today('今天是：');   //"今天是：815"
today('明天不是：');   //"明天不是：815"

• 3、闭包可以更新外部变量的值

function updateCount(){
  var count = 0;
  function getCount(val){
    count = val;
    console.log(count);
  }
  return getCount;     //外部函数返回
}
var count = updateCount();
count(815); //815
count(816); //816

作用域链

Javascript中有一个执行上下文(execution context)的概念，它定义了变量或函数有权访问的其它数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。

详情查看 【进阶1-2期】JavaScript深入之执行上下文栈和变量对象

作用域链：当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链。

作用域链和原型继承查找时的区别：如果去查找一个普通对象的属性，但是在当前对象和其原型中都找不到时，会返回undefined；但查找的属性在作用域链中不存在的话就会抛出ReferenceError。

作用域链的顶端是全局对象，在全局环境中定义的变量就会绑定到全局对象中。

全局环境

无嵌套的函数

// my_script.js
"use strict";

var foo = 1;
var bar = 2;

function myFunc() {
  
  var a = 1;
  var b = 2;
  var foo = 3;
  console.log("inside myFunc");
  
}

console.log("outside");
myFunc();

定义时：当myFunc被定义的时候，myFunc的标识符（identifier）就被加到了全局对象中，这个标识符所引用的是一个函数对象（myFunc function object）。

内部属性[[scope]]指向当前的作用域对象，也就是函数的标识符被创建的时候，我们所能够直接访问的那个作用域对象（即全局对象）。

myFunc所引用的函数对象，其本身不仅仅含有函数的代码，并且还含有指向其被创建的时候的作用域对象。

调用时：当myFunc函数被调用的时候，一个新的作用域对象被创建了。新的作用域对象中包含myFunc函数所定义的本地变量，以及其参数（arguments）。这个新的作用域对象的父作用域对象就是在运行myFunc时能直接访问的那个作用域对象（即全局对象）。

有嵌套的函数

当函数返回没有被引用的时候，就会被垃圾回收器回收。但是对于闭包，即使外部函数返回了，函数对象仍会引用它被创建时的作用域对象。

"use strict";
function createCounter(initial) {
  var counter = initial;
  
  function increment(value) {
    counter += value;
  }
  
  function get() {
    return counter;
  }
  
  return {
    increment: increment,
    get: get
  };
}

var myCounter = createCounter(100);
console.log(myCounter.get());   // 返回 100

myCounter.increment(5);
console.log(myCounter.get());   // 返回 105

当调用 createCounter(100) 时，内嵌函数increment和get都有指向createCounter(100) scope的引用。假设createCounter(100)没有任何返回值，那么createCounter(100) scope不再被引用，于是就可以被垃圾回收。

但是createCounter(100)实际上是有返回值的，并且返回值被存储在了myCounter中，所以对象之间的引用关系如下图：

即使createCounter(100)已经返回，但是其作用域仍在，并且只能被内联函数访问。可以通过调用myCounter.increment() 或 myCounter.get()来直接访问createCounter(100)的作用域。

当myCounter.increment() 或 myCounter.get()被调用时，新的作用域对象会被创建，并且该作用域对象的父作用域对象会是当前可以直接访问的作用域对象。

调用get()时，当执行到return counter时，在get()所在的作用域并没有找到对应的标示符，就会沿着作用域链往上找，直到找到变量counter，然后返回该变量。

单独调用increment(5)时，参数value保存在当前的作用域对象。当函数要访问counter时，没有找到，于是沿着作用域链向上查找，在createCounter(100)的作用域找到了对应的标示符，increment()就会修改counter的值。除此之外，没有其他方式来修改这个变量。闭包的强大也在于此，能够存贮私有数据。

创建两个函数：myCounter1和myCounter2

//my_script.js
"use strict";
function createCounter(initial) {
  /* ... see the code from previous example ... */
}

//-- create counter objects
var myCounter1 = createCounter(100);
var myCounter2 = createCounter(200);

关系图如下

myCounter1.increment和myCounter2.increment的函数对象拥有着一样的代码以及一样的属性值（name，length等等），但是它们的[[scope]]指向的是不一样的作用域对象。

参考

从作用域链谈闭包

进阶系列目录

• 【进阶1期】 调用堆栈
• 【进阶2期】 作用域闭包
• 【进阶3期】 this全面解析
• 【进阶4期】 深浅拷贝原理
• 【进阶5期】 原型Prototype
• 【进阶6期】 高阶函数
• 【进阶7期】 事件机制
• 【进阶8期】 Event Loop原理
• 【进阶9期】 Promise原理
• 【进阶10期】Async/Await原理
• 【进阶11期】防抖/节流原理
• 【进阶12期】模块化详解
• 【进阶13期】ES6重难点
• 【进阶14期】计算机网络概述
• 【进阶15期】浏览器渲染原理
• 【进阶16期】webpack配置
• 【进阶17期】webpack原理
• 【进阶18期】前端监控
• 【进阶19期】跨域和安全
• 【进阶20期】性能优化
• 【进阶21期】VirtualDom原理
• 【进阶22期】Diff算法
• 【进阶23期】MVVM双向绑定
• 【进阶24期】Vuex原理
• 【进阶25期】Redux原理
• 【进阶26期】路由原理
• 【进阶27期】VueRouter源码解析
• 【进阶28期】ReactRouter源码解析

交流

进阶系列文章汇总：https://github.com/yygmind/blog，内有优质前端资料，欢迎领取，觉得不错点个star。

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！

引言

上一节我们认识了节流函数 throttle，了解了它的定义、实现原理以及在 underscore 中的实现。这一小节会继续之前的篇幅聊聊防抖函数 debounce，结构是一样的，将分别介绍定义、实现原理并给出了 2 种实现代码并在最后介绍在 underscore 中的实现，欢迎大家拍砖。

有什么想法或者意见都可以在评论区留言，下图是本文的思维导图，高清思维导图和更多文章请看我的 Github。

定义及解读

防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。

举一个小例子：假定在做公交车时，司机需等待最后一个人进入后再关门，每次新进一个人，司机就会把计时器清零并重新开始计时，重新等待 1 分钟再关门，如果后续 1 分钟内都没有乘客上车，司机会认为乘客都上来了，将关门发车。

此时「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务；「1 分钟」就是计时器，它是司机决定「关门」的依据，如果有新的「乘客」上车，将清零并重新计时；「关门」就是最后需要执行的函数。

如果你还无法理解，看下面这张图就清晰多了，另外点击 这个页面 查看节流和防抖的可视化比较。其中 Regular 是不做任何处理的情况，throttle 是函数节流之后的结果（上一小节已介绍），debounce 是函数防抖之后的结果。

原理及实现

实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。

实现 1

// 实现 1
// fn 是需要防抖处理的函数
// wait 是时间间隔
function debounce(fn, wait = 50) {
    // 通过闭包缓存一个定时器 id
    let timer = null
    // 将 debounce 处理结果当作函数返回
    // 触发事件回调时执行这个返回函数
    return function(...args) {
      	// 如果已经设定过定时器就清空上一次的定时器
        if (timer) clearTimeout(timer)
      
      	// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, wait)
    }
}

// DEMO
// 执行 debounce 函数返回新函数
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000)
// 停止滑动 1 秒后执行函数 () => console.log('fn 防抖执行了')
document.addEventListener('scroll', betterFn)