靜態方法

Frontend SELF TW
等級 40 , 課堂 1
開放

8.1 宣告靜態方法

在JavaScript中,靜態方法是定義在類別本身上的方法,而不是在其實例上。它們直接在類別上調用,而不是在由該類別創建的物件上。靜態方法常用於創建與類別相關但不與特定物件相關的輔助函數。

靜態方法 使用關鍵字 static 在類別體內定義方法。

例子:

  • 方法 addmultiply 使用關鍵字 static 宣告為靜態
  • 這些方法直接在類別 MathHelper 上調用,而不是在其實例上
JavaScript
    
      class MathHelper {
        static add(a, b) {
          return a + b;
        }

        static multiply(a, b) {
          return a * b;
        }
      }

      console.log(MathHelper.add(5, 3)); // 8
      console.log(MathHelper.multiply(5, 3)); // 15
    
  

8.2 使用靜態方法

靜態方法在以下場景中很有用:

  1. 輔助函數:靜態方法可用於創建實用性函數,執行與類別相關的操作。
  2. 工廠方法:靜態方法可用於依據特定邏輯創建類別實例。
  3. 資料處理:靜態方法可用於處理與類別相關的資料,但不需要創建類別實例。

輔助函數範例:

  • 類別 StringUtil 包含靜態方法 capitalizereverse,用於操作字串
  • 這些方法直接在類別 StringUtil 上調用
JavaScript
    
      class StringUtil {
        static capitalize(str) {
          return str.charAt(0).toUpperCase() + str.slice(1);
        }

        static reverse(str) {
          return str.split('').reverse().join('');
        }
      }

      console.log(StringUtil.capitalize('hello')); // "Hello"
      console.log(StringUtil.reverse('hello')); // "olleh"
    
  

工廠方法範例:

靜態方法 fromObject 從資料物件創建類別 Car 的實例。

JavaScript
    
      class Car {
        constructor(brand, model) {
          this.brand = brand;
          this.model = model;
        }

        static fromObject(obj) {
          return new Car(obj.brand, obj.model);
        }
      }

      const carData = { brand: 'Toyota', model: 'Camry' };
      const car = Car.fromObject(carData);

      console.log(car.brand); // "Toyota"
      console.log(car.model); // "Camry"
    
  

8.3 靜態方法與繼承

在JavaScript中,靜態方法也可以由衍生類別繼承。衍生類別可以使用基類的靜態方法或重新定義它們。

靜態方法繼承範例:

  • 靜態方法 identify 定義在類別 Animal 中,並在類別 Dog 中重新定義
  • 在兩個類別中調用方法 identify
JavaScript
    
      class Animal {
        static identify() {
          return 'This is an animal';
        }
      }

      class Dog extends Animal {
        static identify() {
          return 'This is a dog';
        }
      }

      console.log(Animal.identify()); // "This is an animal"
      console.log(Dog.identify()); // "This is a dog"
    
  

8.4 在其他方法中調用靜態方法

靜態方法可以在類別的其他方法中使用類別名稱調用。

例子:

靜態方法 calculateArea 在另一個靜態方法 describeCircle 中調用,使用關鍵字 this,在此上下文中指代類別 Geometry

JavaScript
    
      class Geometry {
        static calculateArea(radius) {
          return Math.PI * radius * radius;
        }

        static describeCircle(radius) {
          const area = this.calculateArea(radius);
          return `A circle with radius ${radius} has an area of ${area.toFixed(2)}.`;
        }
      }

      console.log(Geometry.describeCircle(5)); // "A circle with radius 5 has an area of 78.54."
    
  

8.5 靜態方法與類別實例

靜態方法不能在類別的實例上調用。在實例上調用靜態方法會導致錯誤。

例子:

靜態方法 add 調用於類別 Calculator,而不是其實例 calc 上。

JavaScript
    
      class Calculator {
        static add(a, b) {
          return a + b;
        }
      }

      const calc = new Calculator();
      console.log(Calculator.add(3, 4)); // 7

      console.log(calc.add(3, 4)); // 錯誤: calc.add 不是一個函數
    
  
留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION