JS?class語法糖的深入剖析

更新時間：2022年07月06日 15:52:35 作者：掘金安東尼

這篇文章主要為大家介紹了JS?class語法糖的深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

在很早以前，寫過一篇文章 “類”設計模式和“原型”設計模式——“復制”和“委托”的差異，大致意思就是說：代碼復用，也就是繼承、重寫，有兩種思路：1. 面向對象的類繼承；2. 基于 JavaScript 原型鏈的原型繼承；前者的主要特點是：復制，通俗來說就是把變量、屬性再復制一份，后者的主要特點是：委托，通過屬性的查找來實現(xiàn)的。

后來呢，深入了解 JavaScript 高級程序設計中的繼承，包括構造函數(shù)繼承、原型繼承、組合繼承、寄生組合繼承，都有各自的缺點，有興趣的朋友，可以看我這篇文章。

還有，本瓜特別記?。壕S基對 JavaScript 起源的解釋

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

最后，我的小結呢就是：JavaScript 本身的設計就是“通過原型委托”來實現(xiàn)代碼復用的，結果 ES6 搞出了個 class 作為語法糖，其本身還是基于原型鏈，但又是為了實現(xiàn)面向對象，面向對象是基于 class 類那種“復制”來實現(xiàn)代碼復用。

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

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

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

來吧，展翅！

class 第一個好：私有變量

如果不用 class , 還有什么更優(yōu)雅的方法實現(xiàn)以下子類的私有變量嗎？

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

沒有實現(xiàn)私有屬性 _givenName

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

class 第二個好：super 繼承

class 可以通過 super 更優(yōu)雅的實現(xiàn)繼承、和重寫，比如：

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 指來指去，還有在構造函數(shù)中手動做的 assign 操作，這會增加代碼執(zhí)行耗時。

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

以上就是JS class語法糖的深入剖析的詳細內容，更多關于JS class語法糖的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: