浏览器工作原理与实践学习笔记（二）浏览器中的JavaScript执行机制

一、执行上下文

JavaScript执行一段代码时的运行环境

1.变量提升

         JavaScript代码执行过程中，JavaScript引擎把变量把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值undefined。

2.同名变量

         当JavaScript代码中出现同名的变量或者函数时，后定义的变量（如果有赋值的话)会覆盖之前定义的变量。

3.产生执行上下文的条件

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

4.执行栈

JavaScript通常会将执行上下文压入执行栈中，以此来管理执行上下文。

（1）查看执行栈信息
通常在浏览器开发这工具中，可以在代码中打上断点，当执行到该代码时，执行流程会被暂停，然后可以通过浏览器中的工具看到当前调用栈的情况。
（2）栈溢出
执行栈是有大小的，当栈的执行上下文超过一定数目，JavaScript引擎就会报错（通常发生在函数的递归调用中）

二、块级作用域

由于 JavaScript 存在变量提升这种特性，从而导致了很多与直觉不符的代码，这也是 JavaScript 的一个重要设计缺陷。在ES6之前，ES的作用域只有两种：全局作用域和函数作用域。而在ES6中已经通过引入块级作用域并配合 let、const 关键字，来避开了这种设计缺陷。

1.变量提升带来的问题

（1）变量容易在不易察觉的情况下被覆盖掉
（2）本应销毁的变量没有被销毁

2.JavaScript如何实现块级作用域

（1）在函数的执行过程中，函数内部通过var声明的变量，会在编译阶段全部被存放到执行上下文的变量环境中
（2）通过let声明的变量，在编译阶段会被存放到执行上下文的词法环境中。
（3）块级作用域内部的块级作用域中用let声明的变量，不会在函数开始执行的时候就加入到词法环境中，而是会在执行到当前块级作用域时，才加入到词法环境中，并以此形成了一个小型栈结构。

三、作用域链

function bar() {
    console.log(myName)
}
function foo() {
    var myName = "name1"
    bar()
}
var myName = "name2"
foo()

         首先来判断一下以上代码的输出结果，按照一般的思路，先查找栈顶是否存在 myName 变量，但是这里没有，所以接着往下查找 foo 函数中的变量。在 foo 函数中查找到了 myName 变量，这时候就使用 foo 函数中的 myName。
如果按照这个思路来执行的话，最后输出的结果应该是name1，但是最后实际的结果其实是name2。至于为什么会产生这样的结果，主要是因为作用域链的存在。

1.outer

         在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为outer。

2.变量查找

         当一段代码使用了一个变量是，JavaScript引擎首先会在“当前的执行上下文”中查找该变量，如果当前的变量环境中没有查找到该变量，那么JavaScript引擎会继续在outer所指向的执行上下文中查找。我们将这个查找的链条称为作用域链。

3.词法作用域

         词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。
ps.词法作用域是代码编译阶段就决定好的，和函数是怎么调用的没有关系。

四、闭包

1.定义

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

2.闭包是怎么回收的

         通常，如果引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭。否则，如果引用闭包的函数是个局部变量，等函数销毁后，在下次 JavaScript 引擎执行垃圾回收时，判断闭包这块内容如果已经不再被使用了，那么 JavaScript 引擎的垃圾回收器就会回收这块内存。
ps.如果该闭包会一直使用，那么它可以作为全局变量而存在；但如果使用频率不高，而且占用内存又比较大的话，那就尽量让它成为一个局部变量。

五、this

this是和执行上下文绑定的

1.this分类

因为this是和全局上下文绑定的，所以this同样分为：全局this、函数this和eval中的this

2.全局上下文中的this

在浏览器环境中，全局this指向的是window对象

3.函数执行上下中的this

（1）通过call,apply,bind方法指定
（2）通过对象调用的方法的this指向该对象
（3）在全局环境中调用一个函数，函数内部的 this 指向的是全局变量 window

4.this设计的缺陷

（1）嵌套函数中的 this 不会从外层函数中继承

var myObj = {
  name : "极客时间", 
  showThis: function(){
    console.log(this)
    function bar(){console.log(this)}
    bar()
  }
}
myObj.showThis()

以上代码中bar()内的this指向的是全局变量window，可以通过一个小技巧来解决

var myObj = {
  name : "极客时间", 
  showThis: function(){
    console.log(this)
    let self = this
    function bar(){console.log(self)}
    bar()
  }
}
myObj.showThis()

或者使用箭头函数，ES6中箭头函数并不会创建自身的执行上下文，所以箭头函数中的this指向取决于它的外部函数。

var myObj = {
  name : "极客时间", 
  showThis: function(){
    console.log(this)
    let bar = ()=>{
        console.log(this)            
    }
    bar()
  }
}
myObj.showThis()

(2)普通函数中的this默认指向全局变量window
ps.在严格模式下，默认执行一个函数，其函数的执行上下文中的 this 值是 undefined