ES新特性之class关键字

最新推荐文章于 2024-03-10 23:27:45 发布

原创

最新推荐文章于 2024-03-10 23:27:45 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elasticsearch #javascript #前端

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

类的声明

类是什么

ECMAScript6提供了更接近传统开发语言的手法，引入了类(Class)的概念。类作为对象的模板，在JavaScript中只是一个语法糖。

class关键字只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

示例代码如下：

// ES 5 中定义对象的方式
// 定义一个构造函数
const Hero1 = function () {
  this.name = 'ywanzhou',
    this.print = () => {
      console.log('this is ywanzhou');
    }
}
// 通过构造函数创建对象
const hero1 = new Hero1();
console.log(hero1.name); // ywanzhou

// 通过 ES6 的方式定义构造函数
class Hero2 {
  // 构造器
  constructor() {
    this.name = 'ywanzhou',
      this.print = () => {
        console.log('this is ywanzhou');
      }
  }
}
// 通过类创建对象
const hero2 = new Hero2();
console.log(hero2.name); // ywanzhou

上面的代码仅供参考，会在下面进行讲解

类的声明

类的声明具有两种方式：

第一种是类的声明方式，语法结构如下所示：

class name [extends] {
  // class body
}

参数说明：

name：表示类名
extends：可选，用于类的继承

使用类的声明方式声明类是不允许再次声明已经存在的类的，否则会抛出一个异常。

示例代码如下所示：

// 类的声明方式
class Hero {
  constructor() {
    this.print = () => {
      console.log('this is Hero');
    }
  }
}
// 如果声明已经存在的类会抛出异常
// class Hero {} // SyntaxError: Identifier 'Hero' has al