Level class vs. level instance

Termasuk bagian Pemrograman Berorientasi Objek dalam perjalanan JavaScript di Coddy. Pelajaran 31 dari 56.

Dalam class JavaScript, ada dua tingkat property dan method yang berbeda:

Tingkat instance: Property dan method yang dimiliki setiap object individual yang dibuat dari class.
Tingkat class: Property dan method yang dimiliki class itu sendiri, bukan instance.

Mari pahami perbedaannya:

Pertama, mari kita lihat anggota tingkat instance. Buat class biasa dengan method instance:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

Buat sebuah instance dari class Car:

const myCar = new Car("Toyota");

Panggil method instance:

console.log(myCar.drive()); // output: "The Toyota is driving"

Perhatikan bahwa setiap instans dapat memanggil method drive, yang digunakan bersama oleh semua instans, dan di dalamnya this merujuk pada instans yang memanggilnya, sehingga method tersebut membaca property milik instans itu sendiri.

Sekarang, mari kita lihat member level class. Kita menambahkan method statis ke class kita. Gunakan kata kunci static sebelum nama method untuk membuat method yang menjadi milik class itu sendiri, bukan milik instance.

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

Method statis berguna untuk fungsi utilitas yang tidak bergantung pada data instance tertentu. Method statis dipanggil pada class itu sendiri, bukan pada instance:

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // Output: "Comparing Toyota with Honda"

Mencoba memanggil method statis pada sebuah instance akan menghasilkan error:

car1.compareModels(car1, car2); // Error: car1.compareModels bukan fungsi

Tantangan

Kamu diberi sebuah class Calculator yang hanya memiliki constructor. Tugasmu adalah menambahkan dua method:

1. Method Instance add(number)

Menambahkan angka yang diberikan ke nilai saat ini pada calculator
Memperbarui this.value dan mengembalikan nilai baru
*Dipanggil pada instance calculator: calc.add(3)

2. Method Static multiply(num1, num2)

Menerima dua angka dan mengembalikan hasil perkaliannya
TIDAK menggunakan this (method static tidak memiliki data instance)
*Dipanggil langsung pada class Calculator: Calculator.multiply(4, 6)

Coba sendiri

import { Calculator } from './calculator.js';


// Jangan ubah kode di bawah ini
const calc = new Calculator(5);        // Membuat kalkulator dengan nilai = 5
const result1 = calc.add(3);           // Seharusnya menambahkan 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Seharusnya mengalikan 4 × 6 = 24
console.log(result1);                   // Hasil yang diharapkan: 8
console.log(result2);                   // Hasil yang diharapkan: 24