好文转载 - 应该在JavaScript中使用Class吗？ - 《程序开发笔记》

看似无处不在的OOP（前端中的陷阱）
JavaScript中使用Class的坑
工厂函数(factory functions)
- 项目中代码示例
- 对比class的定义
继承特性
关注代码表达性而不是死守教条主义
注意使用 class 的初衷
使用 class 的心智负担

转载于https://zhuanlan.zhihu.com/p/158956514

看似无处不在的OOP（前端中的陷阱）

OOP 即面向对象编程（Object Oriented Programming）毫无疑问是软件设计和发展中的一大进步。事实上，一些编程语言如 Java 、C++ 就是基于 OOP 的核心概念 class 开发出来。
OOP在业界中也的确被大量使用，尤其是的后端服务领域、桌面软件、移动APP开发等。
因此，OOP看起来在软件行业无处不在，在这种有点教条主义的氛围下，很多程序员甚至以为 class 是编程固有的概念 —— 然而并不是。
OOP 只是一套帮助开发者设计和编写软件的方法论，但并不代表它能解决所有领域的问题，也不是能在所有编程语言的任何场景下都适用。我们应避免陷入这种教条主义。

JavaScript中使用Class的坑

ES6之后，JavaScript引入class关键字，用于声明一个类，但是这样声明出来的类在底层还是使用了JavaScript的函数和原型链（模拟类的行为）

代码案例：

class Person {
  constructor (name) {
    this.name = name
    // this.talk = this.talk.bind(this)
  }
  talk(){
    console.log(`${this.name} says hello`)
  }
}
let p = new Person("es6")
p.talk()
// es6中class类存在一些问题，按照下面定义对象后再调用talk会使的this丢失。this.name为undefined
// 解决办法是将this.talk在构造函数中bind一下this的值
let mockP = {}
mockP.hi = p.talk
mockP.hi()  // undefined says hello

上面class定义的Person类，在底层的实现非常接近于

function Person (name) {
  this.name = name
}
Person.prototype.talk = function () {
  console.log(`${this.name} says hello`)
}

由此可见，talk并不是一个Person类内部封装的方法，只是一个常规的JavaScript函数，赋值到了Person的原型上。因此，talk函数里的this对应的是调用时的上下文而不是定义时的上下文，这点和Java和C++的差别很大。
这种差异最明显的影响是在别的对象视图调用这个对象的talk时

let tom = new Person("tom")
let mockP = {}
mockP.hi = tom.talk
mockP.hi()  // undefined says hello

代码输出的结果不是我们想要的，原因是onClick被调用时，其实是talk函数在执行且talk函数的this指向的是mockP而不是tom，mockP并没有name属性，于是输出了 undefined says hello
这种“特殊”的表现让很多 JavaScript 新手感到头疼，尤其是那些从 Java 或者 C++ 背景过来的新手前端程序员。
解决这个问题的方法，先介绍两个仍然使用class的方法

方案一

使用函数的bind方法，bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数。
修改Person类的实现

class Person {
    constructor(name){
      this.name = name
    this.talk = this.talk.bind(this) //在构造器里显式调用bind函数，并绑定this 的值。在react类组件中有多次运用
  }
  talk(){
      console.log(`${this.name} says hello`)
  }
}

再次运行mockP的测试代码，这次正常输出 tom says hello
该方法的缺点：需要频繁的写这个bind方法调用语句，当这个类的方法有很多时，会使构造器非常臃肿，降低可读性和编码效率。

方案二

使用类属性+箭头函数的方法来定义方法
即

class Person{
    constructor(name){
      this.name = name
  }
  talk=()=>{
      console.log(`${this.name} says hello`)
  }
}

这种语法是Es2017才引入，它等效于

class Person {
  constructor(name) {
    this.name = name
    this.talk = () => {
      console.log(`${this.name} says hello`)
    }
  }
}

该方法的缺点：
第一：这个方法不再原型链上，即Person.prototype.talk的值是undefined，所以这个类的子类不能使用super.talk()调用父类的这个方法，下面代码执行会报错

class Student extends Person {
  talk = () => {
    super.talk(); // 报错
    console.log("student talk hi");
  }
}
const student = new Student('Tom');
student.talk();

第二：每次创建Person实例都会创建一个talk函数，造成性能浪费。

const Grey = new Person('Grey')
const Tom = new Person('Tom')
console.log(Grey.talk === Tom.talk); //  输出 false

在JavaScript中使用class类有很多坑，何不试试其他方案？
首先我们回到源头想想什么是类，我们利用类达到的什么目标：我们定义类其实是创建对象的蓝图(模板)——先规划好一类对象的模样，之后通过new的方式创建出许多对象，每个对象都符合我们想要的格式(包括属性和方法)。
在JavaScript中，还有其他方案可以达到这个目的

工厂函数(factory functions)

使用工厂函数，让它返回一个对象，这个对象拥有一个talk方法

// 使用工厂函数，来完成class的功能
const PersonFactory = (name)=>{
    return {
        talk:()=>{
            console.log(`${this.name} talk hello!`);
        }
    }
}

PersonFactory是一个简单的工厂函数,将name作为参数封装在函数内部，使用JavaScript的闭包特性。

const PersonFactory = (name)=>{
    return {
        talk:()=>{
            console.log(`${name} talk hello!`);
        }
    }
}
let tom = PersonFactory("tom")
const mockP = {}
mockP.onClick = tom.talk
mockP.onClick()

以上代码运行正常，这个方法把name自动变成了私有变量，不怕被更改，在class方案的name是可以被公共访问到的。
相比之下，工厂函数的代码更加简洁已读，不需要考虑this的繁琐问题。
因此如果只是为了给对象创建绘制蓝图(模板)，工厂函数是比类更合适的方案。

项目中代码示例

function httpClientFactory(baseUrl) {
  return {
    baseUrl: baseUrl,
    listUsers: () => {
      return axios.get(`${baseUrl}/users`)
    },
    getUser: (id) => {
      return axios.get(`${baseUrl}/users/${id}`)
    },
    createUser: (user) => {
      return axios.post(`${baseUrl}/users`, user);
    },
    listBooks: () => {
      return axios.get(`${baseUrl}/books`)
    },
    getBook: (bookName) => {
      return axios.get(`${baseUrl}/books/${bookName}`)
    },
    createBook: (book) => {
      return axios.post(`${baseUrl}/books`, book)
    }
  }
}
const httpClient = httpClientFactory("https://your-endpoints/api");
httpClient.getUser("123");
httpClient.getBook("JavaScript Is Interesting");
console.log("The httpClient's baseUrl is " + httpClient.baseUrl);

对比class的定义

class HttpClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
    this.listUsers = this.listUsers.bind(this);
    this.getUser = this.getUser.bind(this);
    this.createUser = this.createUser.bind(this);
    this.listBooks = this.listBooks.bind(this);
    this.getBook = this.listUsers.bind(this);
    this.createBook = this.createBook.bind(this);
  }
  listUsers() {
    return axios.get(`${this.baseUrl}/users`)
  }
  getUser(id) {
    return axios.get(`${this.baseUrl}/users/${id}`)
  }
  createUser(user) {
    return axios.post(`${this.baseUrl}/users`, user);
  }
  listBooks() {
    return axios.get(`${this.baseUrl}/books`)
  }
  getBook(bookName) {
    return axios.get(`${this.baseUrl}/books/${bookName}`)
  }
  createBook(book) {
    return axios.post(`${this.baseUrl}/books`, book)
  }
}
const httpClient = new HttpClient("https://your-endpoints/api");
httpClient.getUser("123");
httpClient.getBook("JavaScript Is Interesting");
console.log("The httpClient's baseUrl is " + httpClient.baseUrl);

继承特性

类的另一个特性是继承机制，子类可以继承父类的属性和方法，如果仅仅是共享属性和方法，可以使用组合(composition)实现

const Workable = {
    inOffice: true
}
const WorkablePersonFactory = (name) =>{
    return (
      Object.assign(
      {},
      Workable,
      PersonFactory(name)
    )
  )
}
// 或者下面
const WorkablePersonFactory = (name)=>(
  {
      ...Workable,
    ...PersonFactory(name)
  }
)

上面的代码意图十分明显，可读性很高，这也是组合模式的一个优点。对于某些更复杂的类使用场景，工厂函数并不能替代类。

关注代码表达性而不是死守教条主义

在 JavaScript 的现实场景中，尤其是前端代码，我们很少真正用到类继承，大多数时候，工厂函数就能完成我们的目标。
以React为例，官方这几年推崇 Hooks 的意图也很明显 —— 摆脱JavaScript class 带来的复杂性，拥抱函数式风格。
由于 JavaScript 实现的特殊性，在 JavaScript 应用中使用 class 对于一些程序员来说有许多坑，于此同时，大多数场景下其他替代方案如工厂函数可能更契合JavaScript的特性，反而带来更好的效果。
当然，并不是一杆子打死 JavaScript 的 class，在一些特别适合 OOP 的场景中，依然鼓励使用 class 。
总之，不要被教条主义所束缚，牢记编写程序最重要的两点是：

真正将需求转化成了代码
写出可读的，容易维护的，方便理解的代码

注意使用 class 的初衷
太多开发者一上来就写个class的原因通常是因为他/她是从OOP背景过来的 —— 在Java，你不能光秃秃地定义一个常量，一个函数或者一个表达式，你得先有个类，然后在类里定义一个静态不可变的属性（public static final 三连）才能产生一个常量，类似的，也只能在类里定义一个（静态或者非静态）的方法才能让函数有容身之地（为了防杠，我谨慎加一条 —— Java 8 的 functional interface 开始可以让函数单独出来走两步了，但前提还是要有interface）
如果你想好好写 native JavaScript，那么你通常不需要一个类 ```javascript // xxx.js import _ from ‘lodash’;

export const BOOKNAME_PREFIX = “JS“; // 定义常量 export const DEFAULT_USER_AGE = 18;

export const convertVarToObject = function (v) { // 定义一个工具方法，将传入的值包装返回一个对象 // … }

const privateSecret = “zhimakaimen”; // 不export的常量自然变成模块私有的

function privateFunc(){ // 同样可以定义模块私有的函数 // … }

export default { // 可以export出自定义的对象（包含自定义的属性） render: xxx,
property: yyy, } ``` 直接在 js module 里定义常量、函数，然后 export 出来给其他模块用，这么简单直接不香吗？

使用 class 的心智负担

业务代码中，现在大家写 JavaScript class 相信已经不会再直接访问 prototype 了，而是使用 class 关键字 —— 而 class 关键字的底层实现仍然是 prototype，仍然要考虑 this 的复杂性，在复杂的继承场景中甚至仍然得理解 prototype chaining
也就是说，一个新手接触/维护一个由大量类构成的项目时，他要么赶紧精通理解JavaScript class，要么就很可能掉进坑里。

简单来说，JavaScript 并不擅长玩 OOP class 这一套，它有自己非常擅长且自然而然的风格（函数式），如果你想好好学 JavaScript 且正宗地用好 JavaScript ，把你花在 JavaScript OOP上的时间用来先搞清楚 JavaScript function 和闭包（React 开发者学好 Hooks）—— 然后再去学 class、prototype 等知识
牢记JavaScript的一个特性 —— Functions are first-class in JavaScript 函数是一等公民
**

应该在JavaScript中使用Class吗？