public 和私有類欄位[雙語]

• 本文來源: developers.google.com/web/updates…
• 本文作者: mathias V8 JavaScript whisperer
• 文章 LISENCE: creativecommons.org/licenses/by…
• 文章中的程式碼 LISENCE: www.apache.org/licenses/LI…
• 譯者: 蔣璇, 就職於 丁香園, 任職 Insight 醫藥資料庫 前端開發. 開源社群熱愛者

const counter = new IncreasingCounter();
counter.value;
// logs 'Getting the current value!'
// → 0
counter.increment();
counter.value;
// logs 'Getting the current value!'
// → 1
複製程式碼

class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}
複製程式碼

const counter = new IncreasingCounter();
counter.value;
// logs 'Getting the current value!'
// → 0

// Nothing stops people from reading or messing with the
// `_count` instance property. ?
counter._count;
// → 0
counter._count = 42;
counter.value;
// logs 'Getting the current value!'
// → 42
複製程式碼

class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}
複製程式碼

class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#count;
  }
  increment() {
    this.#count++;
  }
}
複製程式碼

const counter = new IncreasingCounter();
counter.#count;
// → SyntaxError
counter.#count = 42;
// → SyntaxError
複製程式碼

class FakeMath {
  // `PI` is a static public property.
  static PI = 22 / 7; // Close enough.

  // `#totallyRandomNumber` is a static private property.
  static #totallyRandomNumber = 4;

  // `#computeRandomNumber` is a static private method.
  static #computeRandomNumber() {
    return FakeMath.#totallyRandomNumber;
  }

  // `random` is a static public method (ES2015 syntax)
  // that consumes `#computeRandomNumber`.
  static random() {
    console.log('I heard you like random numbers…')
    return FakeMath.#computeRandomNumber();
  }
}

FakeMath.PI;
// → 3.142857142857143
FakeMath.random();
// logs 'I heard you like random numbers…'
// → 4
FakeMath.#totallyRandomNumber;
// → SyntaxError
FakeMath.#computeRandomNumber();
// → SyntaxError
複製程式碼

class Animal {
  constructor(name) {
    this.name = name;
  }
}
複製程式碼

class Cat extends Animal {
  constructor(name) {
    super(name);
    this.likesBaths = false;
  }
  meow() {
    console.log('Meow!');
  }
}
複製程式碼

class Cat extends Animal {
  likesBaths = false;
  meow() {
    console.log('Meow!');
  }
}
複製程式碼

譯者注:

• Q: 為什麼沒有翻譯 public 這個單詞?
• A: 用了很多翻譯工具嘗試翻譯 public class fields, 結果都是 公共類欄位, 包括 bing 翻譯, google translate. 但是我總感覺這個翻譯不夠嚴謹, public 這裡應該是指例項可以訪問的欄位, 應該是公開欄位. 並不是一些例項公共的欄位. 所以譯者保留了這個單詞, 不希望有些人在閱讀的時候會有誤解. 如果有什麼意見, 歡迎評論.
• Q: 為什麼 Luckily 這個單詞也沒有翻譯
• A: 為了熟悉這個單詞, 懸浮在該英文單詞之上即可看到中文, 該單詞的中文意思為: 幸運的是

譯者在翻譯的時候保留了英語原文, 希望給你一個原滋原味的閱讀體驗並且能熟悉一些常見的英文.

希望有讀者可以指出我的翻譯錯誤, 感激不盡.

譯文轉載請註明出處, 文中所有資源 LISENCE 均跟隨源資源.

其他雙語譯文:

• Chrome 71 新特性[雙語+視訊]
• 開發者工具的新特性 (Chrome 71) [雙語+視訊]
• React 16.x 藍圖[雙語版]