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

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

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

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

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

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

二.JS中三大作用域

JS中有三种作用域:

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

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

js 体验AI代码助手 代码解读复制代码var a = 10;
function fool(){
   //函数内可以直接访问全局变量
   console.log(a);
}
fool()//输出:10
console.log(a)//输出:10

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

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

js 体验AI代码助手 代码解读复制代码function fool(){
   var a = 2;
   console.log(a);//内部正常访问输出:2
}
fool();
console.log(a);//外部无法访问  报错

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

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

js 体验AI代码助手 代码解读复制代码if(true){
  let a = 1;
  var b = 2;
  const c = 3;
}
console.log(a);//无法访问 报错
console.log(b);//输出:2
console.log(c);//无法访问 报错

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

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

看个例子就秒懂

js 体验AI代码助手 代码解读复制代码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 体验AI代码助手 代码解读复制代码{
  var a = 1;
}
console.log(a);//1（不报错）
{
  let b = 2;
}
console.log(b);//报错

2.let 不会带来声明提升

js 体验AI代码助手 代码解读复制代码console.log(a);//声明提升不报错
var a = 1;

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

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

js 体验AI代码助手 代码解读复制代码const a = 1;
a = 5;//报错

五.暂时性死区

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

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

总结

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