Javascript類詳解

一、基本概念

Javascript是一種基於對象和事件驅動的腳本語言，最初設計用於瀏覽器端的腳本語言，用於動態增加交互性和用戶體驗。Javascript類是Javascript中進行面向對象編程的基礎，它是一種抽象的數據類型，它對外界提供各種各樣的數據和方法，並具有封裝、繼承和多態三大特徵。

在Javascript類中，重要的概念有實例、屬性和方法。實例是Javascript類派生出來的對象，屬性是實例中存儲的數據值，方法是實例中執行的函數，它們可以在Javascript類中定義。

Javascript類的定義可以通過構造函數、工廠函數和類聲明三種方式實現。其中構造函數是一種傳統的定義方式，工廠函數則是一種簡單實用的方式，而類聲明則是ES6中新增的一種定義方式。

1.構造函數的定義方式

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
}
var p = new Person("Tom", 20);
p.sayHello();

上述代碼中，我們定義了一個Person類，它有兩個屬性name和age，和一個方法sayHello。使用關鍵字new創建一個新的Person實例，並調用sayHello方法。

2.工廠函數的定義方式

function createPerson(name, age) {
  var person = {
    name: name,
    age: age,
    sayHello: function() {
      console.log("Hello, my name is " + this.name);
    }
  };
  return person;
}
var p = createPerson("Tom", 20);
p.sayHello();

上述代碼中，我們定義了一個createPerson函數，它返回一個新的Person實例對象，這個對象有兩個屬性name和age，和一個方法sayHello。調用createPerson函數創建新的實例對象，並調用sayHello方法。

3.類聲明的定義方式

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}
let p = new Person("Tom", 20);
p.sayHello();

上述代碼中，我們使用ES6的新特性class聲明了一個Person類，它有兩個屬性name和age，和一個方法sayHello。使用關鍵字new創建一個新的Person實例，並調用sayHello方法。

二、繼承和多態

1.繼承

繼承是面向對象編程中的重要特性，它可以讓子類擁有父類中的屬性和方法，並可以添加自己的屬性和方法。在Javascript類中，可以通過prototype鏈來實現繼承。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
}

function Student(name, age, school) {
  Person.call(this, name, age); //調用父類構造函數繼承屬性
  this.school = school;
}
Student.prototype = Object.create(Person.prototype); //通過prototype鏈繼承方法
Student.prototype.constructor = Student; //修正構造函數指向
Student.prototype.sayHello = function() { //重寫父類方法
  console.log("Hello, my name is " + this.name + ", I study in " + this.school);
}

var s = new Student("Lily", 18, "MIT");
s.sayHello();

上述代碼中，我們定義了一個Person類和一個Student類，使用Person.call方法繼承Person類的屬性，使用Object.create方法創建了一個繼承自Person類原型的Student類，並重寫了Person類中的sayHello方法。使用關鍵字new創建一個新的Student實例，並調用sayHello方法。

2.多態

多態是面向對象編程中的另一種重要特性，它可以讓不同的對象對同一消息作出相應，從而實現程序的動態性和靈活性。在Javascript類中，可以通過重寫父類方法來實現多態。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
}

function Student(name, age, school) {
  Person.call(this, name, age); //調用父類構造函數繼承屬性
  this.school = school;
}
Student.prototype = Object.create(Person.prototype); //通過prototype鏈繼承方法
Student.prototype.constructor = Student; //修正構造函數指向
Student.prototype.sayHello = function() { //重寫父類方法
  console.log("Hello, my name is " + this.name + ", I study in " + this.school);
}

function sayHello(p) { //多態通用方法
  if (typeof p.sayHello === "function") {
    p.sayHello();
  }
}

var p = new Person("Tom", 20);
var s = new Student("Lily", 18, "MIT");
sayHello(p);
sayHello(s);

上述代碼中，我們定義了一個sayHello方法，它會根據對象的不同調用相應的sayHello方法。使用關鍵字new創建新的Person和Student實例，並調用sayHello方法。

三、ES6新特性

ES6是Javascript的重要更新，它新增了一些語言特性，如箭頭函數、模板字面量、解構賦值、for…of循環、let和const關鍵字、類和模塊等。在Javascript類中，ES6的類和模塊是最重要的新特性。

1.類的定義

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}

let p = new Person("Tom", 20);
p.sayHello();

ES6中新增的關鍵字class可以用來定義一個類，它更加簡潔明了，讓Javascript類的定義更加貼近傳統面向對象編程語言的風格。

2.模塊的定義

//math.js
export function square(x) {
  return x * x;
}
export function cube(x) {
  return x * x * x;
}

//main.js
import { square, cube } from "./math.js";
console.log(square(3)); //9
console.log(cube(3)); //27

ES6中新增的關鍵字export和import可以用來定義和引用模塊，它更加簡潔易懂，讓Javascript的模塊化編程更加方便和實用。