腳本之家服務器常用軟件

快捷導航

javascript中Class(類)的介紹和使用方法

更新時間：2024年05月10日 08:35:38 作者：ZSK6

在JavaScript中類(Class)是一種創(chuàng)建對象的模板,它可以用來定義對象的屬性和方法,這篇文章主要給大家介紹了關于javascript中Class(類)的介紹和使用方法的相關資料,需要的朋友可以參考下

簡言

在面向對象編程中（object-oriented programming）, 一個類定義了一個對象（object’s）的特征。類是定義對象屬性（properties）和方法（methods）的模板，是用來繪制具體對象實例的“藍圖”。

js中類是用于創(chuàng)建對象的模板，他們用代碼封裝數(shù)據(jù)以處理該數(shù)據(jù)，JS 中的類建立在原型上的。

雖然js通過構造函數(shù)和原型鏈也能實現(xiàn)面向對象編程的特性，但是直接實現(xiàn)的話比較復雜，所以JavaScript 提供了Class(類)模型，它是把面向對象編程特性從原型的基礎上實現(xiàn)的，從而能夠更為直觀地在 JavaScript 中使用基于類的面向對象編程中的概念。

Class(類)

實際上，類是“特殊的函數(shù)”，就像你能夠定義的函數(shù)表達式和函數(shù)聲明一樣。

定義類

類語法有兩個組成部分：類表達式和類聲明。類聲明和類表達式的主體都執(zhí)行在嚴格模式下。比如，構造函數(shù)，靜態(tài)方法，原型方法，getter 和 setter 都在嚴格模式下執(zhí)行。

類聲明

定義類的一種方法是使用類聲明。要聲明一個類，你可以使用帶有class關鍵字的類名。

類聲明不會提升。你首先需要聲明你的類，然后再訪問它，否則將拋出ReferenceError

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

類表達式

類表達式是定義類的另一種方法。類表達式可以命名或不命名。命名類表達式的名稱是該類體的局部名稱。(不過，可以通過類的 (而不是一個實例的) name 屬性來檢索它)。

// 未命名/匿名類
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// 命名類
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 輸出："Rectangle2"

類體和方法定義

一個類的類體是一對花括號/大括號 {} 中的部分。這是你定義類成員的位置，如方法或構造函數(shù)。

constructor方法是一個特殊的方法，這種方法用于創(chuàng)建和初始化一個由class創(chuàng)建的對象。一個類只能擁有一個名為“constructor”的特殊方法。如果類包含多個constructor的方法，則將拋出一個SyntaxError 。

一個構造函數(shù)可以使用 super 關鍵字來調用一個父類的構造函數(shù)。

類里面的方法和對象里的方法寫法一樣，不過它可以加些特殊的修飾詞，修飾詞不同作用不同，例如加 static就變了靜態(tài)方法，添加#就變成了私有方法。

類的 constructor

constructor 是一種用于創(chuàng)建和初始化class創(chuàng)建的對象的特殊方法。
constructor函數(shù)創(chuàng)建類對象實例時的new息息相關。

語法

constructor([arguments]) { ... }

特點

在一個類中只能有一個名為“constructor”的特殊方法。一個類中出現(xiàn)多次構造函數(shù) (constructor)方法將會拋出一個 SyntaxError 錯誤。
在一個構造方法中可以使用super關鍵字來調用一個父類的構造方法。
如果沒有顯式指定構造方法，則會添加默認的 constructor 方法。
如果不指定一個構造函數(shù) (constructor) 方法，則使用一個默認的構造函數(shù) (constructor)。

對于基類，默認構造函數(shù)是：

constructor() {}

對于派生類（有祖先類）的默認構造函數(shù)：

constructor(...args) {
  super(...args);
}

例子

class Polygon {
  constructor() {
    this.name = "Polygon";
  }
}

class Square extends Polygon {
  constructor() {
    super();
  }
}

class Rectangle {}

Object.setPrototypeOf(Square.prototype, Rectangle.prototype);

console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true

let newInstance = new Square();
console.log(newInstance.name); //Polygon

類繼承（extends）

extends 關鍵字用于類聲明或者類表達式中，以創(chuàng)建一個類，該類是另一個類的子類,也叫派生類。
特點

派生類創(chuàng)建構造函數(shù)時要帶上super(),不然會報錯。
派生類會繼承類的方法和屬性，并可以在類實例和類體中使用。
派生類重寫的同名方法和屬性，將會覆蓋基類的方法和屬性。

class Animal {
  name = "";
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log("吃東西");
  }
}
class Cat extends Animal {
  constructor(name, color) {
    super(name);
    //  通過this可獲取祖先類的屬性
    this.color = color;
  }
  skill() {
    console.log(this.name + "抓老鼠");
  }
  eat2() {
    //  通過this可獲取祖先類的方法
    this.eat();
    console.log(`${this.color}貓` + this.name + "吃東西");
  }
}
const tom = new Cat("湯姆", "skyblue");
tom.eat2(); //  繼承Animal的方法
tom.skill();

類體中的修飾詞

私有屬性和方法(#)

類屬性在默認情況下是公有的，但可以使用增加哈希前綴 # 的方法來定義私有類字段（私有屬性和方法統(tǒng)稱私有字段）。

class ClassWithPrivateField {
  #privateField;
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return "hello world";
  }
}

class ClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD;
}

class ClassWithPrivateStaticMethod {
  static #privateStaticMethod() {
    return "hello world";
  }
}

私有字段分為私有實例字段和私有靜態(tài)字段：

私有實例字段使用 #名稱（發(fā)音為“哈希名稱”）聲明，這些名稱以 # 開頭。即 # 是名稱本身的一部分，聲明和訪問時也需要加上。它只能在類體中訪問和修改，不能在外面直接使用和修改。
私有靜態(tài)字段。在私有實例字段前面加 static。在類體中只能通過類本身調用和修改。

class Obj {
  #name = ""; //  私有，只能在里面使用
  static #age = 18; //  私有，只能在里面被類本身使用
  constructor(name, age) {
    this.#name = name;
    Obj.#age = age;
  }
  base() {
    console.log(`${this.#name}   ${Obj.#age}`);
  }
}
const obj1 = new Obj("hh", 20);
obj1.base();

靜態(tài)屬性和方法（static）

類（class）通過 static 關鍵字定義靜態(tài)方法。不能在類的實例上調用靜態(tài)方法，而應該通過類本身調用。這些通常是實用程序方法，例如創(chuàng)建或克隆對象的功能。

特點:

靜態(tài)方法調用同一個類中的其他靜態(tài)方法，可使用 this 關鍵字。
靜態(tài)方法調用直接在類上進行，不能在類的實例上調用。
非靜態(tài)方法中，不能直接使用 this 關鍵字來訪問靜態(tài)方法。而是要用類名來調用或者用構造函數(shù)的屬性來調用該方法。

class Tripple {
  static tripple(n = 1) {
    return n * 3;
  }
}

class BiggerTripple extends Tripple {
  static tripple(n) {
    return super.tripple(n) * super.tripple(n);
  }
}

console.log(Tripple.tripple()); // 3
console.log(Tripple.tripple(6)); // 18

let tp = new Tripple();

console.log(BiggerTripple.tripple(3)); // 81（不會受父類實例化的影響）
console.log(tp.tripple()); // 'tp.tripple 不是一個函數(shù)'.

公有字段

公有靜態(tài)字段和公有實例字段都是可編輯、可枚舉和可配置的屬性。因此，不同于私有對應值（private counterpart）的是，它們參與原型的繼承。
默認就是公有字段?？梢栽陬悓ο髮嵗惺褂煤托薷?。

Static initialization blocks

靜態(tài)初始化塊在類中聲明。
特點：

在類體中用static修飾的{}括號內容區(qū)域。里面this指向類的構造函數(shù)對象，可以使用this調用其他公共靜態(tài)字段。
{}內可以聲明變量，這包括 var、function、const 和 let 聲明。
可以有多個靜態(tài)初始化塊。

class MyClass {
  static field1 = console.log("static field1");
  static {
    console.log("static block1");
  }
  static field2 = console.log("static field2");
  static {
    console.log("static block2");
  }
}
// 'static field1'
// 'static block1'
// 'static field2'
// 'static block2'

如何從類外的對象訪問類的私有實例字段。

let getDPrivateField;

class D {
  #privateField;
  constructor(v) {
    this.#privateField = v;
  }
  static {
    getDPrivateField = (d) => d.#privateField;
  }
}

console.log(getDPrivateField(new D("private"))); // 'private'