ES6的Public属性和Private属性

这是一个简单的 Player 类，它包含了咱们讨论的有关 ES6 类的全部内容。

JavaScript 代码:

class Player {
  constructor() {
    this.points = 0
    this.assists = 0
    this.rebounds = 0
    this.steals = 0
  }
  addPoints(amount) {
    this.points += amount
  }
  addAssist() {
    this.assists++
  }
  addRebound() {
    this.rebounds++
  }
  addSteal() {
    this.steals++
  }
}

咱们看看这段代码，咱们能不能让它更直观一点呢？方法很好理解，都很天然。那么构造函数呢？什么是 constructor ？为何咱们必须在这里定义实例值？如今，这些问题已经有了答案，可是为何咱们不能向实例中添加 state(状态) ，就像方法那样？好比：

JavaScript 代码:

class Player {
  points = 0
  assists = 0
  rebounds = 0
  steals = 0
  addPoints(amount) {
    this.points += amount
  }
  addAssist() {
    this.assists++
  }
  addRebound() {
    this.rebounds++
  }
  addSteal() {
    this.steals++
  }
}

事实上，这是 Class Fields Declaration 提案的基础，该提案目前处于 TC-39 流程的 第3阶段 。 此提议容许您直接将实例属性添加为类的属性，而无需使用构造方法。 很是漂亮，可是若是咱们看一些 React 代码，这个提案真的很棒。 这是一个典型的 React 组件。 它具备本地 state(状态) ，一些方法以及一些静态属性被添加到类中。

JavaScript 代码:

class PlayerInput extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: ''
    }
 
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      username: event.target.value
    })
  }
  render() {
    ...
  }
}
 
PlayerInput.propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  onSubmit: PropTypes.func.isRequired,
}
 
PlayerInput.defaultProps = {
  label: 'Username',
}

让咱们看看新的 Class Fields 提议如何改进上面的代码首先，咱们能够将 state(状态) 变量从构造函数中取出，并将其直接定义为类的属性（或“字段”）。

JavaScript 代码:

class PlayerInput extends Component {
  state = {
    username: ''
  }
  constructor(props) {
    super(props)
 
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      username: event.target.value
    })
  }
  render() {
    ...
  }
}
 
PlayerInput.propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  onSubmit: PropTypes.func.isRequired,
}
 
PlayerInput.defaultProps = {
  label: 'Username',
}

很酷，但没什么好兴奋的。 咱们继续吧。 在上一篇文章中，咱们讨论了如何使用 static 关键字向类自己添加静态方法。 可是，根据 ES6 类规范，这只对方法有效，对于值则无效。 这就是为何在上面的代码中，咱们必须在咱们定义完 PlayerInput 以后，再在 class 外面将 propTypes 和 defaultProps 添加到 PlayerInput ，而不是在 class 体内定义他们的缘由。 再说一遍，它们不能像静态方法那样直接放入 class 体内呢? 好消息是，这也包含在 Class Fields 提案中。 因此如今不只能够在类体中定义静态方法，还能够定义静态值。 这对咱们的代码意味着咱们能够将 propTypes 和 defaultProps 移动到 class 体内定义。

JavaScript 代码:

class PlayerInput extends Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onSubmit: PropTypes.func.isRequired,
  }
  static defaultProps = {
    label: 'Username'
  }
  state = {
    username: ''
  }
  constructor(props) {
    super(props)
 
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      username: event.target.value
    })
  }
  render() {
    ...
  }
}

这样代码看上去好多了，但咱们仍然有丑陋的 constructor 方法和 super 调用。 一样，咱们如今须要构造函数的缘由是为了将 handleChange 方法绑定到恰当的上下文中。 若是咱们能找到另外一种方法来确保始终在恰当的上下文中调用 handleChange ，那么咱们能够摆脱掉 constructor 。

若是您之前使用过箭头函数，就会知道它们没有本身的 this 关键字。相反，this 关键字是按 lexically(词法) 绑定的。这是一种奇特的说法，当你在箭头函数中使用 this 关键字时，事情会按照你所指望的方式运行。利用这些知识并将其与 “Class Fields” 提案相结合起来，若是咱们将 handleChange 方法替换为箭头函数呢？这看起来有点奇怪，可是经过这样作，咱们能够解决绑定问题，由于，箭头函数是经过 lexically(词法) 绑定 this 的。

JavaScript 代码:

class PlayerInput extends Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onSubmit: PropTypes.func.isRequired,
  }
  static defaultProps = {
    label: 'Username'
  }
  state = {
    username: ''
  }
  handleChange = (event) => {
    this.setState({
      username: event.target.value
    })
  }
  render() {
    ...
  }
}

你看上面的代码，这比咱们开始的原始类要好得多，这都要感谢 “Class Fields” 提案，它将很快成为 EcmaScript 规范的一部分。

从开发者体验的角度来看，Class Fields 提案优点很明显。 然而，他们有一些缺点，不多被谈论。 在上一篇文章中，咱们讨论了 ES6 类实际上只是 Pseudoclassical Instantiation(伪类实例化) 模式的语法糖。也就是说，当你向类添加方法时，这就像在函数原型中添加方法同样。

JavaScript 代码:

class Animal {
  eat() {}
}
 
// 等价于
 
function Animal () {}
Animal.prototype.eat = function () {}

这是高效的，由于 eat 定义一次并在类的全部实例之间共享。 这与 Class Fields 有什么关系？ 好吧，正如咱们上面所看到的， Class Fields 被添加到实例中。 这意味着对于咱们建立的每一个实例，咱们将建立一个新的 eat 方法。

JavaScript 代码:

class Animal {
  eat() {}
  sleep = () => {}
}
 
// 等价于
 
function Animal () {
  this.sleep = function () {}
}
 
Animal.prototype.eat = function () {}

请注意 sleep 如何放在实例上，而不是放在 Animal.prototype 上。这是件坏事吗？嗯，有可能。在不进行度量的状况下对性能进行宽泛的描述一般不是一个好主意。您须要在应用程序中回答的问题是，您从 Class Fields 中得到的开发人员体验是否超过了潜在的性能损失。

若是你想在你的应用程序中使用咱们以前谈到的任何内容，你须要使用 babel-plugin-transform-class-properties 插件。

Private(私有) 属性 Class Fields 提案的另外一个内容时是 “private fields (私有属性)” 。 有时，当您构建一个类时，您但愿拥有不暴露给外界的私有值。 从历史上看， JavaScript 缺少真正私有值 的能力，因此咱们经过约定，用下划线标记它们。

JavaScript 代码:

class Car {
  _milesDriven = 0
  drive(distance) {
    this._milesDriven += distance
  }
  getMilesDriven() {
    return this._milesDriven
  }
}

在上面的示例中，咱们依靠 Car class（类）的实例经过调用 getMilesDriven 方法来获取汽车的里程数。可是，由于没有什么能使 _milesDriven成为私有的，因此任何实例均可以访问它。

JavaScript 代码:

const tesla = new Car()
tesla.drive(10)
console.log(tesla._milesDriven)

有个奇特的（hacky）方法，就是使用 WeakMaps 能够解决这个问题，但若是存在更简单的解决方案，那将会很好。 一样，Class Fields 提案正在拯救咱们。 根据提议，您可使用 ＃ 建立私有字段。 是的，你没有看错， ＃ 。 咱们来看看它对咱们的代码有什么影响，

JavaScript 代码:

class Car {
  #milesDriven = 0
  drive(distance) {
    this.#milesDriven += distance
  }
  getMilesDriven() {
    return this.#milesDriven
  }
}

咱们能够用速记语法更进一步简化

JavaScript 代码:

class Car {
  #milesDriven = 0
  drive(distance) {
    #milesDriven += distance
  }
  getMilesDriven() {
    return #milesDriven
  }
}
 
const tesla = new Car()
tesla.drive(10)
tesla.getMilesDriven() // 10
tesla.#milesDriven // Invalid

目前 有一个 PR 将私有属性添加到 Babel ，以便您能够在应用中使用它们。

英文原文：https://tylermcginnis.com/javascript-private-and-public-class-fields/