JS 如何实现类

先知道一个东西：JS 对象无非就两种属性，一种是自身属性，一种是共享属性

那开始吧

---

JS 实现类，有且只有两种写法：

• 使用原型
• 使用 class

其实 JS 没有类，尤其是在 ES5 的时候，没有 class
class 在 JS 中只是保留字，你不能声明个变量叫 class，但这个 class 并没有什么功能
那为什么前端程序员那么执着于在 JS 中实现类呢？

历史溯源：

• 最开始的一批前端程序员，主要是从 java 程序员转过来的
• java 程序员「以为」自己会 JS，认为 JS 是随随便便就可以学会的
• 所以不会花时间专门去学 JS
• java 程序员翻开 JS 的书发现：嗯？JS 没有类？我 java 程序员怎么能容忍代码里没有 class 这种东西？
• 所以想尽办法在 JS 中用各种奇奇怪怪的办法实现「类」
• 这就是在《JavaScript 高级程序设计3/4》中看到奇怪代码的来历
• 那个时候：谁能够在 JS 中把 java 的类实现得最好，谁就是牛逼的前端程序员
• 但在前端逐渐专业化之后，就开始抛弃这种传统

看看 React 现在的代码怎么写：

会发现没有 class，以前是有 class 的
现在可以使用这样的 state，看第 2 行代码

const App = () => {
  const [n] = React.useState(0)
  return <div></div>
}

class 和 this 是现在一部分前端在极度避免的东西
因为以前 java 对前端的影响太深厚了，我们必须极力地去把 java 那部分的影响给撇清
这样 JS 才能回归到原始最适合它的状态，不要在 JS 里搞这些类了

说句实话，我从来没在 JS 中实现继承

那么，究竟如何实现类呢？

方法一：使用原型

• 把不可共享的东西放在函数里面
• 把共有属性写在原型上面

function girlFriend(name) {
  this.name = name
  this.eyeNumber = 2
}
girlFriend.prototype.say = function () {
  console.log(`嘤嘤嘤~我是${this.name}，我有${this.eyeNumber}只眼睛`)
} 

const girlFriend1 = new girlFriend('女友一号') // girlFriend 函数就是一个类
girlFriend1.say()

5 6 7 这几行代码写在 girlFriend 函数外面是因为都一样的，所以写在原型里，写在 girlFriend 函数里面的话，如果 new 几千万个 girlFriend，会很占内存

方法二：使用 class

• 把本身的属性写在constructor里面
• 把共有属性写在constructor外面

class Dog {
  constructor(name) {
    this.name = name
    this.legsNumber = 4
  }
  say() {
    console.log(`汪汪汪~ 我是${this.name}，我有${this.legsNumber}条腿`)
  }
  run() {
    console.log(`${this.legsNumber}条腿跑起来`)
  }
}

const dog1 = new Dog('旺财')
dog1.say()

我感觉 class 的语法有点复杂，更喜欢用原型

但是在 TypeScript 里用原型就不太好写，TypeScript 里就尽量用 class 吧

实际开发中用我不用类的

完。