快捷導(dǎo)航

JavaScript Class的正確使用方法詳解

更新時(shí)間：2025年03月23日 09:42:43 作者：燭陰

在JavaScript中,類(lèi)是通過(guò)class關(guān)鍵字來(lái)定義的,它的本質(zhì)是一種語(yǔ)法糖,仍然是基于原型鏈的,class 內(nèi)部的屬性和方法最終都會(huì)添加到構(gòu)造函數(shù)的 prototype 屬性上,本文給大家介紹了JavaScript Class的正確打開(kāi)方式,需要的朋友可以參考下

一、什么是 Class？

類(lèi)是構(gòu)造對(duì)象的藍(lán)圖，它定義了對(duì)象的屬性和方法。在JavaScript中，類(lèi)是通過(guò)class關(guān)鍵字來(lái)定義的，它的本質(zhì)是一種語(yǔ)法糖，仍然是基于原型鏈的，class 內(nèi)部的屬性和方法最終都會(huì)添加到構(gòu)造函數(shù)的 prototype 屬性上。class 關(guān)鍵字提供了一種更清晰、更結(jié)構(gòu)化的方式來(lái)定義對(duì)象和它們之間的關(guān)系。

二、Class 的基本語(yǔ)法：

class Person {
  // 構(gòu)造函數(shù)
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 方法
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  // 靜態(tài)方法
  static greet() {
    console.log("Hello!");
  }
}

// 創(chuàng)建實(shí)例
let person1 = new Person("Alice", 30);
person1.sayHello(); // 輸出 "Hello, my name is Alice and I am 30 years old."

// 調(diào)用靜態(tài)方法
Person.greet(); // 輸出 "Hello!"

Class 的組成部分：

constructor： 構(gòu)造函數(shù)，用于創(chuàng)建和初始化對(duì)象。如果沒(méi)有顯式定義 constructor，JavaScript 會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的構(gòu)造函數(shù)。
方法： 定義在 class 內(nèi)部的函數(shù)，用于描述對(duì)象的行為。
靜態(tài)方法： 使用 static 關(guān)鍵字定義的方法，屬于類(lèi)本身，而不是類(lèi)的實(shí)例?？梢酝ㄟ^(guò)類(lèi)名直接調(diào)用靜態(tài)方法。

三、Class 的繼承：

使用 extends 關(guān)鍵字可以實(shí)現(xiàn)類(lèi)的繼承。子類(lèi)可以繼承父類(lèi)的屬性和方法，并可以添加自己的屬性和方法。

class Student extends Person {
  constructor(name, age, major) {
    // 調(diào)用父類(lèi)的構(gòu)造函數(shù)
    super(name, age);
    this.major = major;
  }

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

  // 重寫(xiě)父類(lèi)的方法
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I am ${this.age} years old, and I am studying ${this.major}.`);
  }
}

let student1 = new Student("Bob", 20, "Computer Science");
student1.sayHello(); // 輸出 "Hello, my name is Bob, I am 20 years old, and I am studying Computer Science."
student1.study(); // 輸出 "Bob is studying Computer Science."

繼承的關(guān)鍵點(diǎn)：

extends： 用于指定父類(lèi)。
super()： 用于調(diào)用父類(lèi)的構(gòu)造函數(shù)。必須在子類(lèi)的構(gòu)造函數(shù)中調(diào)用 super()，才能正確初始化父類(lèi)的屬性。
方法重寫(xiě) (Override)： 子類(lèi)可以定義與父類(lèi)同名的方法，從而覆蓋父類(lèi)的方法。

四、Getter 和 Setter：

可以使用 get 和 set 關(guān)鍵字定義屬性的 getter 和 setter 方法，從而控制屬性的訪問(wèn)和修改。

class Circle {
  constructor(radius) {
    this._radius = radius; // 使用 _radius 作為內(nèi)部屬性
  }

  get radius() {
    return this._radius;
  }

  set radius(value) {
    if (value <= 0) {
      throw new Error("Radius must be positive.");
    }
    this._radius = value;
  }

  get area() {
    return Math.PI * this._radius * this._radius;
  }
}

let circle1 = new Circle(5);
console.log(circle1.radius); // 輸出 5
console.log(circle1.area); // 輸出 78.53981633974483

circle1.radius = 10;
console.log(circle1.radius); // 輸出 10
console.log(circle1.area); // 輸出 314.1592653589793

// circle1.radius = -1; // 拋出錯(cuò)誤 "Radius must be positive."

五、靜態(tài)屬性：

可以使用 static 關(guān)鍵字定義靜態(tài)屬性，靜態(tài)屬性屬于類(lèi)本身，而不是類(lèi)的實(shí)例。

class Counter {
  static count = 0;

  constructor() {
    Counter.count++;
  }

  static getCount() {
    return Counter.count;
  }
}

let counter1 = new Counter();
let counter2 = new Counter();
console.log(Counter.getCount()); // 輸出 2

到此這篇關(guān)于JavaScript Class的正確使用方法詳解的文章就介紹到這了,更多相關(guān)JavaScript Class用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: