Konsep OOP JavaScript: Berasaskan Kelas lwn Berasaskan Prototaip

Untuk menulis blog terperinci tentang konsep Pengaturcaraan Berorientasikan Objek (OOP) JavaScript dan prototaip, kami akan melalui fungsi kelas pertama, dahulu -contoh kelas, warisan, polimorfisme, pengkapsulan dan abstraksi, menerangkan kedua-duanya berasaskan kelas dan pendekatan berasaskan prototaip.

---

JavaScript adalah unik kerana ia boleh menyokong kedua-dua OOP berasaskan kelas (diperkenalkan dalam ES6) dan OOP berasaskan prototaip (cara asal JavaScript mengendalikan OOP). Blog ini akan menyelami konsep OOP utama seperti fungsi kelas pertama, contoh kelas pertama, warisan, polimorfisme, enkapsulasi dan abstraksi menggunakan kedua-dua pendekatan.

1. Fungsi Kelas Pertama

Dalam JavaScript, fungsi ialah warga kelas pertama. Ini bermakna fungsi boleh:

• Ditugaskan kepada pembolehubah
• Lulus sebagai hujah
• Dikembalikan daripada fungsi lain

Sudah tentu! Mari kita pecahkan catatan blog untuk merangkumi kedua-dua fungsi kelas pertama dan contoh kelas pertama menggunakan kedua-dua pendekatan berfungsi dan berasaskan kelas dalam JavaScript. Ini akan memberikan pemahaman yang jelas tentang konsep ini dalam konteks Pengaturcaraan Berorientasikan Objek (OOP).

Pendekatan Fungsian

Contoh: Fungsi Kelas Pertama

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10

Penjelasan:

• Fungsi boleh disimpan, dihantar dan dikembalikan seperti nilai lain, mempamerkan fungsi kelas pertama.

Pendekatan Berasaskan Kelas

Walaupun fungsi adalah warga kelas pertama, kami juga boleh mencipta kelas yang meniru gelagat serupa.

Contoh: Fungsi Kelas Pertama dalam Konteks Kelas

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

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!

Penjelasan:

• Kelas Greeter menunjukkan gelagat seperti fungsi kelas pertama dengan merangkum kaedah salam, yang boleh dihantar ke fungsi lain (seperti logGreeting).

---

2. Contoh Kelas Pertama

Instance objek atau kelas juga boleh dianggap sebagai warga kelas pertama. Ia boleh ditugaskan kepada pembolehubah, diluluskan sebagai argumen dan disimpan dalam koleksi.

Seperti fungsi, kejadian objek atau kelas juga boleh dianggap sebagai warga kelas pertama. Mereka boleh menjadi:

• Ditugaskan kepada pembolehubah
• Lulus sebagai hujah
• Dikembalikan daripada fungsi
• Disimpan dalam koleksi seperti tatasusunan

Pendekatan Fungsian

Contoh: Contoh Kelas Pertama

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10

Penjelasan:

• Di sini, myCar dan yourCar ialah contoh bagi pembina fungsi Kereta. Ia boleh dihantar ke fungsi dan disimpan dalam pembolehubah.

Pendekatan Berasaskan Kelas

Contoh: Contoh Kelas Pertama dalam Konteks Kelas

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

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!

Penjelasan:

• Dalam contoh ini, myCar dan yourCar ialah contoh kelas Kereta, dan sama seperti pendekatan berfungsi, ia boleh dihantar ke fungsi dan dimanipulasi.

---

3. Warisan

Warisan Berasaskan Kelas membolehkan anda mencipta kelas baharu yang mewarisi sifat dan kaedah daripada kelas sedia ada menggunakan kata kunci lanjutan.

Contoh Berasaskan Kelas:

function Car(make, model) {
  this.make = make;
  this.model = model;

  this.startEngine = function() {
    console.log(`${this.make} ${this.model} engine started.`);
  };
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla

Contoh Berasaskan Prototaip:

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

  startEngine() {
    console.log(`${this.make} ${this.model} engine started.`);
  }
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla

Penjelasan:

• Warisan berasaskan kelas penggunaan lanjutan untuk diwarisi daripada kelas induk, manakala warisan berasaskan prototaip menggunakan Object.create untuk memautkan objek.

---

4. Polimorfisme

Polymorphism membenarkan objek yang berbeza untuk menentukan versi mereka sendiri bagi kaedah yang sama, yang boleh dipanggil pada objek jenis induk.

Contoh Berasaskan Kelas:

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

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.

Contoh Berasaskan Prototaip:

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

function Dog(name) {
  Animal.call(this, name);  // Inherit properties
}

Dog.prototype = Object.create(Animal.prototype);  // Inherit methods
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

const myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.

Penjelasan:

• Polymorphism membenarkan kedua-dua objek berasaskan kelas dan berasaskan prototaip untuk menentukan versi kaedah bercakap mereka sendiri sambil masih mewarisi daripada jenis induk.

---

5. Enkapsulasi

Encapsulation melibatkan penyembunyian butiran dalaman objek dan mendedahkan perkara yang perlu sahaja. Dalam JavaScript, kami mencapai ini dengan menggunakan medan peribadi (dengan #) dalam OOP berasaskan kelas atau penutupan dalam OOP berasaskan prototaip.

Contoh Berasaskan Kelas:

class Animal {
  speak() {
    console.log("Animal makes a sound.");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks.");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Cat meows.");
  }
}

const animals = [new Dog(), new Cat()];

animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.

Contoh Berasaskan Prototaip:

function Animal() {}

Animal.prototype.speak = function() {
  console.log("Animal makes a sound.");
};

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.speak = function() {
  console.log("Dog barks.");
};

function Cat() {}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.speak = function() {
  console.log("Cat meows.");
};

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.

Penjelasan:

• Encapsulation berasaskan kelas menggunakan medan peribadi (diperkenalkan dalam ES6) untuk menyembunyikan data, manakala enkapsulasi berasaskan prototaip mencapai privasi melalui penutupan.

---

6. Abstraksi

Abstraksi menyembunyikan logik yang kompleks dan hanya mendedahkan butiran yang diperlukan. Ia boleh dicapai dengan mengabstraksi butiran dalaman dan mendedahkan kaedah penting.

Contoh Berasaskan Kelas:

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10

Contoh Berasaskan Prototaip:

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

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!

Penjelasan:

• Kedua-dua pendekatan merangkumi kerumitan mengurus tahap bateri, hanya mendedahkan kaedah yang diperlukan untuk interaksi.

---

Kesimpulan

Memahami perbezaan dan persamaan antara berasaskan kelas dan berasaskan prototaip OOP dalam JavaScript meningkatkan kemahiran pengaturcaraan anda. Fungsi dan kejadian kelas pertama, pewarisan, polimorfisme, enkapsulasi dan abstraksi ialah konsep asas yang boleh anda manfaatkan untuk menulis kod yang lebih bersih dan lebih boleh diselenggara.

Walaupun sintaks berasaskan kelas moden (diperkenalkan dalam ES6) lebih mudah dibaca dan biasa kepada pembangun yang datang dari bahasa OOP lain, pendekatan berasaskan prototaip adalah lebih asas kepada JavaScript. tingkah laku asas.

Blog ini menunjukkan cara konsep teras OOP — fungsi kelas pertama, contoh kelas pertama, warisan, polimorfisme, enkapsulasi, dan abstraksi — boleh dicapai dalam kedua-dua paradigma. Sama ada anda menggunakan kelas atau prototaip, JavaScript menawarkan mekanisme yang teguh untuk melaksanakan OOP dengan cara yang fleksibel dan berkuasa.

---

Atas ialah kandungan terperinci Konsep OOP JavaScript: Berasaskan Kelas lwn Berasaskan Prototaip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!