253 数据、变量、内存的理解：变量保存的内容，关于引用变量赋值问题，在js调用函数时，传递变量参数时, 是值传递还是引用传递，JS引擎如何管理内存

什么是数据?
- 在内存中可读的、可传递的、保存了特定信息的'东东'
- 一切皆数据, 函数也是数据
- 在内存中的所有操作的目标: 数据

什么是变量?
- 在程序运行过程中，它的值是允许改变的量
- 一个变量对应一块小内存, 它的值保存在此内存中
什么是内存?
- 内存条通电后，产生的存储空间(临时的)
- 一块内存包含2个方面的数据
  - 内部存储的数据
  - 地址值数据
- 内存空间的分类
  - 栈空间: 全局变量和局部变量
  - 堆空间: 对象
内存, 数据, 变量三者之间的关系
- 内存是容器, 用来存储不同数据
- 变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据

变量保存的内容是啥？

<!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;
        console.log(a); // 3

        a = function() {
            console.log(111);
        }
        console.log(a); // 函数

        var b = 'abc';
        a = b;
        console.log(a); // abc

        b = {
            'aa': 222
        };
        a = b;
        console.log(a); //{aa: 222}
    </script>
</body>

</html>

关于引用变量赋值问题

2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据
2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象

<!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); // {name: "Tom", age: 12}
        console.log(obj1.age); // 12
        console.log(obj2); // {name: "Tom", age: 12}

        console.log('-----------------');

        function fn(obj) {
            obj.name = 'A'; // 添加属性
        };

        fn(obj1);
        console.log(obj2.name); // A

        console.log('-----------------');

        var a = {
            age: 12
        };
        var b = a;
        // 【此时，给a重新赋值，又创建了一个对象，a指向了另一个地址】 【如果是a.name='Bob'呢？】
        a = {
            name: 'BOB',
            age: 13
        };
        b.age = 14;
        console.log(b.age, a.name, a.age); // 14 Bob 13

        function fn2(obj) {
            // 修改整个对象obj的值
            obj = {
                age: 15
            }
        }
        fn2(a);

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

</html>

问题: 在js调用函数时，传递变量参数时, 是值传递还是引用传递

理解1: 都是值(基本/地址值)传递
理解2: 可能是值传递, 也可能是引用传递(地址值)
【如果实参是基本数据类型，值传递；如果实参是引用数据类型，引用传递。】

<!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;
            console.log(a) // 4
        };
        fn(a);
        console.log(a);  // 3

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

</html>

问题: JS引擎如何管理内存?

内存生命周期

分配小内存空间, 得到它的使用权
存储数据, 可以反复进行操作
释放小内存空间

释放内存

局部变量: 函数执行完自动释放
对象: 成为垃圾对象 ==> 垃圾回收器回收

<!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>