ES6之Promise、Class类与模块化（Modules）

Promise

• Promise 是 ES6 引入的一种用于处理异步操作的对象。
  它解决了传统回调函数（callback）模式中容易出现的回调地狱和代码可读性差的问题。

• Promise 对象有三种状态：

  1. Pending（进行中）: 初始化状态，表示异步操作还在进行中。
  2. Fulfilled（已成功）: 表示异步操作执行成功，并且返回了一个值。
  3. Rejected（已失败）: 表示异步操作执行失败，抛出一个错误或异常。

• Promise 对象具有以下特点：

  1. Promise 构造函数接收一个执行器函数（executor），该函数具有两个参数：resolve 和 reject。
     • 通过调用resolve 函数，将 Promise 对象从进行中状态变为已成功状态；
     • 通过调用 reject 函数，将 Promise 对象从进行中状态变为已失败状态。
  2. then() 方法用于指定异步操作成功后的回调函数，并且可以链式调用多个 then() 方法。每个then() 方法都返回一个新的Promise 对象。
  3. catch() 方法用于指定异步操作失败时的回调函数，也可以链式调用多个 catch() 方法,本质是then的特例。catch() 方法也返回一个新的Promise 对象。
  4. finally() 方法用于指定无论异步操作成功或失败，最终都需要执行的回调函数。finally() 方法也会返回一个新的Promise 对象。
  5. Promise.resolve();和Promise.reject();方法;

     • Promise.resolve();参数

       • 参数是Promise实例对象时，直接返回这个Promise对象
       • 参数是具有then方法的对象时，会立即执行它的then方法
       • 参数是其他值时，相当于通过resolve函数传参

     • Promise.reject();参数

       • 不管什么参数，都会原封不动地向后传递，作为后续方法的参数

       const thenable =
       	then(resolve,reject){
       	resolve('success');
       	// reject('reason');
       ;
       Promise.resolve(thenable).then(
       	data => console.log(data),
       	err => console.log(err)
       );
       

  6. Promise.all() 方法接受一个 Promise 数组作为参数(只要是可以遍历的都可以作为参数,下同)，返回一个新的 Promise 对象。只有当所有的Promise对象都成功时，才会返回一个成功的结果数组；只要有一个 Promise 对象失败，就会返回一个失败的结果。
  7. Promise.race() 方法接受一个Promise 数组作为参数，返回一个新的 Promise 对象。只要数组中的一个Promise 对象完成（无论成功或失败），就会返回该Promise 对象第一个完成的结果。
  8. Promise.allsettled()方法,数组中的任意一个 Promise 对象完成（无论成功或失败），就会返回该Promise 对象对应的结果。

• 示例：

  // 创建一个异步操作，2秒后返回结果
  const fetchData = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const data = "Hello, Promise!";
        resolve(data);
      }, 2000);
    });
  };
  
  // 调用异步操作，并在操作成功后执行回调函数
  fetchData()
    .then((data) => {
      console.log(data); // 输出: "Hello, Promise!"
    })
    .catch((error) => {
      console.error(error);
    })
    .finally(() => {
      console.log("Promise operation finished.");
    });
  

---

Class类

在JavaScript中，类（Class）是一种用于创建对象的蓝图。类是一种构造函数的语法糖，它提供了一种更简洁、直观的方式来定义对象和其行为。

通过使用类，可以创建多个具有相同属性和方法的对象，并且可以方便地复用和扩展代码。

以下是使用class关键字定义类的示例：

class Person {
  constructor(name, age) { //constructor是一个特殊的方法，用于在创建对象时初始化对象的属性
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

要创建Person类的对象，使用new关键字：

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

person1.sayHello(); // 输出：Hello, my name is Alice and I'm 25 years old.
person2.sayHello(); // 输出：Hello, my name is Bob and I'm 30 years old.

extends

通过使用extends关键字，我们可以创建一个继承自另一个类的子类：

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // auper()调用父类的构造函数
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const student = new Student('Carol', 18, '12th');
student.sayHello(); // 输出：Hello, my name is Carol and I'm 18 years old.
student.study(); // 输出：Carol is studying in grade 12th.

super

super 有两种用法：

1. 在子类的构造函数中，用于调用父类的构造函数。通过 super() 可以在子类的构造函数中调用父类的构造函数，并传递需要的参数。

2. 在子类中，用于调用父类的方法。通过 super.methodName() 的形式来调用父类中的方法。

示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  getName() {
    return this.name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }
  
  getBreed() {
    return this.breed;
  }
  
  speak() {
    super.speak(); // 调用父类的speak方法
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog('Buddy', 'Labrador Retriever');
console.log(dog.getName()); // 输出: Buddy
console.log(dog.getBreed()); // 输出: Labrador Retriever
dog.speak(); // 输出: Buddy makes a sound \n Buddy barks

注意:

• 调用父类方法时，super 必须在子类的构造函数或方法内部使用。
• 静态方法中的 ​super​ 用于调用父类的静态方法，而不是实例方法。只能通过类名来调用静态方法，例如 ​super.staticMethod()​。
• super代表父类的原型对象
• 通过super调用父类的方法时，方法的this指向当前的子类实例

---

Modules 模块系统

在 JavaScript 中，模块（Module）是将一段代码封装成可重用和独立的单元。模块提供了一种组织和管理代码的方式，使代码更易于理解、维护和扩展。

在早期版本的 JavaScript 中，并没有内置的模块系统，但现代的 JavaScript 引擎（如Node.js和浏览器中的ES6模块）已经支持对模块的原生语法和功能。以下是关于模块的一些常见特性：

1. 导出（Export）：模块中的代码可以通过导出机制暴露给其他模块使用。通过使用 export 关键字，我们可以将变量、函数、类等从一个模块中导出。

2. 导入（Import）：模块可以导入来自其他模块的代码。通过使用 import 关键字，我们可以引入其他模块导出的内容，并在当前模块中使用。

3. 默认导出（Default Export）：一个模块可以有一个默认导出，即默认导出一个值（变量、函数、类等）。默认导出不需要使用花括号，而是直接通过 export default 导出，并且可以在导入时使用任意名称。

4. 命名导出（Named Export）：除了默认导出，模块还可以使用命名导出。通过给导出的值命名并使用 export 关键字进行导出，其他模块可以通过在导入时使用相应的名称进行引用。

5. 导入和导出的语法：模块的导入和导出可以有不同的语法形式，具体取决于使用的 JavaScript 平台和环境。在 Node.js 环境中，使用 require 和 module.exports 或 exports 进行导入和导出；在现代浏览器中，使用 ES6 模块语法，即 import 和 export 关键字。

示例：

// filename: math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// filename: main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 输出: 8
console.log(subtract(10, 4)); // 输出: 6

---

export default 和对应import

在 JavaScript 的模块系统中，除了可以使用 export 关键字来导出具名的变量、函数或类以外，还可以使用 export default 关键字来导出一个默认值。导出默认值时，可以在导入时使用任意名称。

用法：

1. 导出默认值：

   • 在导出模块中，可以使用 export default 导出一个默认值，一个模块仅能有一个默认导出。

     // 在导出模块中
     export default "Hello!";  // 导出字符串默认值
     export default {        // 导出对象默认值
       name: "John",
       age: 25
     };
     export default function sayHello() {  // 导出函数默认值
       console.log("Hello!");
     }
     

2. 导入默认值：

   • 在导入模块中，可以使用任意名称导入默认值。不同于具名导入需要使用花括号 {}，默认导入直接将值引入到变量中。

     // 在导入模块中
     import myDefault from "./exportDefaultModule.js";
     console.log(myDefault);  // 输出: "Hello!" 或{ name: "John", age: 25 } 或 函数输出
     
     // 如果导出的是一个对象，则可以直接访问其属性
     import myDefault from "./exportDefaultModule.js";
     console.log(myDefault.name);  // 输出: "John"
     

注意: 导入默认值时不需要使用花括号 {}。而且，在一个模块中，通过 export default 导出的默认值不能直接和其他具名导出一起使用。

// 在导出模块中
const myVar = "Hello!";
export default myVar;        // 正确

export default function() {  // 正确
  console.log("Goodbye!");
}

// 错误示例
export const name = "John";
export default myVar;      // 错误！不能同时具名导出和默认导出

// 在导入模块中
import myDefault, { name } from "./exportDefaultModule.js";   // 错误！不能同时导入默认值和具名导出的变量

import myDefault from "./exportDefaultModule.js";            // 正确

export 和 import

在 JavaScript 的模块系统中，export 用于将模块的内容导出，import 用于导入其他模块的内容。下面是关于 export 和 import 的各种用法：

1. 基本用法：

   • 导出单个变量、函数或类：

     // 在导出模块中
     export const name = "John";
     export function sayHello() {
       console.log("Hello!");
     }
     export class Person {
       constructor(name) {
         this.name = name;
       }
     }
     

   • 导入并使用导出的变量、函数或类：

     // 在导入模块中
     import { name, sayHello, Person } from "./exportModule.js";
     console.log(name); // 输出: "John"
     sayHello(); // 输出: "Hello!"
     const person = new Person("Alice");
     console.log(person.name); // 输出: "Alice"
     

2. 多个导出：

   • 可以在一个 export 语句中同时导出多个内容：

     export { name, sayHello };
     

   • 在导入时，可以使用相同的语法导入多个内容：

     import { name, sayHello } from "./exportModule.js";
     

3. 导出导入时起别名：

   • 可以使用 as 关键字为导出和导入的内容设置别名：

     // 在导出模块中
     export { name as myName };
     
     // 在导入模块中
     import { myName as name } from "./exportModule.js";
     console.log(name); // 输出: "John"
     

4. 整体导入：

   • 通过使用 * 关键字，可以将一个模块的所有导出内容作为单个对象进行导入：

     // 在导入模块中
     import * as myModule from "./exportModule.js";
     console.log(myModule.name); // 输出: "John"
     myModule.sayHello(); // 输出: "Hello!"
     

5. 同时导入：

   • 当导入模块的内容较多时，可以使用 import 关键字一次性导入多个内容，并将它们作为别名的属性：

     // 在导入模块中
     import { name, sayHello, Person } from "./exportModule.js";