[JavaScript知识库]JavaScript作用域与执行上下文

1 JS代码的执行流程

1. 创建阶段：在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。
2. 执行阶段：创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

2 执行上下文

执行上下文是 JavaScript 执行一段代码时的运行环境
执行上下文中包含了变量环境、词法环境、外部环境(作用域链)、this

创建阶段

1. 创建变量对象：首先初始化函数的参数arguments，提升函数声明和变量声明
2. 建立作用域链：是一个指向当前环境与上层环境的一系列变量对象的指针列表（它只引用但不实际包含变量对象）
3. 确定this的指向

类型
全局执行上下文：执行全局代码的时候，会创建执行上下文，存在整个页面的生存周期中
函数执行上下文：调用一个函数的时候，会创建执行上下文，在函数执行结束的时候会被销毁
eval 函数执行上下文：运行在 eval 函数中的代码也获得了自己的执行上下文

变量提升

1. JS在执行代码时候，JS引擎把变量和函数的声明提升带代码开头的行为，变量默认值为undefined
2. 一段代码如果定义了两个相同名字的函数，那么最终生效的是最后一个函数。
3. 函数和变量同名时，函数声明优先级比较高，因此变量声明会被函数声明所覆盖,但是可以重新赋值

showName()          
console.log(myname)
var myname = 'tidy'
function showName() {
    console.log('111');
}
function showName() {
    console.log('222');
}
//打印 111；undefined
//1 声明:myname=undefined showName(){ console.log('111');} showName(){ console.log('222');}
//2 执行:调用showName()，打印出222，console.log(myname)打印出undefined,myname赋值为'tidy'

//函数和变量同名时
console.log(a);
function a(){ alert('我是函数') }
var a = '我是变量';
console.log(a);
//function a(){ alert('我是函数') } var a;
//console.log(a); //function a(){ alert('我是函数') }  
//a = '我是变量' console.log(a);//我是变量

3 执行上下文栈

1. 每调用一个函数，JavaScript 引擎会为其创建执行上下文，并把该执行上下文压入调用栈
2. 当前函数执行完毕后，JavaScript 引擎会将该函数的执行上下文弹出栈,遵循先进后出的原则。

var a = 2
function add(b,c){
  return b+c
}
function addAll(b,c){
    var d = 10
    result = add(b,c)
    return  a+result+d
}
console.log(addAll(3,6));//21
//1 创建全局执行上下文,变量环境有a,add,addAll，并压入栈底
//2 调用addAll函数时,创建addAll执行上下文，变量环境有d,result，并压入栈底
//3 执行addAll函数过程中，调用add函数,创建add执行上下文,并压入栈底
//4 add函数完成后出栈，返回9;
//5 addAll函数完成后出栈,返回21

4 作用域

作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。
类型

1. 全局作用域中的对象在代码中的任何地方都能访问，其生命周期伴随着页面的生命周期。
2. 函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。
3. 块级作用域可通过新增命令let和const声明，是在一个代码块（由一对花括号包裹）内部,作用域块执行结束之后，其内部定义的变量就会会被销毁。

//作用域
//函数作用域,定义的变量或者函数只能在函数内部被访问
var cc = 2
function fun1(){
    var dd = 3;
    console.log(cc); //2
    console.log(dd); //3
}
fun1()
console.log(cc); //2
console.log(dd); //作用域.html:109 Uncaught ReferenceError: dd is not defined

//块级作用域
//if块
if(1){}
//while块
while(1){}
//函数块
function foo(){}
//for循环块
for(let i = 0; i<100; i++){}
...

块级作用域
ES6才出现，为了解决变量提升所带来的问题，比如变量容易在没有察觉下被覆盖
代码怎么兼容定义变量的let与var？执行上下文中包含了变量环境、词法环境、外部环境(作用域链)、this；var声明的则放在变量环境，let声明的则在词法环境

function testVar(){
    var x = 1;
    if(true){
        var x = 2;
        console.log(x);      
    }
    console.log(x);//尽管if里面是var x,外面的x还是被覆盖,因为变量提升，把if里面x先声明了
}
testVar() //2 2
//块级作用域，声明变量不会提升到代码块顶部
function testLet(){
    let x = 1;
    if(true){
        let x = 2;
        console.log(x);      
    }
    console.log(x);
}
testLet() //2 1

5 作用域链

词法作用域
作用域是由代码中函数声明的位置决定的，所以是静态作用域，它是代码编译阶段就决定的，和函数调用的位置没有关系
什么是作用域链？
把通过作用域查找变量的链条叫做作用域链，作用域链是通过词法作用域来确定的；
每个执行上下文中，都包含了外部引用，用来指向外部的执行上下文，外部引用与词法作用域相关
查找过程： 在当前执行上下文中查找，如果没有则在外部引用查找；如果没有再往上一层作用域中查找，直到找到全局作用域。

//作用域链
function Bar(){
   console.log(scope);
}
function testfoo(){
    var scope = "222"
    Bar()
}
var scope = "111"
testfoo() //111
//1 创建全局执行上下文,变量环境有scope = "111"
//2 调用testfoo函数时,创建testfoo执行上下文，变量环境有scope = "222"
//3 执行testfoo函数过程中，调用Bar函数,创建Bar执行上下文,它的外部变量指向全局执行上下文，而非上层的testfoo,因为外部变量由函数声明的位置；所以Bar在外部变量指向的全局执行上下文查找，得到scope = "111"
//4 testBar函数完成后出栈，testfoo函数完成后出栈

6 闭包

当通过一个外部函数返回一个内部函数后，即使外部函数已经结束，但是内部函数还是可以访问其外部函数的变量，这些变量的集合称为闭包。
通俗说就是函数a的内部函数被函数a外部的一个变量引用时，就创建了一个闭包

function checkscope(){
    var scope1 = "222"
    function f(){
        console.log(scope1);
    }
    return f;
}
var scope2 = checkscope()
scope2() //222
//从执行上下文的角度：
//这个时候结果是可以访问checkscope函数的内部函数scope1
//因为checkscope上下文出栈后，内部函数f还可以访问checkscope的变量，这个时候会产生一个闭包来放置scope1，值是存在内存中的
//调用f()时候，直接打印闭包的值

闭包的特点

1. 可以读取函数内部的变量。
2. 可以使变量的值长期保存在内存中，生命周期比较长。因此不能滥用闭包，否则会造成网页的性能问题

参考
1 https://time.geekbang.org/column/article/119046
2 https://blog.csdn.net/howgod/article/details/88565793
3 https://blog.csdn.net/howgod/article/details/88632924