JS 底层:乖宝宝引擎和乖宝宝声明

JavaScript 底层:引擎、作用域与变量那点事儿

你可以把 JavaScript 运行的全过程,想象成引擎在 搭积木 ,按规矩进行 "观察→拆积木→搭积木→正式运行"。


一、JS 引擎:浏览器和 Node 背后的"超级大脑"

JavaScript 本身不会自己跑,它得靠 引擎 才能动起来。

主流 JS 引擎:

  • 浏览器 :V8 引擎
  • Node.js :V8 引擎

可以理解成: 浏览器是书房,Node.js 是工作室,但它们是同一个超级大脑在工作------V8。


二、JS 代码是怎么跑起来的?

很多人以为代码一写就跑,其实 V8 宝宝超有耐心,它会按四步慢慢来:

  1. 先读一遍 : V8 拿到代码,不着急跑,先整体看一眼。
  2. 分词(拆积木) : 把一整行代码拆成一小块一小块: var a = 10 → 拆成 var、a、=、10。
  3. 语法分析(搭积木) : 把积木拼成一棵树,叫 AST 抽象语法树 。 简单说:给代码排排队、分分类、理逻辑。
  4. 正式执行 : 树搭好了,开始一条一条运行。

一句话总结: V8 不莽撞,先梳理、再分析、最后才执行。


三、作用域:变量的"活动地盘"

作用域就是变量能在哪儿活动、在哪儿说话算数的地盘。

一共有 3 种:

  1. 全局作用域 : 最大最外层,谁都能访问,像"小区广场"。
能访问 复制代码
var a = 10;

function foo(){
    console.log(a);
}

foo(); // 10
console.log(a); // 10
  1. 函数作用域 : 函数里面的小空间,外面进不来,像"家里客厅"。
能访问 复制代码
function foo(){ //函数作用域
    var a = 10 ;
    console.log(a); // 10
}
不能访问 复制代码
function foo(){ //函数作用域
    var a = 10 ;
}

console.log(a); // 报错 a is not defined
  1. 块级作用域 : 大括号 {} 包起来的地方,像"卧室"。
能访问 复制代码
{
    let a = 10;
    console.log(a); // 10
}
不能访问 复制代码
{
    let a = 10;
}

console.log(a); // 报错 a is not defined

特点:写代码时就定好了,运行时改不了。


四、v8怎么从作用域找变量?像找妈妈

V8 宝宝找变量特别乖,一层一层往上问:

  1. 先在自己房间找
  2. 找不到去客厅找
  3. 再找不到去小区广场找
  4. 还找不到 → 直接报错:变量不存在!
不能访问 复制代码
// 全局作用区: 小区广场找不到
function foo(){ // 函数作用区: 客厅内找不到
    if(true){
        console.log(a); // 块级作用区: 房间内找不到
    }
}
// 最终 报错:a is not defined

这就叫 作用域链。


五、let 和 const:现代 JS 的"乖宝宝声明"

var

ini 复制代码
// var声明在全局作用域、提升、重复声明
console.log(a);
{
    var a = 10;
    var a =20;
}
// undefined

这个 var 太调皮,到处乱窜。 ES6 来了两个乖宝宝:let、const。

let

  1. 碰到 {} 就形成 块级作用域,关在里面不乱跑。
ini 复制代码
{
    let a = 10;
}
console.log(a); // 报错:a is not defined
  1. 不提升,必须先声明再使用。
ini 复制代码
console.log(a);
let a = 10;
// 报错:Cannot access 'a' before initialization
  1. 不能重复声明,避免搞混。
ini 复制代码
{
    let a = 10;
    let a =20;
    // 编辑器直接报错
}

const

  1. 常量,一旦赋值不能改。
ini 复制代码
const PI = 3.1415926
PI = 3
console.log(PI);// Assignment to constant variable.
  1. 必须声明时就赋值。
arduino 复制代码
const PI 
PI = 3.1415926
console.log(PI);// 编辑器直接报错

总而言之

JS 并不是简单的脚本语言,它背后有严谨的编译与执行规则;V8 引擎像一位细心的管理员,先梳理再运行;作用域像变量的"活动区域",让代码更安全有序;let 和 const 则让变量声明更规范、更可靠。

相关推荐
paopaokaka_luck9 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
鶴哥只手遮天13 小时前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
米米商聊15 小时前
图标能点,按钮就可用了吗?键盘、名称与收藏状态
前端·javascript
技术小甜甜17 小时前
【Cursor】Skill 被标黄色警告,怎么改成合格的 SKILL.md
开发语言·javascript·ai编程·cursor·1024程序员节·ai agent·skills
qetfw18 小时前
Bash 函数与流程控制:read、if、for、case 验证
linux·前端·javascript·bash
鬼手点金18 小时前
从 API 消息到模型 Token:Chat Template
java·前端·javascript·数据库·人工智能·深度学习·1024程序员节
Mr.Pascal20 小时前
Javascript之什么是作用域?
javascript·1024程序员节
microrain21 小时前
设备报文怎么变,SagooIoT 只约定三个函数名
javascript·物联网·golang·sagooiot
Bug收容所21 小时前
Vue+JS Day3
前端·javascript·vue.js·前端框架·1024程序员节
小羊没烦恼!1 天前
.NET无侵入自动化探针原理和主流实现
运维·开发语言·javascript·python·自动化·.net·1024程序员节