登录  /  注册
首页 > web前端 > js教程 > 正文

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

不言
发布: 2018-11-30 11:35:08
原创
2708人浏览过

在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

以上就是使用class语法在JavaScript中实现类的方法介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号