【前端】JavaScript高级教程：基础总结深入——数据、变量、内存

子非鱼921

已于 2024-09-10 22:32:35 修改

阅读量263

点赞数 6

分类专栏：【前端】JavaScript高级教程文章标签：前端 javascript 开发语言

于 2024-09-10 22:05:15 首次发布

本文链接：https://blog.csdn.net/weixin_45980065/article/details/142110301

版权

【前端】JavaScript高级教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

数据、变量、内存
关于赋值和内存的问题
关于引用变量赋值问题
关于数据传递问题
内存管理

数据、变量、内存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_数据_变量_内存</title>
</head>
<body>
<!--
1. 什么是数据?
  * 存储在内存中代表特定信息的'东东', 本质上是0101...
  * 数据的特点: 可传递, 可运算
  * 一切皆数据
  * 内存中所有操作的目标: 数据
    * 算术运算
    * 逻辑运算
    * 赋值
    * 运行函数
2. 什么是内存?
  * 内存条通电后产生的可储存数据的空间(临时的)
  * 内存产生和死亡: 内存条(电路版)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
  * 一块小内存的2个数据
     * 内部存储的数据
     * 地址值
  * 内存分类
    * 栈: 全局变量/局部变量
    * 堆: 对象
3. 什么是变量?
  * 可变化的量, 由变量名和变量值组成
  * 每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据
4. 内存,数据, 变量三者之间的关系
  * 内存用来存储数据的空间
  * 变量是内存的标识
-->
<script type="text/javascript">

  var age = 18
  console.log(age)

  var obj = {name: 'Tom'}
  console.log(obj.name)

  function fn () {
    var obj = {name: 'Tom'}
  }

  var a = 3
  var b = a + 2
</script>
</body>
</html>

关于赋值和内存的问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关于赋值和内存的问题</title>
</head>
<body>
<!--
  问题: var a = xxx, a内存中到底保存的是什么?
    * xxx是基本数据, 保存的就是这个数据
    * xxx是对象, 保存的是对象的地址值
    * xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)
-->
<script type="text/javascript">
  var a = 3
  a = function () {

  }

  var b = 'abc'
  a = b
  b = {}
  a = b
</script>
</body>
</html>

关于引用变量赋值问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_关于引用变量赋值问题</title>
</head>
<body>
<!--
关于引用变量赋值问题
  * 2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据
  * 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象
-->
<script type="text/javascript">
  var obj1 = {name: 'Tom'}
  var obj2 = obj1
  obj2.age = 12
  console.log(obj1.age)  // 12
  function fn (obj) {
    obj.name = 'A'
  }
  fn(obj1)
  console.log(obj2.name) //A


  var a = {age: 12}
  var b = a
  a = {name: 'BOB', age: 13}
  b.age = 14
  console.log(b.age, a.name, a.age) // 14 Bob 13

  function fn2 (obj) {
    obj = {age: 15}
  }
  fn2(a)

  console.log(a.age)
</script>
</body>
</html>

关于数据传递问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_关于数据传递问题</title>
</head>
<body>
<!--
问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递
  * 理解1: 都是值(基本/地址值)传递
  * 理解2: 可能是值传递, 也可能是引用传递(地址值)
-->
<script type="text/javascript">
  var a = 3
  function fn (a) {
    a = a +1
  }
  fn(a)
  console.log(a)

  function fn2 (obj) {
    console.log(obj.name)
  }
  var obj = {name: 'Tom'}
  fn2(obj)
</script>
</body>
</html>

内存管理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_内存管理</title>
</head>
<body>
<!--
问题: JS引擎如何管理内存?
1. 内存生命周期
  * 分配小内存空间, 得到它的使用权
  * 存储数据, 可以反复进行操作
  * 释放小内存空间
2. 释放内存
  * 局部变量: 函数执行完自动释放
  * 对象: 成为垃圾对象==>垃圾回收器回收
-->
<script type="text/javascript">
  var a = 3
  var obj = {}
  obj = undefined

  function fn () {
    var b = {}
  }

  fn() // b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收
</script>
</body>
</html>