您的位置：首页 > Web前端 > JavaScript

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

2018-01-19 01:27 423 查看

基于 ECMAScript 6 即 ECMAScript 2015 的 javascript class 类封装的简单使用
文章来源 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航