使用class语法在JavaScript中实现类的方法介绍-js教程-PHP中文网

首页

web前端

js教程

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

不言

Nov 30, 2018 am 11:35 AM

javascript

在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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Java vs JavaScript：开发人员的详细比较May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。