带你快速过一遍js的新语法class

前言

JavaScript 中的类是一种基于原型的面向对象编程的概念，在ES6中被正式引入。类提供了一种创建对象的模板，并且可以包含属性和方法。通过类，我们可以更加清晰地组织和管理代码，实现更好的复用性和可维护性。类的引入使得JavaScript的面向对象编程更加直观和易用，为开发者提供了一种更加传统的面向对象编程方式来构建应用程序。

老板本

这个是我们老版本的写法。

constructor等同于构造函数

在我们的新版本中，引入了一种类，首先和构造函数相关的放入constructor里，语法一样。而我们直接加入的函数表示老版本的原型对象身上的方法，实例对象是可以访问的。

往构造函数身上放属性加static

这里我们发现我们也可以直接在构造函数身上放一个属性，为什么呢，因为构造函数本质也是一个对象，只要是对象就可以放入属性。

那么我们怎么定义放在构造函数里的方法呢，我们只需要在前面加一个static即可。这个时候的方法就不能被实例对象调用。

往原型身上加属性

我们前面谈论的都是方法，那如果是往原型上加一个属性呢？

我们首先return这个属性值。

然后在前面加一个get即可。这个时候就和调用属性是一样的了。

set

那如果是让实例对象里的某个属性值++呢？

我们直接采用age++，是可以的。

同时官方也给出了一个set，在方法前面加上，我们就可以充当修改属性的操作啦！

如果我们在这个类里面直接加上一个属性并赋值的话，是会存在于实例对象中的。

只有定义类中能访问

如果我们将定义的属性前面加上#，那么只有定义的类里面能访问，我们外界不能直接访问。

接下来我们给出一段代码及运行结果让大家对此了解更深刻。

class People {
  like = 'fruit'
  #a = 6666666
  constructor(name, age) {
    this.name = name
    this.age = age
    this.hobby = 'basketball'
  }
  run() {
    console.log('I like running');
    console.log(this.#a);
  }
  static swim() {
    console.log('I like swimming');
  }
  get sex() {
    return 'girl'
  }
  set addAge(val) {
    this.age = val
  }
}

const p = new People('小花', 18)
console.log(p);
p.run()
People.swim()
console.log(p.sex);
p.addAge = 20
console.log(p);

其实我想，JavaScript中的class让你可以假装自己是一个传统的面向对象编程大师，就像在舞台上扮演角色一样。它让你可以创建对象模板，定义属性和方法，还可以玩继承和多态的花样。虽然底层还是原型继承，但class让代码更有条理，就像穿着西装打领带一样，看起来很专业。当然，不要忘了JavaScript仍然是一位怪咖，偶尔会露出一些怪癖，但总体来说，class给JavaScript增添了一些正经的色彩。

文章转自：https://juejin.cn/post/7375829906976358451