新手必看：一篇文章带你搞懂JavaScript作用域

作为前端的入门学习者，作用域 是最基础的核心知识点，是变量查找、声明规范的基础，很多入门学者的困惑：[找不到变量] 、[赋值报错] 、[let/var/const的区别]的问题，都是因为对作用域还不了解，这些根本都问题都是在作用域上。

今天我们就通过结合V8引擎执行原理，用通俗易懂的话把作用域给大家讲的明明白白，即使是初学者也能吃的轻松透彻！

一.V8引擎是如何执行JS代码的?

不管是浏览器 还是node.js ，他们所使用的都是V8引擎 ，它会读取代码但不会第一时间执行，而是要先梳理，主要为三步[分词、解析、执行]。
1.分词 ：将代码拆分为一个一个的词法单元（例如 let、a、=、10）
2.解析/语法分析 ：将词法单元组成一个语法树AST （抽象语法树）
3.执行：根据AST生成代码并执行

而作用域 ，是V8引擎执行代码、查找变量 时所遵循的规则，变量能被哪里访问 、在哪里能生效。

二.JS中三大作用域

JS中有三种作用域:

1.全局作用域 ：

最外层的作用域，不在任何函数 、大括号 {} 中的变量/函数 ，都属于全局作用域。
特点：

全局变量可以在任何地方被访问、修改
页面加载时创建，关闭时销毁

js 复制代码

var a = 10;
function fool(){
   //函数内可以直接访问全局变量
   console.log(a);
}
fool()//输出:10
console.log(a)//输出:10

1.函数作用域 ：
函数内部 创建的作用域，只能函数内部访问，函数外部不能直接访问。
特点：

函数调用时创建，执行完毕后销毁
变量私有，外部访问报错

js 复制代码

function fool(){
   var a = 2;
   console.log(a);//内部正常访问输出:2
}
fool();
console.log(a);//外部无法访问  报错

3.块级作用域 ：
大括号 {} 内部（if/for/while//单独{}）配合let/const 使用形成的作用域。
特点：

只要是在 {} 内部+ let/const 声明，就形成块级作用域
只在当前大括号内生效，外部无法访问

js 复制代码

if(true){
  let a = 1;
  var b = 2;
  const c = 3;
}
console.log(a);//无法访问 报错
console.log(b);//输出:2
console.log(c);//无法访问 报错

三.核心规则：变量查找机制

在 v8 的执行过程中，查找一个变量时，会先在当前作用域 中查找，如果找不到，就会去外层作用域 查找，直到找到全局作用域，还是找不到，就会报错。

看个例子就秒懂

js 复制代码

var a = 1;
function outer(){
  //函数作用域外层
  var b = 2;
  function inter(){
    //函数作用域内层
    var c = 3;
    console.log(c);//3（当前找到）
    console.log(b);//2（外层找到）
    console.log(a);//1（全局找到）
    console.log(d);//报错（找不到）
  }
  inter();
}
outer();

四.新手必须掌握------let/const与作用域的重点记忆

1 .let + {} 会形成块级作用域

var没有块级作用域，let遇到{}就会形成块级作用域

js 复制代码

{
  var a = 1;
}
console.log(a);//1（不报错）
{
  let b = 2;
}
console.log(b);//报错

2 .let 不会带来声明提升

js 复制代码

console.log(a);//声明提升不报错
var a = 1;

console.log(b);//无声明提升 报错
let b = 2;

3 . const 声明的是常量，不能重新赋值

js 复制代码

const a = 1;
a = 5;//报错

五.暂时性死区

从代码块开始，到变量声明赋值之前，这个区域就是暂时性死区，在这个区域内访问变量会直接报错！

六.新手总结------一图掌握

作用域类型	生成条件	访问规则	配合声明
全局作用域	代码最外层	全局可访问	var/let/const
函数作用域	函数内部	仅函数内可访问	var/let/const
块级作用域	`{}` + let/const	仅大括号内可访问	let/const

总结

JS 由 V8 引擎执行，先分词→解析 AST→再执行，作用域是变量查找规则
三大作用域：全局、函数、块级（let/const + {}）
变量查找：由内向外逐级查找，全局找不到则报错
let 生成块级作用域、无声明提升；const 声明常量不可重新赋值