JS class語法糖的深入剖析

2022-07-06 18:03:14

引言

在很早以前，寫過一篇文章 “類”設計模式和“原型”設計模式——“複製”和“委託”的差異，大致意思就是說：程式碼複用，也就是繼承、重寫，有兩種思路：1. 物件導向的類繼承；2. 基於 JavaScript 原型鏈的原型繼承；前者的主要特點是：複製，通俗來說就是把變數、屬性再複製一份，後者的主要特點是：委託，通過屬性的查詢來實現的。

後來呢，深入瞭解 JavaScript 高階程式設計中的繼承，包括建構函式繼承、原型繼承、組合繼承、寄生組合繼承，都有各自的缺點，有興趣的朋友，可以看我這篇文章。

還有，本瓜特別記住：維基對 JavaScript 起源的解釋

JavaScript的語言設計主要受到了Self（一種原型程式設計語言）和Scheme（一門函數語言程式設計語言）的影響。在語法結構上它又與C語言有很多相似。

最後，我的小結呢就是：JavaScript 本身的設計就是“通過原型委託”來實現程式碼複用的，結果 ES6 搞出了個 class 作為語法糖，其本身還是基於原型鏈，但又是為了實現物件導向，物件導向是基於 class 類那種“複製”來實現程式碼複用。

類和原型，是兩種不同的東西，JS class 將二者混在了一起，別不彆扭？

後來也看到一些文章說在 JS 中使用 class 類會造成一些困擾，所以更加堅定要減少使用 class 。

而實際上，本篇題目是：JS class 並不只是簡單的語法糖，所以，本篇並不是為了說它不好，而是要說它的好的！

來吧，展翅！

class 第一個好：私有變數

如果不用 class , 還有什麼更優雅的方法實現以下子類的私有變數嗎？

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  } // Person.constructor
  get FullName () {
    return this.firstName + " " + this.lastName;
  }
} // Person
class Employee extends Person {
  #salary;
  constructor(firstName, lastName, salary) {
    super(firstName, lastName);
    this.salary = salary;
  }
  get salary() {
    return this.#salary;
  }
  set salary(salary) {
    this.#salary = salary;
    console.log("Salary changed for " + this.fullName + " : $" + this.salary);
  }
} // Employee

設想下，我們用原型鏈的思路模擬（物件）：

const Person = {
  set givenName(givenName) {
    this._givenName = givenName;
  },
  set familyName(familyName) {
    this._familyName = familyName;
  },
  get fullName() {
    return `${this._givenName} ${this._familyName}`;
  }
};
const test = Person; // 這裡假設用 物件 模擬 類
test.givenName = "Joe";
test.familyName = "Martinez";
console.log("test.fullName", test.fullName); // Joe Martinez
console.log("test.givenName", test.givenName); // undefined
console.log("test._givenName", test._givenName); // Joe

沒有實現私有屬性 _givenName

而 class 可以將值存為私有，使得物件外部不能修改：

class 第二個好：super 繼承

class 可以通過 super 更優雅的實現繼承、和重寫，比如：

class Cash {
  constructor() {
    this.total = 0;
  }
  add(amount) {
    this.total += amount;
    if (this.total &lt; 0) this.total = 0;
  }
} // Cash
class Nickles extends Cash {
  add(amount) {
    super.add(amount * 5);
  }
} // Nickles

如果是按照老樣子，原型鏈，它可能是這樣的：

const Cash = function() {
  this.total = 0;
}; // Cash
Cash.prototype = {
  add : function(amount) {
    this.total += amount;
    if (this.total < 0) this.total = 0;
  }
}; // Cash.prototype
const Nickles = function() {
  Object.assign(this, new Cash());
  this.add = function(amount) {
    Cash.add.apply(this, amount);
  };
} // Nickles

讀起來有點亂，this 指來指去，還有在建構函式中手動做的 assign 操作，這會增加程式碼執行耗時。

綜上兩點，JS class 還是非常有使用它的價值的，不用逃避，把它用在合適的場景，肯定會發現其魅力~~

以上就是JS class語法糖的深入剖析的詳細內容，更多關於JS class語法糖的資料請關注it145.com其它相關文章！

JS class語法糖的深入剖析

目錄

引言

class 第一個好：私有變數

class 第二個好：super 繼承

熱門文章