前言本文是JavaScript基础系列的第八篇深入讲解JavaScript中三个极为重要的底层机制作用域变量可见范围、预解析代码执行前的准备工作以及数据类型存储值类型与引用类型的区别。同时附带执行上下文、原型链等进阶知识。掌握这些内容你将真正理解JS代码的运行原理。一、作用域1.1 作用域定义作用域变量在某个范围内起作用和效果。通常来说一段程序代码中所用到的名字变量名和函数名并不总是有效和可用的而限定这个名字的可用性的代码范围就是这个名字的作用域。1.2 作用域分类作用域类型说明全局作用域页面打开时创建关闭时销毁局部作用域函数作用域函数调用时创建执行完毕销毁块级作用域ES6let/const定义的变量所在的代码块1.3 全局作用域直接编写在script标签中或单独JS文件内的JS代码全局作用域在页面打开时创建在页面关闭时销毁全局作用域中有全局对象window代表浏览器窗口由浏览器创建全局作用域的特性声明方式是否作为window属性var声明的变量✅ 作为window属性保存function声明的函数✅ 作为window方法保存let/const声明的变量❌ 不作为window属性全局作用域中的变量都是全局变量在页面任意部分都可访问。1.4 局部作用域函数作用域调用函数时创建函数作用域函数执行完毕后销毁每次调用函数都会创建新的独立函数作用域函数作用域可访问全局作用域变量但全局作用域无法访问函数作用域变量变量查找规则先在自身作用域寻找 → 上一级作用域 → 全局作用域 → 报错小技巧在函数中访问全局变量可使用window对象。1.5 块级作用域ES6let/const定义的变量具有块级作用域块级作用域存在于if、for等代码块中var定义的变量没有块级作用域if (true) { var a 10; let b 20; } console.log(a); // 10var没有块级作用域 console.log(b); // ReferenceErrorlet有块级作用域二、变量分类2.1 全局变量特点说明定义位置在全局作用域下定义隐式声明函数内部不使用var声明的变量直接赋值也是全局变量生命周期浏览器关闭时才会销毁内存占用占用内存资源较多2.2 局部变量特点说明定义位置在函数作用域下定义形参函数形参相当于在函数作用域中声明变量生命周期程序执行完毕即销毁内存占用节约内存资源三、作用域链3.1 概念代码至少有一个作用域函数内部有局部作用域函数嵌套会在作用域中诞生新的作用域内部函数可访问外部函数变量的机制称为作用域链3.2 查找规则先在自身作用域寻找变量没有则向上一级作用域查找全局作用域依然没找到则报错链式查找决定了内部函数可访问的数据范围。3.3 作用域链示例var a 10; function foo(y) { var c 5; console.log(a c y); // 10 5 15 30 function bar(x) { var b 5; foo(x b); // x b 10 5 15 } bar(10); } foo(5);四、预解析4.1 执行过程JS解析器执行代码分为两步阶段说明预解析将var和function提升到当前作用域最前面代码执行按书写顺序从上往下执行4.2 预解析类型类型说明变量提升将var变量声明提升不提升赋值操作函数提升将函数声明整体提升可提前调用4.3 特殊情况情况说明函数声明在所有代码执行前被创建可提前调用函数表达式var fun function(){}变量声明提升但不能提前调用let/const定义的变量不会预解析形参相当于在函数作用域中声明变量4.4 变量声明提前示例// 原始代码 console.log(a); // undefined不会报错 fun(); // hello var a 1; function fun() { console.log(hello); } // 预解析后实际执行顺序 var a; // 变量提升 function fun() { // 函数提升 console.log(hello); } console.log(a); // undefined fun(); // hello a 1; // 赋值操作留在原地4.5 预解析面试题// 示例1变量与函数提升优先级 console.log(typeof a); // function var a; function a() {}解析函数提升优先级高于变量提升所以typeof a返回function。// 示例2if语句中的变量提升 if (!(b in window)) { var b 1; } console.log(b); // undefined解析var b被提升到全局作用域b in window为true所以条件不成立赋值语句不执行b为undefined。五、执行上下文5.1 全局执行上下文在执行全局代码前的流程将window确定为全局执行上下文对全局数据进行预处理var定义的全局变量 →undefined添加为window的属性function声明的全局函数 → 赋值fun添加为window的方法this→ 赋值window开始执行全局代码5.2 函数执行上下文在调用函数准备执行函数体之前的流程创建对应的函数执行上下文对象对局部数据进行预处理形参变量 → 赋值实参添加为执行上下文的属性arguments→ 赋值实参列表添加为执行上下文的属性var定义的局部变量 →undefined添加为执行上下文的属性function声明的函数 → 赋值fun添加为执行上下文的方法this→ 赋值调用函数的对象开始执行函数体代码六、执行上下文栈6.1 执行流程在全局代码执行前JS引擎创建一个栈来存储管理所有的执行上下文对象在全局执行上下文window确定后将其添加到栈中压栈在函数执行上下文创建后将其添加到栈中压栈在当前函数执行完后将栈顶的对象移除出栈当所有的代码执行完后栈中只剩下window6.2 图示理解执行上下文栈 ┌─────────────┐ │ 函数C上下文 │ ← 栈顶当前执行 ├─────────────┤ │ 函数B上下文 │ ├─────────────┤ │ 函数A上下文 │ ├─────────────┤ │ window │ ← 栈底始终存在 └─────────────┘七、数据类型与内存7.1 简单数据类型值类型特性说明存储方式值与值之间独立存在赋值行为变量赋值是值的复制相互影响修改一个变量不会影响另一个let a 10; let b a; // b复制了a的值 a 20; console.log(b); // 10互不影响7.2 复杂数据类型引用类型特性说明存储方式变量存储的是地址指针赋值行为变量赋值是地址的复制相互影响多个变量指向同一对象修改会相互影响let obj1 { name: 张三 }; let obj2 obj1; // obj2复制了obj1的地址 obj1.name 李四; console.log(obj2.name); // 李四相互影响7.3 堆和栈存储区域存放内容特点栈Stack简单数据类型值类型直接存放值速度快堆Heap复杂数据类型引用类型存放实际数据栈中存地址总结JS中的变量都是保存在栈内存里的基本数据类型的值直接在栈内存中存储值与值之间独立存在修改一个变量不会影响其他变量引用数据类型的值保存到堆内存中每创建一个新对象就在堆内存中开辟一个新空间变量保存的是对象的内存地址对象的引用如果两个变量保存的是同一个对象引用通过一个变量修改属性时另一个也会受到影响7.4 比较规则比较类型比较内容基本数据类型比较值是否相等引用数据类型比较对象的内存地址是否相同// 基本类型比较 console.log(10 10); // true值相等 // 引用类型比较 let obj1 { name: 张三 }; let obj2 { name: 张三 }; console.log(obj1 obj2); // false地址不同八、原型与原型链8.1 显式原型与隐式原型属性所属对象说明prototype构造函数显式原型对象__proto__实例对象隐式原型对象两者关系function Person(name) { this.name name; } let p1 new Person(张三); console.log(p1.__proto__ Person.prototype); // true8.2 原型链查找机制方法查找通过原型链实现实例对象 → 隐式原型对象(__proto__) → 构造函数原型(prototype) → ...当访问一个对象的属性或方法时JS引擎会先在对象自身查找如果找不到沿着__proto__向上查找一直找到Object.prototype如果还找不到返回undefined总结本文系统梳理了JavaScript中三个重要的底层机制主题核心要点作用域全局、局部函数、块级三级作用域变量查找遵循作用域链预解析var和function声明提升到作用域顶部let/const不会预解析执行上下文全局和函数两种上下文通过栈管理执行顺序数据类型存储基本类型存栈中值复制引用类型存堆中地址复制原型链实例的__proto__指向构造函数的prototype构成查找链条掌握这些内容你就真正理解了JavaScript代码的底层运行机制。这些知识是面试中的高频考点也是深入学习框架和工具的基础。欢迎持续关注本系列更多进阶内容