基于ECMAScript6即ECMAScript2015的javascriptclass类封装的简单使用实例讲解

基于ecmascript6即ecmascript2015的javascriptclass类封装的简单使用实例讲解

创建一个 js 文件 test.js

在下面的例子中，我们首先定义一个名为polygon 的 class，然后继承它来创建另一个名为 square 的 class。注意，构造函数中使用的 super() 只能在构造函数中使用，并且必须在使用 this 关键字前调用。

再在 polygon 的 class 中定义两个函数 fun1 和 fun2，输出构造传入的参数。

/**
 * 创建两个 js class, 并定义一个 constructor (构造)
 */

class polygon {
  // 构造函数
  constructor(height, width) {
    this.name = 'polygon';
    this.height = height;
    this.width = width;
  }

  // fun1 函数
  fun1() {
    console.log('fun1', this.name, this.height, this.width);
  }

  // fun2 函数
  fun2() {
    console.log('fun2', this.name, this.height, this.width);
  }
}

// 定义 square class 并扩展 polygon
class square extends polygon {
  constructor(height, width) {
    super(height, width);
    this.name = 'square';
  }
}

创建一个 html 页面文件

// polygon1.fun1() 输出
fun1 polygon 10 15

// polygon1.fun2() 输出
fun2 polygon 10 15

// polygon2.fun1() 输出
fun1 polygon 20 30

// polygon2.fun2() 输出
fun2 polygon 20 30

// square.fun1() 输出
fun1 square 35 36

// square.fun2() 输出
fun2 square 35 36

我们可以看到 javascript 的 class 完全如预期运行，正确显示了polygon 的 fun 和 square 的 fun，这种定义方式和 c++/ java 的 class 定义方式非常相似，符合类封装概念，后端程序员可以完全以 class 的思想来使用 javascript，不再会觉得以前的 javascript 语法略有怪异（从 c++/java 语法角度看），对于 c++/java 程序需要兼顾 javascript 程序的简直就是福音。