📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 原始值和引用值
  • 按值和按引用
  • 复制变量
  • 传递参数
  • 从内存角度理解
  • 栈内存和堆内存
  • 从内存角度看变量复制
  • 参考
在GitHub上编辑
  1. 前端技术
  2. 深入理解JavaScript系列

JavaScript原始类型和引用类型

原始值和引用值

JavaScript的变量可以包含两种类型的值:原始类型和引用类型。

原始类型有

  • String

  • Boolean

  • Number

  • Null

  • Number

  • BigInt

  • Symbol

引用类型有

  • Array

  • Function

  • Date

  • RegExp

  • Set

  • Map

  • WeakSet

  • WeakMap

  • .......

引用类型的种类很多,可以这样认为,如果不是以上7种原始类型之一,那么它就必定是引用类型。

包含原始类型的值称为原始值,包含引用类型的值称为引用值。

按值和按引用

对于原始值变量是按值保存,对于引用值变量是按引用保存。

按值保存就是变量保存的就是值本身,而按引用保存就是变量保存的并不是值,而是一个指向存放真实值的地址。

对于保存原始值的变量来说,访问变量就是访问值,而对于引用类型的变量来说,访问变量会先获取到存放真实数据的地址,然后通过这个地址访问到真实的数据。

复制变量

除了存储方式不同,原始值和引用值在通过变量复制时也有所不同。

在复制原始值时,新变量的值是旧变量的值的副本,两者互相独立,改变其中一个不会影响另一个。

let num1 = 5
let num2 = a;
console.log(num1,num2)
// 5 5
num1 = 1;
console.log(num1,num2)
1,5

但是引用值则不同,在复制引用值时,因为引用类型的变量的值是指向真实数据的地址,因此复制的也是这段地址,也就是说新变量和旧变量保存的都是指向同一个对象的地址。

let a = [1,2,3]
// b = a 其实就是复制了a保存的地址,使a和b都指向同一块地址的数据
let b = a ;
console.log(a,b)
// [1,2,3]  [1,2,3]

b = a 其实就是复制了a保存的地址,使a和b都指向同一块地址的数据。而因为此时a和b都指向同一块地址的数据,也就是说两者共用一块地址的数据,那么无论通过哪个变量来改变数据,都必然会影响到另一个变量。

a[0] = 10;
console.log(a,b)
// [10,2,3]  [10,2,3]

传递参数

既然变量分为按值保存和按引用保存,那么传递参数时又是如何呢?对于引用值,是传递变量保存的地址(指针),还是传递指向的真实数据。

首先我们要知道,函数里的参数本质上是局部变量,可以简单理解

function fn(a,b){
    // 这等于
    let a = a;
    let b = b
}

如果传递的是原始值,那么很好理解,参数和函数外的变量相互独立,互不影响。

但是如果是引用值呢?

function fn(obj){
	obj.a = 2
    console.log(obj.a,value.a) // 2  2
}
let value = {
    a: 1
}
fn(value)
console.log(value.a) // 2

如果这样看,你可能以为函数参数是按引用传递的,就是说将value保存的真实对象传递到函数参数obj,但是我们稍微改一下代码。

function fn(obj){
	obj.a = 2
    console.log(obj.a,value.a) // 2  2
    obj = {a: 100}
}
let value = {
    a: 1
}
fn(value)
console.log(value) // {a: 2}

这里只增加了一条代码,就是将obj重新赋值为一个对象。如果参数传递是按值传递,那么obj={a: 100}改变了真实的数据,而value又指向了这个数据,那么最后打印value的时候就应该输出{a: 100},而不是{a: 2},由此可见,参数传递是按值传递的。

函数只有按值传递,简单来说就是变量保存了什么值,就传递什么值。原始值变量保存的就是真实的数据,所以就传递真实的数据的副本,而对于引用值来说,变量保存的是地址,那么传递也就是那个地址的副本。

从内存角度理解

栈内存和堆内存

JavaScript内存空间分为栈内存和堆内存。

栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端称为栈顶。 栈被称为是一种后入先出(LIFO,last-in-first-out)的数据结构。 由于栈具有后入先出的特点。

堆是一种经过排序的树形数据结构,每个结点都有一个值。 通常我们所说的堆的数据结构,是指二叉堆。 堆的特点是根结点的值最小(或最大),且根结点的两个子树也是一个堆。

原始类型的变量保存在栈内存里,引用类型的真实数据保存在堆内存里,但是同时会保存一个变量在栈内存,这个变量的值就是指向真实数据的地址。

这样区分是因为原始值大小固定,占用内存空间小,而引用类型大小不固定、占用内存空间大。

从内存角度看变量复制

基本数据类型的复制

let a = 20;
let b = a;
b = 30;
console.log(a); // 此时a的值是多少,是30?还是20?
复制代码

答案是:20

在这个例子中,a、b 都是基本类型,它们的值是存储在栈内存中的,a、b 分别有各自独立的栈空间, 所以修改了 b 的值以后,a 的值并不会发生变化。

从下图可以清晰的看到变量是如何复制并修改的。

引用数据类型的复制

let m = { a: 10, b: 20 };
let n = m;
n.a = 15;
console.log(m.a) //此时m.a的值是多少,是10?还是15?
复制代码

答案是:15

在这个例子中,m、n都是引用类型,栈内存中存放地址指向堆内存中的对象, 引用类型的复制会为新的变量自动分配一个新的值保存在变量中, 但只是引用类型的一个地址指针而已,实际指向的是同一个对象, 所以修改 n.a 的值后,相应的 m.a 也就发生了改变。

参考

《JavaScript高级程序设计第四版》

《JavaScript权威指南》

上一页JavaScript中的继承下一页JavaScript浅拷贝和深拷贝

最后更新于3年前

image-20211031163839389

部分图片出自了

《「前端进阶」JS中的栈内存堆内存》
《「前端进阶」JS中的栈内存堆内存》
image-20211031163904250
image-20211031155542082