JavaScript class 类封装的简单使用基于 ECMAScript 6 即 ECMAScript 2015

最新推荐文章于 2022-04-24 08:59:01 发布

___NULL

最新推荐文章于 2022-04-24 08:59:01 发布

阅读量422

点赞数

分类专栏： Web前端所有

本文链接：https://blog.csdn.net/joyous/article/details/79102169

版权

所有同时被 2 个专栏收录

219 篇文章 2 订阅

订阅专栏

Web前端

69 篇文章 0 订阅

订阅专栏

JavaScript class 类封装的简单使用基于 ECMAScript 6 即 ECMAScript 2015

文章来源 blog.csdn.net/joyous/article/details/79102169

创建一个 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 页面文件

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="test.js" type="text/javascript"></script>
<script type="text/javascript">
	// 创建对象
	var polygon1 = new Polygon(10, 15);
	var polygon2 = new Polygon(20, 30);

	polygon1.fun1();
	polygon1.fun2();

	polygon2.fun1();
	polygon2.fun2();

	var square = new Square(35, 36);
	square.fun1();
	square.fun2();
</script>
</head>
<body>
	<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class">参考代码</a>
</body>
<script type="text/javascript">
	
</script>

</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

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

文章来源 blog.csdn.net/joyous/article/details/79102169

Q群讨论：236201801