JavaScript编码之路【ES6新特性之Class类】

原创

已于 2024-01-08 09:07:20 修改 · 981 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #开发语言

于 2024-01-07 17:18:45 首次发布

前言

嘟三~ 嘟三~ 今日份广播题目：“怎么让JavaScript越来越6”。接下来，小菜鸡本人将和大家一起来探讨ES6-ES13的那些酷酷的新特性，从这次广播开始，你也可以炫耀：“这个ES新特性我都用得溜溜的！”

引子

ES6就像一盘全新研发出炉的九转大肠，它不仅保留了原来的味道，还加入了山量的新鲜元素，味道更加可口，并且设计得更加优美。同样，ES6增加了很多有用的新特性，比如类（Class）。类是什么呢？为什么要有它呢？类是一种可以实例化为对象或者继承为子类的模板，简洁明快，极大提高了代码的维护性。

一. ES6定义类

1.1. 认识class定义类

按照构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。因此在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类，但是，其实这只不过是一个糖衣炮弹【原名：语法糖】，其核心元素是构造函数和原型链。所以学好了构造函数、原型链更有利于去理解类的概念和i其继承关系。就像你要了解为什么芥末能让你眼泪直流，你就得先知道它从哪儿来，和它是怎么做出来的。

那么，如何使用class来定义一个类呢？

想象一下，在ES6之前创建一个类，感觉就像驾驶一辆没有自动挡和助力转向的老爷车。有了ES6，你可以使用class关键字来定义一个类，这就像获得了自动挡和助力转向，让全过程简便易行。

可以使用两种方式来助力咱们

类声明

class Person {
   

}

类表达式

var Student = class {
   
  
}

接着我们就可以使用new操作符调用类

var p1 = new Person
var p2 = new Person
console.log(p1, p2)

研究一下类的一些特性吧

【探究历程】

小菜鸡创建了一个Person类的实例p, 其实也就是实例化了一个’Person’

var p = new Person

首先，小菜鸡打开了持有’Person’手提箱，看见标签上写着"[class Person]"。这标签其实就像是一纸身份证明，告诉俺们’Person’是一个类。

console.log(Person) // [class Person]

接着小菜鸡翻开’Person’的后背，发现了一把钥匙，这就是我们的prototype。此时，钥匙看起来非常空洞，只有它的形状，并没有任何其他的钥匙牙，比如方法或者属性。这就是因为我们的’Person’类还没定义任何方法或属性，所以它的prototype现在看起来是个洁白的 {}。

console.log(Person.prototype) // {}

接下来，侦探从钥匙上发现了一个指纹，也就是constructor，这个指纹将我们的钥匙链接回了Person类，证明了这个原型是属于Person类的。

console.log(Person.prototype.constructor) // [class Person]

然后，看最后的打印结果，这就好比小菜鸡召唤了克隆科技，制造出了Person的克隆人。克隆人p虽然拥有自己的生命，但是他的基因，或者说__proto__还是指向他的克隆源Person的prototype，表示p是从这里继承属性和方法的。

console.log(p.__proto__ === Person.prototype) // true

最后，小菜鸡拿出神秘的魔镜对Person进行了鉴定。魔镜告诉他，Person其实是一个 ‘function’ 的 disguise，因为在JavaScript中，类实质上还是函数。

console.log(typeof Person) // function

【本次探究告一段落】

1.2. 类的构造函数

如果你曾经在游戏角色选择界面里，享受过为你的角色设定名字、性别、属性值的乐趣，那么你那时候其实就对于类的构造函数有一些直观的理解了。构造函数constructor就好比是你创建游戏角色的大脑，可以让定制角色的一些基本属性。

【注意】

每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor
当我们通过new操作符，操作一个类的时候会调用这个类的构造函数constructor
每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常

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

var p1 = new Person("HuCE", 19, 1.50)
console.log(p1)

开始了，游戏在内存中创建了一个全新的角色（空对象）【第一步】。然后，新角色的继承链（[[prototype]]属性）会链接到角色原型（即：Person.prototype）【第二步】。接下来，游戏操作界面（即：this）都指向你的新角色【第三步】。游戏开始运行（执行构造函数的内部代码）【第四步】。最终，如果你没有设定任何属性（也就是构造函数没有返回非空对象），那么角色就会当做一个全新的角色（空对象）返回【第五步】。

每个类只能有一个构造函数。会不会有人问：“哈？我不能让我的角色一次拥有两种个性吗？”答案是，当然不能。试图在一个类中设定两个构造函数，就像是你试图同时控制一个拥有两种个性的角色一样，这将引发冲突，最后会导致异常。