作用域与作用域链，执行上下文，变量提升与函数提升 笔记

自己记录的笔记，如有错误，请大家批评指正，谢谢大家。

1.作用域与作用域链

作用域指的是一个变量的作用范围。在JS中有两种作用域：

1. 全局作用域
   • 直接编写在script标签中的JS代码都在全局作用域。
   • 全局作用域在页面打开时创建，在页面关闭时销毁。
   • 在全局作用域中有一个全局对象window他代表浏览器的窗口，由浏览器创建可以直接使用。
   • 在全局作用域中，创建的变量都会作用window对象的属性保存，创建的函数都会作为window对象的方法保存。
2. 函数作用域
   • 调用函数是创建函数作用域，函数执行完毕之后，函数作用域销毁
   • 每调用一次囧，就会创建一个新的函数作用域，他们之间是相互独立的
   • 在函数作用域中可以访问到全局作用域的变量 ，在全局作用域无法访问函数作用域的变量。
   • 在函数作用域中操作一个变量时，它会先在自身作用域中寻找，如果有就直接用；如果没有就向上一级作用域中寻找，则会报错ReferenceError。
   • 在函数中要访问全局变量可以使用window对象。
     一层一层向外寻找，就形成了作用域链。
3. 作用域链
   1. 多个上下级关系的作用域形成的链，他的方向是从下向上的（从内到外）
   2. 查找变量时就是沿着作用域链来查找的

查找一个变量的查找规则
1. 在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
2. 在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
3. 再次执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的异常

2.执行上下文，变量提升与函数提升

1.JS的运行阶段

JavaScript的运行阶段分为预编译阶段和执行阶段，变量声明提升和函数声明提升，就是在预编译阶段完成的。

2.执行上下文

1. 代码分类（位置）
   全局代码
   函数（局部）代码
2. 全局执行上下文
   在预编译阶段，也就是在执行代码之前将window确定为全局执行上下文，会对数据进行预处理：
   1. var定义的全局变量 ===>值为undefined，添加为window的属性
   2. function声明的全局函数==>赋值（fun），添加为window的方法
   3. this==>赋值（window）
      然后开始执行全局代码。
3. 函数执行上下文（执行的时候才会出现）
   1. 在调用函数，准备执行函数体之前，创建对应函数执行上下文对象
   2. 对局部数据进行预处理
   3. 形参变量==>赋值（实参）==>添加为执行上下文的属性
   4. arguments==>赋值（实参列表）添加为执行上下文的属性
   5. var定义的局部变量==>undefined,添加为执行上下文的属性，也就是变量提升。
   6. function声明的函数==>赋值(fun),添加为执行上下文的方法，也就是函数提升。
   7. this==>赋值（调用函数的对象)
4. 开始执行函数体代码
   在函数执行上下文中，同样存在变量提升与函数提升。同时函数声明提升的优先级要高于变量声明提升。

3.作用域与执行上下文之间的区别与联系

区别一：
1. 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了 而不是在函数调用时。
2. 全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建
3. 数执行上下文是在调用函数时，函数体代码执行之前创建
区别二：
1. 作用域是静态的，只要函数定义好了就一直存在，且不会再变化
2. 执行上下文是动态的，调用函数时创建，函数调用结束时就会自动释放
二者之间的联系：
1. 执行上下文()对象是从属于所在作用域
2. 全局上下文环境==>全局作用域
3. 函数上下文环境==>对应的函数使用域

4.变量提升与函数提升

变量声明提前

• 使用var关键字声明的变量，会在所有的代码执行之前 被声明但是不会赋值
• 但是如果声明变量时不使用var关键字，则变量不会被声明提前

console.log(name);  //undefined
var name = 'helen';

console.log(name);  //helen

分析：在预编译阶段，变量name已经被声明var name；在执行代码之前动态的确定全局执行上下文，将name的值赋值为undefined，name=undefined，将name的属性添加到window对象中。按照顺序执行代码，输出为undefined。

函数的声明提前

• 使用函数声明形式创建的函数function 函数(){}

say(); //输出：'helen'

function say(){
  console.log('helen');
}

  他会在所有的代码执行前就会被创建，所以我们可以 在函数声明前来调用函数

• 使用函数表达式创建函数，不会被声明提前
  var fn = function(){}

say(); //报错：say is not a function

var say = function(){
  console.log('helen');
}

分析：同样地先执行函数，后创建函数，结果却是不一样。原因在于，通过函数声明的方式，该函数声明（包括定义）会被提升至作用域的顶部，而表达式的创建方式则只提升了变量say至作用域的顶部，此时的say其值为undefined，调用say()自然报错“say不是一个方法”。

完整的例子分析：

完整的解析：

总结：函数声明提升，会将函数的声明和定义全都提升至作用域顶部。
变量声明提升，只提升声明部分（未赋值状态），赋值部分保持原位置不动。

参考文献

• 尚硅谷b站JS高级课程 可自行搜索
• 深入解析变量声明提升和函数声明提升 微信公众号：web前端开发
• JavaScript高级程序设计（第4版）