最全面的JavaScript面向对象指南

2024-01-13 16:24:16

JavaScript中的面向对象编程
JavaScript中没有传统意义上的类和对象，而是基于原型的面向对象编程。这意味着对象可以从其他对象继承属性和方法，并且可以动态地创建和修改对象。

原型

原型是JavaScript中对象的一个特殊属性，它指向创建该对象的构造函数。每个对象都有一个原型，并且可以通过原型访问构造函数的属性和方法。

构造函数

构造函数是用来创建对象的函数。构造函数的名称通常以大写字母开头，并且在调用时使用new。

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

上面的代码定义了一个构造函数Person，它有两个参数：name和age。当使用new关键字调用Person构造函数时，会创建一个新的对象，并把构造函数的参数作为对象的属性。

const person1 = new Person("John", 30);
console.log(person1.name); // John
console.log(person1.age); // 30

上面的代码创建了一个新的Person对象，并把"John"和30作为对象的属性。然后，使用console.log()方法输出对象的属性值。

类

类是JavaScript中的一种语法糖，它可以让你用更简洁的方式定义对象。类的语法如下：

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

上面的代码定义了一个类Person，它有两个属性：name和age。类的构造函数是使用constructor关键字定义的，它在创建对象时被调用。

const person1 = new Person("John", 30);
console.log(person1.name); // John
console.log(person1.age); // 30

上面的代码创建了一个新的Person对象，并把"John"和30作为对象的属性。然后，使用console.log()方法输出对象的属性值。

继承

继承是指一个对象可以从另一个对象继承属性和方法。在JavaScript中，可以使用extends关键字实现继承。

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

上面的代码定义了一个类Student，它继承了Person类。Student类有两个属性：name和age，它们是从Person类继承来的。Student类还定义了一个新的属性grade。

const student1 = new Student("John", 30, "A");
console.log(student1.name); // John
console.log(student1.age); // 30
console.log(student1.grade); // A

上面的代码创建了一个新的Student对象，并把"John"、30和"A"作为对象的属性。然后，使用console.log()方法输出对象的属性值。

多态

多态是指对象可以根据自己的类型执行不同的操作。在JavaScript中，可以使用多态来实现代码的重用。

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
  greet() {
    super.greet();
    console.log(`I'm a student in grade ${this.grade}`);
  }
}

const person1 = new Person("John");
const student1 = new Student("John", "A");

person1.greet(); // Hello, my name is John
student1.greet(); // Hello, my name is John
// I'm a student in grade A

上面的代码定义了两个类：Person和Student。Person类定义了一个名为greet()的方法，该方法输出"Hello, my name is "加上对象的名称。Student类继承了Person类，并重写了greet()方法。Student类的greet()方法调用了父类的greet()方法，然后输出"I'm a student in grade "加上对象的年级。

const people = [person1, student1];

for (const person of people) {
  person.greet();
}

上面的代码创建了一个数组people，其中包含person1和student1对象。然后，使用for-of循环遍历数组people，并调用每个对象的greet()方法。由于person1是一个Person对象，而student1是一个Student对象，因此greet()方法的输出不同。

封装

封装是指将对象的属性和方法隐藏起来，只允许通过对象的公开方法来访问它们。在JavaScript中，可以使用访问控制符来实现封装。

class Person {
  #name;
  #age;

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

  getName() {
    return this.#name;
  }

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

上面的代码定义了一个类Person，它有两个私有属性：#name和#age。私有属性只能通过对象的公开方法来访问。

const person1 = new Person("John", 30);

console.log(person1.#name); // Error: Cannot access private field #name on object of type Person
console.log(person1.#age); // Error: Cannot access private field #age on object of type Person

console.log(person1.getName()); // John
console.log(person1.getAge()); // 30