请问前端class类实际可以做些什么？

Question

class类可以完成的事情，我们使用普通的function以及变量定义也能完成，所以很多情况下，我们都是使用后者来完成业务，class用的地方不多，但class有它自己的属性、方法，可以加默认值，它也可以继承，在项目中，有哪些地方是我们可以合理利用class方法的？class主要是用来干什么的？

Answer 1

首先要明白，js 是 多范式编程语言 ，这就意味着，面向对象并不是必须的语法，所以题主才会有这种疑问，这也是实际情况

在 js 中，函数是 一等公民 ：

• 函数可以被赋值给变量
• 函数可以作为参数传递
• 函数可以作为返回值
• 函数可以存储在数据结构中
• ...

立即执行函数、高阶函数、闭包、链式调用、函数柯里化，这些特性也全和函数有关，所以可以说函数式编程是 js 的 灵魂 所在

有没有函数式编程做不到但面向对象编程能做到的？

一般来说面向对象能实现的（至少在 js 中）函数式编程也能实现

在 ES6 之前，js 的函数依赖 原型链 来模拟面向对象的过程

// 定义一个构造函数 Person
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在 Person 的原型上定义方法
Person.prototype.sayHello = function() {
  console.log("我叫 " + this.name + "，已经 " + this.age + " 岁了");
};

// 创建 Person 的实例
var person1 = new Person("Lagrange", 25);

// 调用实例的方法
person1.sayHello();

你看，是不是和面向对象几乎一致？

既然函数式编程这么强大，为什么 ES6 还是拓展了面向对象相关的特性呢？

正如回答开头所说： js 是 多 范式编程语言，自然会考虑开发者更全面的需求，为开发提供更多选择，也是为了可读性（如果对原型链了解不多，可能会疑惑为什么有的方法在原型上，有的方法又直接加在函数里）

直接通过关键字声明，统一一套规范，总比各自作各自的实现要好（在此之前， js 不止一套方法实现面向对象，因为函数式编程确实很灵活）

可谓百家争鸣，列举主要的几种

• 原型链继承（上文出现过）
• 构造函数继承（call 和 apply 硬绑定 this）
• 组合继承（前面两个结合起来）
• 原型式继承（丢掉构造函数的组合继承？不知道这么说对不对）
• 寄生式继承（在已有的对象上添加新属性和方法，然后返回这个对象作为继承结果，有点类似代理模式）
• 混入继承（将多个对象的属性和方法混合到一个新对象中，从而实现对多个对象的继承）
• ...

为了一个面向对象，不得不学习一堆实现模式，属实有些折磨（虽然学习不同的实现方案挺有意思的）

因此，ES6 出手了，借一句话，就是 车同轨，书同文

大家别再自己创造了，按我的规范来，类就用 class 定义，构造函数就叫 constructor，实例方法直接写，静态方法加 static ，也不用手动在原型链上写来写去了，语法糖统统帮你实现

class Person {
  constructor(name, age) {
      this.name = name;
      this.age = age;
  }

  // 实例方法
  sayHello() {
    console.log(`我叫 ${this.name}`);
  }
  
  // 静态方法
  static info() {
    console.log('静态方法');
  }
}

// 最终调用倒是差不多
const person2 = new Person("Lagrange", 25);
person2.sayHello();

Answer 2

OP 的问题开头其实已经接近jsclass的本质了, JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，

它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

上面的代码用 ES6 的class改写，就是下面这样。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。
使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

class Bar {
  doStuff() {
    console.log('stuff');
  }
}
var b = new Bar();
b.doStuff() // "stuff"

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

在类的实例上面调用方法，其实就是调用原型上的方法。

class B {}
let b = new B();
b.constructor === B.prototype.constructor // true

上面代码中，b是B类的实例，它的constructor方法就是B类原型的constructor方法。

因此你看, 其实本质没有什么区别, 只是更像面向对象而已
使用的场景也就与OOP对应

https://www.bookstack.cn/read/es6-3rd/spilt.1.docs-class.md

Answer 3

比如 class 中对属性的描述关键字还是挺全面，比如：public、private、static 等一些关键字，使它能够更直观的对自己的属性进行更好的保护与使用，这个是 function 所不能比的，还有就是 this 的问题。所以使用场景不同，选择就不同，但是 function 更灵活，对于前端来说，也更方便操作。所以没必要纠结这些。