本文是极客时间上《浏览器工作原理与实践》课程的学习笔记。
变量提升
在 JavaScript 中变量的声明和赋值是两个分离的行为。所以，会出现变量提升和函数优先。
所谓的变量提升，是指 JavaScript 代码执行过程中，JavaScript 引擎将变量的声明和函数的声明提升到代码开头，或者说先遍历代码，定义变量和函数。再进行赋值。从行为上看就像是把声明部分的代码放到了代码的开头，而赋值部分还是在原来的位置。
这部分东西讲的并没有《你不知道的 JavaScript》一书中讲的好。
JavaScript 的执行机制：先编译，再执行。
可以参考我之前写的 JavaScript 作用域详解 一文。
关于同名函数的两点处理原则
- 如果是同名的函数，JavaScript 编译阶段会选择最后声明的那个。
- 如果是变量和函数同名，那么在编译阶段，变量的声明会被忽略。
调用栈
调用栈就是用来管理函数调用关系的一种数据结构。
什么情况下会进行编译并创建执行上下文？
- 当 JavaScript 执行全局代码的时候，会编译全局代码并创建全局执行上下文。并且在整个页面生存周期内，全局执行上下文只有一份。
- 当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束后，创建的函数执行上下文会被销毁。（闭包除外）
- 当调用 eval 函数的时候，eval 的代码会被编译，并创建执行上下文。
常见的调用栈场景
- 首先，拿到整个 JavaScript 代码，创建全局执行上下文。
- 等全局上下文准备好后，执行全局代码。
当执行到函数时，创建该函数的执行上下文和可执行代码。 - 如果是函数中调用函数，则会重复上面的操作。
- 执行最里面的函数上下文代码。由内而外这就是栈结构
什么是栈
前进后出，后进先出。先执行最里面的函数上下文的代码，再逐渐向外。
栈溢出
传说中的 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 是指向对象本身的。（注意必须是对象直接调用内部函数。） - 如果是对函数使用了
callapplybind函数来绑定 this，那么 this 会指向绑定的对象。 - 通过 new 关键字实例化构造函数，构造函数中的 this 指向实例对象。
复习下 new 关键字做的事情
- 创建一个空对象
- 通过构造函数的 call 方法将 this 指向空对象
- 执行构造函数
- 返回实例对象
var obj = {}
func.call(obj)
return obj
this 的设计缺陷及应对方案
嵌套函数中的 this 不会从外层函数中继承。
this 没有作用域的限制，所以嵌套函数不会从调用它的函数中继承 this，这样就会曹正很多奇怪的代码。
这个可以通过箭头函数或者 var that = this 来解决。
PS：其实箭头函数就可以理解为 var that = this。
普通函数中的 this 默认指向全局对象 window
这个问题可以设置 JavaScript 的严格模式来解决。在严格模式下，默认执行一个函数，它的执行上下文中的 this 值为 undefined。
