javascript的oop寫法-前端問答-PHP中文網

在Web開發中，JavaScript已經成為一門非常流行的程式語言。在JavaScript中，物件導向程式設計（OOP）是一個重要的概念。使用OOP，可以將程式碼結構化並減少程式碼的重複性，從而更易於維護和擴展。本文將介紹JavaScript中OOP的寫法。

原型（prototype）和建構子（constructor）

#在JavaScript中，一個物件的屬性和方法可以透過原型來共享，而建構函式則用於建立一個新物件並初始化其屬性。以下是一個使用建構函式和原型的簡單範例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function() {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

var person1 = new Person("John", 30);
var person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

登入後複製

在上面的範例中，我們定義了一個Person建構函數，初始化了name#和age屬性。然後，我們使用Person.prototype為每個Person物件新增了一個sayHi方法，這個方法可以被所有Person物件共享。最後，我們創建了兩個Person對象，並呼叫了它們的sayHi方法。

類別（class）

在ES6中，JavaScript引入了類別的概念，並使用關鍵字class來實作。類別提供了一種更簡潔、更易於理解的語法，用於定義物件。

以下是一個使用類別的例子：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}

let person1 = new Person("John", 30);
let person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

登入後複製

在上面的例子中，我們使用class關鍵字定義了一個Person類，並在constructor方法中初始化了name和age屬性。然後，我們定義了一個sayHi方法，用來輸出一個招呼。最後，我們創建了兩個Person對象，並呼叫了它們的sayHi方法。

繼承（inheritance）

在OOP中，繼承是指從一個已有的物件中派生出一個新的對象，新物件繼承了原來的對象的屬性和方法。在JavaScript中，繼承可以透過使用prototype和class來實現。

以下是使用prototype實作繼承的範例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function () {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayMajor = function() {
  console.log("My major is " + this.major + ".");
}

let person1 = new Person("John", 30);
let student1 = new Student("Mary", 25, "Computer Science");

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
student1.sayHi(); // Hi, my name is Mary and I'm 25 years old.
student1.sayMajor(); // My major is Computer Science.

登入後複製

在上面的範例中，我們定義了一個Person建構函數，在原型中加入了sayHi方法。另外，我們定義了一個Student建構函數，透過使用call方法呼叫了Person建構函式來初始化name#和 age屬性，並且新增了一個major屬性。然後，我們使用Object.create方法建立了一個Person.prototype的副本，並將其指定給Student.prototype##Student物件可以繼承Person物件的屬性和方法。最後，我們定義了一個sayMajor方法，用於輸出學生的專業。最終，我們創建了一個Person物件和一個Student對象，並呼叫了他們的方法。

以下是使用class實作繼承的範例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.")
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
  
  sayMajor() {
    console.log("My major is " + this.major + ".");
  }
}

let person1 = new Person("John", 30);
let student1 = new Student("Mary", 25, "Computer Science");

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
student1.sayHi(); // Hi, my name is Mary and I'm 25 years old.
student1.sayMajor(); // My major is Computer Science.

登入後複製

在上面的範例中，我們定義了一個Person類，在constructor方法中初始化了name和age屬性，並在sayHi方法中輸出了一個招呼。然後，我們使用extends關鍵字建立了一個Student類，並使用super關鍵字呼叫了Person類的 constructor方法來初始化name和age屬性，並加入了一個major屬性。最後，我們定義了一個sayMajor方法，用於輸出學生的專業。最終，我們創建了一個Person物件和一個Student對象，並呼叫了他們的方法。

結論：

在JavaScript中，OOP是一種非常重要的概念，使用物件、建構函數、原型和類別可以更好地組織程式碼和減少重複性。繼承可以透過原型和類別來實現。從ES6開始，JavaScript引入了關鍵字class，提供了一個更簡潔、更容易理解的語法，用於定義物件。無論何時，選擇正確的方法來編寫OOP程式碼都非常重要，因為這將在專案開發和維護中獲得重大的好處。

以上是javascript的oop寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章！