JavaScript 探索对象：基础与进阶

2024-01-22 02:16:23

踏入 JavaScript 对象的世界，开启面向对象编程之旅。我们将一起探寻对象的基本构造，剖析类与对象的奥妙，掌握继承、封装、多态等核心概念，并将它们融入到 JavaScript 的开发实践中，助您登顶 JavaScript 开发大师之巅。

对象的基本构造

对象是 JavaScript 的核心概念之一，也是面向对象编程的基础。对象是一种数据结构，可以用来存储和组织相关数据，并通过属性和方法对数据进行操作。

对象的基本结构：

let person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

属性： 对象中的键值对，用于存储数据。在上面的示例中，"name" 和 "age" 是对象的属性。
方法： 对象中的函数，用于对数据进行操作。在上面的示例中，"greet" 是对象的方法。

类与对象

类是 JavaScript 中创建对象的蓝图。我们可以使用类来定义对象的属性和方法，然后使用这些类来创建对象。

类的基本结构：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

let person = new Person("John Doe", 30);

constructor() 方法： 类的构造函数，用于创建对象时初始化对象的属性。在上面的示例中，"constructor()" 方法接受两个参数，"name" 和 "age"，并将它们赋值给对象的 "name" 和 "age" 属性。
实例： 使用类创建的对象。在上面的示例中，"person" 是 "Person" 类的实例。

继承

继承允许我们创建新的类，这些类从现有的类继承属性和方法。

继承的基本结构：

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}

let employee = new Employee("John Doe", 30, 50000);

extends： 用于指定一个类从另一个类继承。在上面的示例中，"Employee" 类继承自 "Person" 类。
super() 方法： 用于调用父类的构造函数。在上面的示例中，"super()" 方法调用 "Person" 类的构造函数，并将 "name" 和 "age" 参数传递给 "Person" 类的构造函数。
子类： 继承自父类的类。在上面的示例中，"Employee" 类是 "Person" 类的子类。
父类： 被子类继承的类。在上面的示例中，"Person" 类是 "Employee" 类的父类。

封装

封装是指将数据和方法绑定在一起，形成一个独立的单元。在 JavaScript 中，我们可以通过使用私有属性和方法来实现封装。

封装的基本结构：

class Person {
  #name;
  #age;

  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }

  getName() {
    return this.#name;
  }

  getAge() {
    return this.#age;
  }
}

let person = new Person("John Doe", 30);

#：私有属性或方法的标识符。在上面的示例中，"#name" 和 "#age" 是私有属性，"#getName()" 和 "#getAge()" 是私有方法。
私有属性： 只能在类内部访问的属性。在上面的示例中，"name" 和 "age" 是私有属性。
私有方法： 只能在类内部调用的方法。在上面的示例中，"getName()" 和 "getAge()" 是私有方法。

多态

多态是指能够以不同的方式对不同的对象执行相同的操作。在 JavaScript 中，我们可以通过使用虚方法来实现多态。

多态的基本结构：

class Person {
  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

class Employee extends Person {
  greet() {
    console.log("Hello, my name is " + this.name + " and I am an employee");
  }
}

let person = new Person();
let employee = new Employee();

person.greet(); // Hello, my name is John Doe
employee.greet(); // Hello, my name is John Doe and I am an employee

虚方法： 在父类中定义的方法，但在子类中具有不同的实现。在上面的示例中，"greet()" 方法是虚方法。
子类重写父类方法： 子类可以重写父类的方法。在上面的示例中，"Employee" 类重写了 "Person" 类的 "greet()" 方法。

原型链

原型链是 JavaScript 中一种特殊的继承机制。每个对象都有一个原型，原型也是一个对象，它包含了一些属性和方法。如果一个对象没有某个属性或方法，那么它会沿着原型链向上查找，直到找到该属性或方法为止。

原型链的基本结构：

let person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

let employee = Object.create(person);
employee.salary = 50000;

employee.greet(); // Hello, my name is John Doe
console.log(employee.salary); // 50000

Object.create() 方法： 用于创建一个新对象，该对象继承自另一个对象。在上面的示例中，"employee" 对象继承自 "person" 对象。
原型对象： 对象的原型。在上面的示例中，"person" 对象是 "employee" 对象的原型。
原型链： 从对象向上追溯的原型对象链。在上面的示例中，"employee" 对象的原型链为 "employee" -> "person" -> "Object"。