ES6 Class 的细节探讨：揭秘 JavaScript 面向对象编程的新境界

2024-02-10 04:43:57

ES6 Class 揭秘：面向对象编程的新利器

JavaScript 自诞生以来，一直以其灵活性和跨平台性著称。然而，在面向对象编程方面，JavaScript 一直缺少一个完善的机制。ES6 的出现，为 JavaScript 带来了 class，弥补了这一缺陷。

ES6 class 是一种语法糖，它允许您使用熟悉的类语法来编写 JavaScript 代码。class 的本质是一种函数，但它具有面向对象编程的特性，如继承、封装和多态性。

ES6 Class 的继承机制

继承是面向对象编程中最重要的概念之一。在 ES6 中，您可以使用 extends 实现类的继承。子类可以继承父类的属性和方法，并可以重写父类的方法。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`I am ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`Woof! I am ${this.name}, a ${this.breed}`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // I am Buddy
dog.bark(); // Woof! I am Buddy, a Golden Retriever

在上面的示例中，Dog 类继承了 Animal 类。Dog 类具有 Animal 类的 speak() 方法，并且还定义了自己的 bark() 方法。

ES6 Class 的实例和原型

在 ES6 中，类的实例是使用 new 关键字创建的。每个实例都有自己的属性和方法，这些属性和方法是私有的，只能在实例内部访问。

类的原型是所有实例共享的一组属性和方法。原型是通过 constructor.prototype 属性访问的。

const animal = new Animal('Kitty');
console.log(animal.name); // Kitty

console.log(Animal.prototype); // {constructor: ƒ, speak: ƒ}

在上面的示例中，animal 实例具有 name 属性，该属性是私有的。Animal.prototype 对象具有 constructor 属性和 speak() 方法，这些属性和方法是公有的，可以在实例外部访问。

ES6 Class 的构造函数

类的构造函数是使用 constructor 关键字定义的。构造函数在创建实例时被调用，它负责初始化实例的属性。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

const animal = new Animal('Kitty');
console.log(animal.name); // Kitty

在上面的示例中，Animal 类具有一个构造函数，该构造函数接受一个参数 name，并将其赋值给实例的 name 属性。

ES6 Class 的箭头函数

箭头函数是 ES6 中引入的一种新的函数语法。箭头函数没有自己的 this 关键字，它的 this 关键字指向外层函数的 this 关键字。

class Animal {
  constructor(name) {
    this.name = name;

    this.speak = () => {
      console.log(`I am ${this.name}`);
    };
  }
}

const animal = new Animal('Kitty');
animal.speak(); // I am Kitty

在上面的示例中，Animal 类的 speak() 方法是一个箭头函数。箭头函数没有自己的 this 关键字，因此它的 this 关键字指向 Animal 类的实例。

ES6 Class 的私有属性和公有属性

在 ES6 中，您可以使用 # 符号来定义类的私有属性。私有属性只能在类的内部访问。

class Animal {
  #name;

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

  getName() {
    return this.#name;
  }
}

const animal = new Animal('Kitty');
console.log(animal.getName()); // Kitty
console.log(animal.#name); // undefined

在上面的示例中，Animal 类的 #name 属性是私有的。您可以使用 getName() 方法来访问私有属性，但不能直接访问它。

在 ES6 中，您还可以使用 public 关键字来定义类的公有属性。公有属性可以在类的内部和外部访问。

class Animal {
  public name;

  constructor(name) {
    this.name = name;
  }
}

const animal = new Animal('Kitty');
console.log(animal.name); // Kitty

在上面的示例中，Animal 类的 name 属性是公有的。您可以直接访问它，而无需使用任何方法。

ES6 Class 的方法

在 ES6 中，您可以使用方法来定义类的行为。方法可以是公有的或私有的。

class Animal {
  speak() {
    console.log(`I am ${this.name}`);
  }

  #getName() {
    return this.name;
  }
}

const animal = new Animal('Kitty');
animal.speak(); // I am Kitty
console.log(animal.#getName()); // undefined

在上面的示例中，Animal 类的 speak() 方法是公有的，#getName() 方法是私有的。您可以直接调用 speak() 方法，但不能直接调用 #getName() 方法。