点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

使用class语法在JavaScript中实现类的方法介绍

来源：懂视网责编：小采时间：2020-11-27 19:28:41

使用class语法在JavaScript中实现类的方法介绍

使用class语法在JavaScript中实现类的方法介绍:在ECMAScript 6中追加了以JavaScript来定义类的class语法。在这篇文章中，我将介绍使用class语法实现JavaScript类的代码。我们先来看一下浏览器的支持因为它需要与ECMAScript 6相对应，所以它适用于以下浏览器。Microsoft Edge谷歌浏览器49或

推荐度：

点击下载本文 文档为doc格式

导读使用class语法在JavaScript中实现类的方法介绍:在ECMAScript 6中追加了以JavaScript来定义类的class语法。在这篇文章中，我将介绍使用class语法实现JavaScript类的代码。我们先来看一下浏览器的支持因为它需要与ECMAScript 6相对应，所以它适用于以下浏览器。Microsoft Edge谷歌浏览器49或

在ECMAScript 6中追加了以JavaScript来定义类的class语法。在这篇文章中，我将介绍使用class语法实现JavaScript类的代码。

JavaScript类

我们先来看一下浏览器的支持

因为它需要与ECMAScript 6相对应，所以它适用于以下浏览器。

Microsoft Edge

谷歌浏览器49或更高版本

Firefox 45或更高版本

我们来看一下语法格式

class (类名){
 constructor ([参数...]){
 }
 (类名1)([参数...]){
 ...(方法的实现)
 }
 (类名2)([参数...]){
 ...(方法的实现)
 }
 ...
 (类名n)([参数...]){
 ...(方法的实现)
 }
 }

我们来看简单的示例

代码如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
 <script type="text/javascript">
 class MyClass {
 method01() {
 return "Hello JavaScript Class.";
 }
 }
 function onButtonClick() {
 var mclass = new MyClass();
 var elem = document.getElementById("output");
 elem.innerHTML = mclass.method01();
 }
 </script>
</head>
<body>
 <div id="output">output</div>
 <hr/>
 <input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>

说明：

我们使用以下代码声明并实现该类。

声明“MyClass”类。MyClass有一个method01（）方法。

method01（）方法返回一个字符串“Hello JavaScript Class”。

class MyClass {
 method01() {
 return "Hello JavaScript Class.";
 }
 }

通过单击按钮，执行以下onButtonClick（）函数。

 function onButtonClick() {
 var mclass = new MyClass(); 
 var elem = document.getElementById("output");
 elem.innerHTML = mclass.method01();
 }

var mclass = new MyClass();

上面的代码创建了一个MyClass实例。创建的MyClass对象（MyClass实例）被分配给mclass变量。

var elem = document.getElementById("output");
 elem.innerHTML = mclass.method01();

调用getElementById（）方法并获取带有“output”id的元素（div）。将调用MyClass类的method1（）方法的返回值替换为获取元素的innerHTML。将带有“output”作为id的div标记位置的文本更改为“Hello JavaScript Class”。

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

2345截图20181130111404.png

单击[Exec]按钮。显示“output”的部分的字符串更改为“Hello JavaScript Class”。创建一个类的实例，可以确认方法可以执行。

2345截图20181130111612.png

最后，我们来看一下构造函数的示例

我们将使用构造函数介绍简单类的实现代码。

代码如下：

<!DOCTYPE html><html><head>
 <meta charset="utf-8" />
 <title></title>
 <script type="text/javascript">
 class MyClass {
 constructor(quote) {
 this.iquote = quote;
 }
 method01() {
 return this.iquote + "Hello JavaScript Class." + this.iquote;
 }
 } 
 function onButtonClick() {
 var mclass = new MyClass("～"); 
 var elem = document.getElementById("output");
 elem.innerHTML = mclass.method01();
 } 
 </script>
 </head>
 <body>
 <div id="output">output</div>
 <hr />
 <input type="button" value="Exec" onclick="onButtonClick();">
 </body>
 </html>

说明：类声明和实现的格式与前面的代码相同。

constructor(quote) {
 this.iquote = quote;
 }

使用上面的constructor实现构造函数。在此代码中，赋予构造函数参数的值存储在iquote成员变量中。可以通过在“this”之后描述变量名来声明成员变量。

method01() {
 return this.iquote + "Hello JavaScript Class." + this.iquote;
 }

method01（）方法返回一个字符串“Hello JavaScript Class”。与前一个示例的不同之处在于，在字符串之前和之后添加了赋予构造函数参数的字符串。

function onButtonClick() {
 var mclass = new MyClass("～"); 
 var elem = document.getElementById("output");
 elem.innerHTML = mclass.method01();
 }

单击该按钮将执行上面的onButtonClick（）函数。创建MyClass的实例，并将方法1方法的返回值分配给具有输出ID的元素，并将其显示在浏览器上。

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

2345截图20181130111404.png

单击[Exec]按钮。显示“output”的部分的字符串变为“?Hello JavaScript Class .~”。创建了一个类的实例，您可以看到该方法是可执行的。在“Hello JavaScript Class .”的字符串前后，可以确认“～”将执行。

2345截图20181130113032.png

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用class语法在JavaScript中实现类的方法介绍

推荐度：

点击下载本文 文档为doc格式

标签：方法使用的 js

热门焦点

使用class语法在JavaScript中实现类的方法介绍

使用class语法在JavaScript中实现类的方法介绍

使用class语法在JavaScript中实现类的方法介绍

最新推荐

猜你喜欢

热门推荐