JavaScript类型系统与内存管理

JavaScript 类型系统

JavaScript 是一种动态类型语言，这意味着变量的类型在运行时确定，而不是在编译时。它的类型系统包括基本类型和引用类型。

基本类型

JavaScript 有七种基本类型：null、undefined、boolean、number、string、symbol（ES6 新增）和 bigint（ES2020 新增）。

1. null：表示空值，是一个只有一个值 null 的类型。它通常用于有意表示一个变量没有值的情况。

let myNull = null;
console.log(typeof myNull); // 输出: object

这里 typeof null 返回 object 是 JavaScript 的一个历史遗留问题。

2. undefined：当一个变量被声明但未被赋值时，它的值就是 undefined。函数没有返回值时也会返回 undefined。

let myVar;
console.log(myVar); // 输出: undefined

function myFunction() {}
console.log(myFunction()); // 输出: undefined

3. boolean：有两个值 true 和 false，用于逻辑判断。

let isDone = true;
if (isDone) {
    console.log('任务完成');
}

4. number：用于表示整数和浮点数。JavaScript 中的 number 类型遵循 IEEE 754 标准，这意味着它使用 64 位双精度格式。

let myNumber = 42;
let floatingNumber = 3.14;

JavaScript 还支持一些特殊的 number 值，如 NaN（非数字）、Infinity 和 -Infinity。

let result = 'abc' / 2;
console.log(result); // 输出: NaN
console.log(1 / 0); // 输出: Infinity
console.log(-1 / 0); // 输出: -Infinity

5. string：用于表示文本数据，由零个或多个 16 位 Unicode 字符组成。字符串可以用单引号、双引号或模板字面量（ES6 新增）表示。

let singleQuoteStr = '这是单引号字符串';
let doubleQuoteStr = "这是双引号字符串";
let templateStr = `这是模板字符串，${singleQuoteStr} 和 ${doubleQuoteStr}`;
console.log(templateStr);

6. symbol：ES6 引入的一种新的基本类型，它创建的是唯一的、不可变的值。常用于创建对象的唯一属性键。

let mySymbol = Symbol('描述');
let myObject = {};
myObject[mySymbol] = '值';
console.log(myObject[mySymbol]); // 输出: 值

7. bigint：ES2020 引入，用于表示大于 Number.MAX_SAFE_INTEGER（9007199254740991）或小于 Number.MIN_SAFE_INTEGER（-9007199254740991）的整数。通过在数字后面加上 n 来表示 bigint。

let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber);

引用类型

引用类型（也称为对象类型）包括 Object、Array、Function 等。与基本类型不同，引用类型的值是保存在堆内存中的对象，变量保存的是对该对象的引用。

1. Object：是 JavaScript 中所有对象的基类。可以通过对象字面量创建对象。

let myObject = {
    name: '张三',
    age: 30,
    sayHello: function() {
        console.log(`你好，我是 ${this.name}`);
    }
};
myObject.sayHello(); // 输出: 你好，我是 张三

2. Array：用于存储有序的数据集合。数组的元素可以是任何类型。

let myArray = [1, '字符串', true, { key: '值' }];
console.log(myArray[1]); // 输出: 字符串

3. Function：在 JavaScript 中，函数是一等公民，即函数可以像其他数据类型一样被赋值给变量、作为参数传递给其他函数或从函数中返回。

function add(a, b) {
    return a + b;
}
let myFunction = add;
console.log(myFunction(2, 3)); // 输出: 5

类型转换

JavaScript 中的类型转换分为显式类型转换和隐式类型转换。

显式类型转换

显式类型转换是通过特定的函数或操作符明确地将一个值从一种类型转换为另一种类型。

1. 转换为 string：可以使用 toString() 方法或 String() 函数。

let num = 42;
let str1 = num.toString();
let str2 = String(num);
console.log(str1, str2); // 输出: '42' '42'

2. 转换为 number：使用 Number() 函数、parseInt() 或 parseFloat()。

let str = '42';
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = parseFloat(str);
console.log(num1, num2, num3); // 输出: 42 42 42

3. 转换为 boolean：使用 Boolean() 函数。除了 0、null、undefined、NaN、空字符串 '' 转换为 false 外，其他值都转换为 true。

let bool1 = Boolean(0);
let bool2 = Boolean('');
let bool3 = Boolean(null);
let bool4 = Boolean(42);
let bool5 = Boolean('abc');
console.log(bool1, bool2, bool3, bool4, bool5); // 输出: false false false true true

隐式类型转换

隐式类型转换是 JavaScript 在某些操作中自动进行的类型转换。

1. 算术操作中的隐式转换：当不同类型的值进行算术运算时，JavaScript 会自动将它们转换为 number 类型。

let result1 = 1 + '2'; // 这里字符串 '2' 被隐式转换为数字 2
console.log(result1); // 输出: '12'，因为 + 号在有字符串时进行字符串拼接

let result2 = 1 - '2'; // 字符串 '2' 被隐式转换为数字 2
console.log(result2); // 输出: -1

2. 比较操作中的隐式转换：在比较操作中，不同类型的值也会发生隐式转换。

console.log(1 == '1'); // 输出: true，'1' 被隐式转换为 1
console.log(1 === '1'); // 输出: false，=== 不进行类型转换

JavaScript 内存管理

内存管理是指程序代码对计算机内存资源的分配和释放的控制。在 JavaScript 中，虽然不像 C++ 等语言需要手动管理内存，但理解其内存管理机制对于编写高效、稳定的代码很重要。

内存生命周期

内存的生命周期分为三个阶段：分配、使用和释放。

1. 分配内存：当声明变量并赋值时，JavaScript 会为其分配内存。

let num = 42; // 为数字 42 分配内存
let str = 'hello'; // 为字符串 'hello' 分配内存
let obj = { key: 'value' }; // 为对象分配内存

2. 使用内存：在变量的使用过程中，会读取和修改分配的内存中的数据。

num = num + 1; // 修改 num 的值，操作分配的内存
obj.key = 'new value'; // 修改对象属性，操作对象的内存

3. 释放内存：在 JavaScript 中，垃圾回收机制会自动回收不再使用的内存。当一个对象不再被引用时，它所占用的内存就可以被回收。

let obj = { key: 'value' };
obj = null; // 使对象不再被引用，垃圾回收机制可以回收其内存

垃圾回收机制

JavaScript 使用的是标记 - 清除算法进行垃圾回收。

1. 标记阶段：垃圾回收器从根对象（全局对象 window 在浏览器环境中，global 在 Node.js 环境中）开始，标记所有可以访问到的对象。这些对象被称为可达对象。
2. 清除阶段：垃圾回收器遍历堆内存，清除所有未被标记的对象（不可达对象），回收它们占用的内存。

内存泄漏

内存泄漏是指程序中已分配的内存由于某种原因无法被释放，导致内存占用不断增加。在 JavaScript 中，常见的内存泄漏场景有：

1. 意外的全局变量：在严格模式下，未声明的变量会报错，但在非严格模式下会创建一个全局变量。如果这个变量持续引用一些大对象，就可能导致内存泄漏。

function myFunction() {
    // 这里没有使用 var、let 或 const 声明变量，在非严格模式下会创建全局变量
    leakyVar = { largeData: new Array(1000000).fill(1) }; 
}
myFunction();

2. 定时器和事件监听器未清理：如果添加了事件监听器或定时器，但没有在适当的时候移除它们，即使相关的 DOM 元素或对象已经不再使用，它们仍然会保持引用，导致内存泄漏。

let element = document.getElementById('myElement');
function handleClick() {
    console.log('点击了元素');
}
element.addEventListener('click', handleClick);
// 如果 element 被移除，但没有移除事件监听器
element.parentNode.removeChild(element);
// 此时 handleClick 函数和相关引用仍然存在，可能导致内存泄漏

3. 闭包引起的内存泄漏：如果闭包引用了外部大对象，且闭包一直存在，外部对象也无法被垃圾回收。

function outerFunction() {
    let largeObject = { data: new Array(1000000).fill(1) };
    return function innerFunction() {
        // 这里 innerFunction 形成闭包，持续引用 largeObject
        console.log(largeObject.data[0]);
    };
}
let closure = outerFunction();
// 即使 outerFunction 执行完毕，largeObject 由于闭包引用也无法被回收

优化内存使用

为了优化 JavaScript 中的内存使用，可以采取以下措施：

1. 避免意外全局变量：始终使用 var、let 或 const 声明变量，尤其是在严格模式下编写代码。

2. 及时清理定时器和事件监听器：在不需要定时器或事件监听器时，使用 clearInterval、clearTimeout 和 removeEventListener 方法移除它们。

let element = document.getElementById('myElement');
function handleClick() {
    console.log('点击了元素');
}
element.addEventListener('click', handleClick);
// 当不再需要监听时
element.removeEventListener('click', handleClick);

3. 合理使用闭包：确保闭包不会长时间持有不必要的引用。如果闭包不再需要，将其设置为 null，以便垃圾回收机制回收相关内存。

let closure = outerFunction();
// 当不再需要闭包时
closure = null;

4. 优化数据结构：选择合适的数据结构来存储数据，避免过度使用大型数组或对象。例如，如果只需要存储少量数据且不需要顺序访问，可以考虑使用对象字面量而不是数组。

5. 分批处理大数据：当处理大量数据时，将数据分成小块进行处理，而不是一次性加载和处理全部数据，以减少内存占用。

总结

JavaScript 的类型系统和内存管理是其重要的组成部分。理解类型系统可以帮助我们编写更健壮、不易出错的代码，而掌握内存管理机制能够优化程序性能，避免内存泄漏等问题。通过合理使用类型转换、遵循良好的内存管理实践，我们可以编写出高效、可靠的 JavaScript 应用程序。无论是前端开发、后端开发还是全栈开发，对这些基础知识的深入理解都是必不可少的。在实际开发中，我们要时刻关注代码对内存的影响，不断优化代码，以提供更好的用户体验和系统性能。