在ecmascript 6中追加了以javascript来定义类的class语法。在这篇文章中，我将介绍使用class语法实现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文件。将显示如下所示的效果。
单击[exec]按钮。显示“output”的部分的字符串更改为“hello javascript class”。创建一个类的实例，可以确认方法可以执行。
最后，我们来看一下构造函数的示例
我们将使用构造函数介绍简单类的实现代码。
代码如下：
<!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文件。将显示如下所示的效果。
单击[exec]按钮。显示“output”的部分的字符串变为“〜hello javascript class .~”。创建了一个类的实例，您可以看到该方法是可执行的。在“hello javascript class .”的字符串前后，可以确认“～”将执行。
以上就是使用class语法在javascript中实现类的方法介绍的详细内容。