【JavaScript】JS中的作用域与预解析

---

JavaScript的作用域 ：

一、概念

• JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果
• 可以提高程序的可靠性，减少命名冲突

二、分类

1. 全局作用域

• 在整个script标签中，或者是一个单独的js文件

• 全局变量：

  • 在全局作用域下定义的变量就是全局变量，全局变量可以在任意地方生效
  • 【注意】如果变量名没有声明，直接赋值number = 18，那么该变量也是全局变量
  • 全局变量只有在浏览器关闭的时候才会销毁，比较占内存资源

2. 局部作用域

• 在函数内部就是局部作用域，局部作用域只在函数内部起效果和作用
• 局部变量
  • 在局部作用域下定义的变量，或者说定义在函数内部的变量就是局部变量，局部变量只在函数内部生效
  • 函数的形参也是局部变量
  • 局部变量在我们程序执行完毕就会销毁， 比较节约内存资源

3. 其它

• 同一作用域下，相同的变量名会起冲突
• 不同作用域下，不会起冲突，且遵循就近原则

---

三、块级作用域

• javascript在 ES6 才新增 块级作用域{}

---

四、作用域链

• 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链，遵循就近原则

  即，从本级开始，往上一级逐级查找，有则取值，无则继续查找，直到全局作用域

  亦类似于CSS的层叠性

  var number = 10;
  function fun1(){
      var number = 20;
      function fun2(){
          console.log(number);
      }
  }
  

  ---

  ---

  ---

JavaScript的预解析

一、前因

【提问】：js引擎运行分几步？

（1）第一步：预解析

• 首先，js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面

• 预解析的分类

  预解析又分为变量预解析（变量提升）和函数预解析（函数提升）

  • 变量预解析（变量提升）

    把所有的变量声明提升到当前作用域的最前面，但不提升赋值操作

  • 函数预解析（函数提升）

    把所有的函数声明提升到当前作用域的最前面，但不调用函数

（2）第二步：代码执行

• 然后，再按照代码书写的顺序从上往下执行

---

二、后果

1. 变量提升

console.log(num);	//	undefined
var num = 10;

//等效于下面代码
//变量声明提升
var num;
console.log(num);	//	undefined
num = 10;

2. 函数提升

func();
function func(){
    console.log("123");		//	123
}

//等效于下面代码
//函数声明提升

function func(){
    console.log("123");		//	123
}
func();

---