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

Question

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

Answer 1

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

Answer 2

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

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

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

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

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

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

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

// 定义一个构造函数 Personfunction 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 3

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