《浏览器工作原理与实践》学习笔记（二）

本文是极客时间上《浏览器工作原理与实践》课程的学习笔记。

变量提升

在 JavaScript 中变量的声明和赋值是两个分离的行为。所以，会出现变量提升和函数优先。

所谓的变量提升，是指 JavaScript 代码执行过程中，JavaScript 引擎将变量的声明和函数的声明提升到代码开头，或者说先遍历代码，定义变量和函数。再进行赋值。从行为上看就像是把声明部分的代码放到了代码的开头，而赋值部分还是在原来的位置。

这部分东西讲的并没有《你不知道的 JavaScript》一书中讲的好。

JavaScript 的执行机制：先编译，再执行。

可以参考我之前写的 JavaScript 作用域详解 一文。

关于同名函数的两点处理原则

1. 如果是同名的函数，JavaScript 编译阶段会选择最后声明的那个。
2. 如果是变量和函数同名，那么在编译阶段，变量的声明会被忽略。

调用栈

调用栈就是用来管理函数调用关系的一种数据结构。

什么情况下会进行编译并创建执行上下文？

1. 当 JavaScript 执行全局代码的时候，会编译全局代码并创建全局执行上下文。并且在整个页面生存周期内，全局执行上下文只有一份。
2. 当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束后，创建的函数执行上下文会被销毁。（闭包除外）
3. 当调用 eval 函数的时候，eval 的代码会被编译，并创建执行上下文。

常见的调用栈场景

1. 首先，拿到整个 JavaScript 代码，创建全局执行上下文。
2. 等全局上下文准备好后，执行全局代码。
   当执行到函数时，创建该函数的执行上下文和可执行代码。
3. 如果是函数中调用函数，则会重复上面的操作。
4. 执行最里面的函数上下文代码。由内而外_{这就是栈结构}

什么是栈

前进后出，后进先出。先执行最里面的函数上下文的代码，再逐渐向外。

栈溢出

传说中的 Stack Overflow~

调用栈是有大小的，当入栈的执行上下文超过一定数量，JavaScript 引擎就会报错，我们把这种错误叫做栈溢出。

调用栈溢出指标。

• 最大栈容量
• 最大调用深度

块级作用域

这个在我的博客 JavaScript 作用域详解 里面也已经提到过了。

作用域

作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。或者说作用域就是变量与函数的可访问范围。

三种作用域

在 JavaScript 中有三种作用域。

• 全局作用域 —— 全局可以访问的对象。
• 函数作用域 —— 只有当前函数和子函数作用域可以访问的对象。或者说是函数内部定义的变量或函数，函数执行结束后，函数作用域内的内容会被销毁（一般情况下）。
• 块作用域 —— ES6 之后才真正意义上有了块作用域。

ES6 如何解决变量提升带来的缺陷

答案是 var 定义的变量会存在变量环境中，JavaScript 先定义变量，再赋值。而 let 和 const 定义的变量会存在词法环境中，相当于为它们单独开了一个空间存储。

在获取变量的时候先获取词法环境下的变量，再获取变量环境中的变量。

var、let 和 const 的变量提升是怎么样的？

• var 的创建和初始化会被提升，赋值不会被提升。
• let 的创建会被提升，初始化和赋值不会被提升。
• const 的创建会被提升，初始化和赋值不会被提升。

作用域链和闭包

通过作用域查找变量的链条称为作用域链，它是由词法作用域来确定的，而词法作用域反映了代码的结构。

作用域链和调用栈是有所不同的。在作用域链最里面找一个变量，是从最里面往外找，这个外面是指创建作用时的外部作用域，而非调用函数时的外部作用域。

词法作用域

词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域又称为静态作用域，通过它就能预测代码在执行过程中如何查找标识符。

词法作用域是代码阶段决定好的，和函数时怎么调用的没有关系。

块级作用域的变量查找

这个和一般的变量查找一样，都是更具词法作用域来决定的！

闭包

在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，及时外部函数已经执行结束了，但是内部函数应用外部函数的变量依旧保存在内存中，我们就把这些变量的集合称为闭包。

其实就是作用域1中的作用域2被暴露出去，并且作用域2获取了作用域1的变量。这时候作用域1可能已经结束了，但是它的变量还被作用域持有并未销毁。

tips

可以通过 chrome 的“开发者工具”来看到调用栈、作用域等情况。而在作用域中可以看到闭包（Closure）内容。

闭包回收

主要一个原则：如果该闭包会一直使用，那么他可以作为全局变量而存在；但如果使用频率不高，而且占用内存有比较大的话，就尽量让它成为局部变量。

PS：我之前看的方法是，当闭包不用的时候可以将闭包的引用变为 null：foo = null;

this

关于 this 我之前也写过一篇 聊聊 JavaScript 中的 this 一文讲的也很详细。

区分作用域链和 this 是两套不同的系统。

执行上下文中包含了变量环境、词法环境、外部环境和 this 环境。

this 适合执行上下文绑定的，每个执行上下文中都有一个 this。

全局执行上下文中的 this

全局执行上下文中的 this 是指向 window 对象的。

函数执行上下文中的 this

• 如果是在全局作用域下的函数直接打印 this 会指向 window
• 如果是对象直接调用对象内的函数，如 obj.hello() 那么 this 指向当前函数。或者说使用对象来调用其内部的一个方法，该方法的 this 是指向对象本身的。（注意必须是对象直接调用内部函数。）
• 如果是对函数使用了 call apply bind 函数来绑定 this，那么 this 会指向绑定的对象。
• 通过 new 关键字实例化构造函数，构造函数中的 this 指向实例对象。

复习下 new 关键字做的事情

1. 创建一个空对象
2. 通过构造函数的 call 方法将 this 指向空对象
3. 执行构造函数
4. 返回实例对象

var obj = {}
func.call(obj)
return obj

this 的设计缺陷及应对方案

嵌套函数中的 this 不会从外层函数中继承。

this 没有作用域的限制，所以嵌套函数不会从调用它的函数中继承 this，这样就会曹正很多奇怪的代码。

这个可以通过箭头函数或者 var that = this 来解决。

PS：其实箭头函数就可以理解为 var that = this。

普通函数中的 this 默认指向全局对象 window

这个问题可以设置 JavaScript 的严格模式来解决。在严格模式下，默认执行一个函数，它的执行上下文中的 this 值为 undefined。