Javascript高级-JS 世界观之内存图

✊不积跬步，无以至千里；不积小流，无以成江海。

内存使用规则

JavaScript 的内存使用规则与其他语言的内存使用规则基本相同，主要包括以下几点：

• 使用内存时要注意大小和类型。内存是有限的资源，因此在使用内存时要注意大小和类型。对于不需要的变量或对象，要及时释放内存。
• 使用内存时要注意避免内存泄漏。内存泄漏是指程序在使用完内存后没有释放内存，导致内存无法被重复使用。内存泄漏会导致程序运行速度变慢，甚至导致程序崩溃。
• 使用内存时要注意避免内存碎片。内存碎片是指内存空间被分割成许多小块，导致内存无法被有效利用。内存碎片会导致程序运行速度变慢，甚至导致程序崩溃。

以下是一些具体的 JavaScript 内存使用规则：

• 尽量使用局部变量。局部变量是在函数内部定义的变量，在函数执行完毕后会自动释放内存。
• 使用数组时，要注意指定数组的大小。如果不指定数组的大小，数组会自动扩展，可能会导致内存泄漏。
• 使用对象时，要注意及时释放对象。对象可以使用 delete 关键字来释放。
• 使用垃圾回收器时，要注意避免内存泄漏。垃圾回收器会自动回收不再使用的内存，但是如果程序中存在内存泄漏，垃圾回收器也无法解决问题。

以下是一些避免 JavaScript 内存泄漏的建议：

• 使用 const 关键字来定义常量。常量不会被垃圾回收器回收。
• 使用 for...in 循环时，要注意避免循环引用。循环引用会导致对象无法被垃圾回收器回收。
• 使用 addEventListener() 方法时，要注意及时移除监听器。如果不移除监听器，对象无法被垃圾回收器回收。

在实际开发中，要遵循 JavaScript 的内存使用规则，才能提高 JavaScript 程序的内存使用效率，并避免内存泄漏等问题。

内存分区Stack和Heap

内存分区是指将内存空间划分为不同的区域，每个区域用于存储不同的数据。内存分区可以提高内存的使用效率，并避免内存冲突等问题。

在计算机系统中，常见的内存分区有两种：栈（Stack）和堆（Heap）。

栈是程序运行时用于存储局部变量、函数参数和返回值的内存区域。栈内存由编译器自动分配和释放，因此程序员不需要手动管理栈内存。

堆是程序运行时用于存储动态分配的内存区域。堆内存由程序员手动分配和释放，因此程序员需要注意避免内存泄漏等问题。

栈和堆的区别

栈和堆的应用

栈在程序运行时会不断地被使用，因此栈内存的大小是有限的。栈内存的大小通常由操作系统来决定，也可以由程序员在编译时指定。

堆内存的大小是可变的，可以根据程序的需要动态扩展或缩小。堆内存的大小通常由程序员在运行时指定。

栈和堆是计算机系统中重要的内存分区。程序员应该了解栈和堆的特点和应用，才能正确地使用内存，避免内存问题。

栈和堆的代码解析

以下是一些使用栈和堆的代码示例：

栈内存

// 声明局部变量
let a = 1;
let b = 2;

// 调用函数
function foo() {
  // 声明局部变量
  let c = 3;

  // 打印局部变量
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

foo();

在上述代码中，a、b 和 c 都是局部变量，它们会被分配到栈内存中。当函数 foo() 执行完毕后，局部变量 c 会被自动释放。

堆内存

// 声明对象
const obj = new Object();

// 设置对象属性
obj.name = 'John Doe';
obj.age = 30;

// 打印对象属性
console.log(obj.name); // John Doe
console.log(obj.age); // 30

在上述代码中，obj 是一个对象，它会被分配到堆内存中。对象的属性会存储在堆内存中。当对象 obj 不再使用时，需要手动释放它，否则会导致内存泄漏。

堆内存的释放

堆内存可以使用 delete 关键字来释放。

// 声明对象
const obj = new Object();

// 设置对象属性
obj.name = 'John Doe';
obj.age = 30;

// 打印对象属性
console.log(obj.name); // John Doe
console.log(obj.age); // 30

// 释放对象
delete obj;

// 再次访问对象属性
// 会报错，因为对象已被释放
console.log(obj.name); // ReferenceError: obj is not defined

总结

在 JavaScript 中，栈和堆在声明变量的时候就做好了区分。

栈内存用于存储局部变量、函数参数 和 返回值。局部变量是函数内部定义的变量，函数参数是传递给函数的变量，函数返回值是函数执行完毕后返回的变量。

这些变量都是在函数执行时创建的，在函数执行完毕后会被自动释放。因此，对于栈内存中的变量，不需要指定它们是哪种内存。

堆内存用于存储动态分配的内存。动态分配内存通常用于创建对象、数组等数据结构。

对于堆内存中的变量，需要使用 new 关键字来创建。

window 对象

window 对象的特点

• window 对象是 JavaScript 中的一个全局对象，它代表当前的浏览器窗口。
• window 对象是 JavaScript 中最重要的对象之一，它提供了访问和控制浏览器窗口、文档和其他浏览器对象的 API。
• window 对象是每个 JavaScript 脚本的默认对象，因此可以通过 window 变量访问 window 对象。

window 对象的用法

window 对象可以用于以下操作：

• 控制浏览器窗口的大小、位置和属性。
• 访问和修改 HTML 文档的内容。
• 获取浏览器的信息。
• 获取屏幕的信息。
• 获取当前 URL。

window 对象的代码解析

以下是一些使用 window 对象的代码示例：

// 获取浏览器窗口的大小
const width = window.innerWidth;
const height = window.innerHeight;

// 修改 HTML 文档的内容
document.querySelector('h1').textContent = 'Hello, world!';

// 获取浏览器的信息
const browserName = navigator.userAgent;

// 获取屏幕的信息
const screenWidth = screen.width;
const screenHeight = screen.height;

// 获取当前 URL
const url = location.href;

代码解析

• 获取浏览器窗口的大小：使用 window.innerWidth 和 window.innerHeight 属性可以获取浏览器窗口的宽度和高度。
• 修改 HTML 文档的内容：使用 document.querySelector() 方法可以获取 HTML 文档中的元素，然后使用 textContent 属性可以修改元素的内容。
• 获取浏览器的信息：使用 navigator 对象可以获取有关浏览器的信息，例如浏览器名称、版本号等。
• 获取屏幕的信息：使用 screen 对象可以获取有关屏幕的信息，例如屏幕宽度、高度等。
• 获取当前 URL：使用 location 对象可以获取当前 URL。

总结

window 对象是 JavaScript 中的一个重要对象，它提供了访问和控制浏览器窗口、文档和其他浏览器对象的 API。通过了解 window 对象的特点和用法，可以更好地使用 JavaScript 编写程序。

对象的共有属性

在 JavaScript 中，对象的共有属性（public property）是指任何对象都可以访问的属性。共有属性可以通过对象的点运算符（.）或方括号运算符（[]）来访问。

共有属性的特点

• 共有属性是任何对象都可以访问的。
• 共有属性可以通过对象的点运算符（.）或方括号运算符（[]）来访问。
• 共有属性可以通过对象的 prototype 属性来继承。

共有属性的用法

共有属性可以用于存储对象的公共数据。例如，以下代码定义了一个对象，其中有一个共有属性 name：

const obj = {
  name: 'John Doe',
};

我们可以通过对象的点运算符或方括号运算符来访问对象的 name 属性：

console.log(obj.name); // John Doe
console.log(obj['name']); // John Doe

共有属性也可以用于存储对象的公共方法。例如，以下代码定义了一个对象，其中有一个共有方法 sayHello()：

const obj = {
  name: 'John Doe',
  sayHello() {
    console.log('Hello, my name is ' + this.name);
  },
};

我们可以通过对象的点运算符或方括号运算符来调用对象的 sayHello() 方法：

obj.sayHello(); // Hello, my name is John Doe

总结

共有属性是任何对象都可以访问的属性。共有属性可以用于存储对象的公共数据或公共方法。

原型链

在 JavaScript 中，原型链（prototype chain）是指每个对象都包含一个指向另一个对象的链。这个链上的对象称为原型对象，而该链上的最后一个对象称为 null 对象。

原型链的特点

• 原型链是每个对象都包含的链。
• 原型链上的对象称为原型对象。
• 原型链上的最后一个对象称为 null 对象。
• 原型链用于对象的继承。

原型链的用法

原型链可以用于对象的继承。当我们创建一个对象时，该对象会继承其原型对象的属性和方法。例如，以下代码定义了一个 Person 构造函数：

function Person() {
  this.name = 'John Doe';
  this.age = 30;
}

这个构造函数定义了一个 Person 对象，该对象具有 name 和 age 属性。我们可以使用 new 关键字来创建一个 Person 对象：

const person = new Person();

person 是一个 Person 对象，它继承了 Person 构造函数的原型对象的属性和方法。因此，person 对象具有 name 和 age 属性。

原型链还可以用于对象的扩展。我们可以通过添加属性或方法到原型对象来扩展对象。例如，以下代码添加了一个 sayHello() 方法到 Person 构造函数的原型对象：

function Person() {
  this.name = 'John Doe';
  this.age = 30;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

现在，Person 构造函数的原型对象具有 sayHello() 方法。因此，每个 Person 对象都具有 sayHello() 方法。

总结

原型链是 JavaScript 中重要的概念。原型链用于对象的继承和扩展。

画出JS世界

构造一个 JavaScript 的世界，需要提供以下信息：

• 世界的基本结构：世界由什么组成？世界中的对象之间有何关系？
• 世界中的元素：世界中包含哪些对象？这些对象的属性和方法是什么？
• 世界中的规则：世界中的对象如何相互作用？

包含的元素：

• 对象：对象是 JavaScript 中最重要的概念之一。对象可以用于存储数据和方法。
• 原型链：每个对象都有一个指向另一个对象的链。这个链上的对象称为原型对象，而该链上的最后一个对象称为 null 对象。
• 变量：变量是用于存储数据的容器。变量可以是局部变量或全局变量。
• 函数：函数是用于执行代码的程序。函数可以是内置函数或自定义函数。
• 其他概念：JavaScript 的世界还包含其他概念，例如运算符、流程控制结构、异常处理等。

我会根据提供的信息来决定如何组织这些元素。例如，如果世界的基本结构是树形结构，那么我可能会将对象组织成树形结构。

以下是一些会包含的规则：

• 对象的属性和方法可以访问和修改。
• 对象可以相互继承。
• 变量可以存储任何类型的数据。
• 函数可以调用其他函数。

要根据提供的信息来决定如何制定这些规则。例如，如果世界中包含用户和系统，那么应该要制定规则来控制用户和系统之间的交互。

对象与函数

对象

在 JavaScript 中，对象是数据和方法的集合。对象可以用来表示现实世界中的任何事物，例如人、动物、物体、事件等。

对象的特点

• 对象是 JavaScript 中最重要的概念之一。
• 对象可以用于存储数据和方法。
• 对象的属性和方法可以访问和修改。
• 对象可以相互继承。

对象的用法

对象可以用于以下场景：

• 存储数据：对象可以用于存储各种类型的数据，例如字符串、数字、数组、对象等。
• 实现功能：对象可以用于实现各种功能，例如计算、操作、处理等。
• 模拟现实世界：对象可以用于模拟现实世界中的各种事物，例如人、动物、物体、事件等。

对象的代码解析

以下是一个定义对象的代码示例：

// 定义一个对象
const person = {
  name: 'John Doe',
  age: 30,
};

在上述代码中，我们定义了一个 person 对象，该对象具有 name 和 age 属性。

我们可以通过对象的点运算符或方括号运算符来访问对象的属性：

console.log(person.name); // John Doe
console.log(person['age']); // 30

我们可以通过对象的点运算符或方括号运算符来调用对象的方法：

person.sayHello(); // Hello, my name is John Doe

函数

在 JavaScript 中，函数是用于执行代码的程序。函数可以是内置函数或自定义函数。

函数的特点

• 函数是 JavaScript 中的重要概念之一。
• 函数可以用于执行代码。
• 函数可以传递参数。
• 函数可以返回值。

函数的用法

函数可以用于以下场景：

• 执行代码：函数可以用于执行任何类型的代码，例如计算、操作、处理等。
• 模块化代码：函数可以用于将代码分解为更小的模块，提高代码的可读性和可维护性。
• 重用代码：函数可以用于重复使用代码，提高代码的效率。

函数的代码解析

以下是一个定义函数的代码示例：

// 定义一个函数
function sayHello() {
  console.log('Hello, world!');
}

在上述代码中，我们定义了一个 sayHello() 函数，该函数会打印出 "Hello, world!" 字符串。

我们可以通过函数的名称来调用函数：

sayHello(); // Hello, world!

我们可以通过函数的名称来传递参数：

function sayHello(name) {
  console.log('Hello, ' + name + '!');
}

sayHello('John Doe'); // Hello, John Doe!

我们可以通过函数的名称来返回值：

function add(a, b) {
  return a + b;
}

const sum = add(1, 2);
console.log(sum); // 3