隔壁人妻偷人bd中字,av免费看网址,91精品国产91久久久久麻豆主演

導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立...

網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。

在ECMAScript 6中追加了以JavaScript來定義類的class語法。在這篇文章中，我將介紹使用class語法實(shí)現(xiàn)JavaScript類的代碼。

JavaScript類

我們先來看一下瀏覽器的支持

因?yàn)樗枰cECMAScript 6相對應(yīng)，所以它適用于以下瀏覽器。

Microsoft Edge

谷歌瀏覽器49或更高版本

Firefox 45或更高版本

我們來看一下語法格式

class (類名){
   constructor ([參數(shù)...]){
   }
   (類名1)([參數(shù)...]){
     ...(方法的實(shí)現(xiàn))
   }
   (類名2)([參數(shù)...]){
     ...(方法的實(shí)現(xiàn))
   }
   ...
   (類名n)([參數(shù)...]){
     ...(方法的實(shí)現(xià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>

說明：

我們使用以下代碼聲明并實(shí)現(xiàn)該類。

聲明“MyClass”類。MyClass有一個(gè)method01（）方法。

method01（）方法返回一個(gè)字符串“Hello JavaScript Class”。

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

通過單擊按鈕，執(zhí)行以下onButtonClick（）函數(shù)。

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

var mclass = new MyClass();

上面的代碼創(chuàng)建了一個(gè)MyClass實(shí)例。創(chuàng)建的MyClass對象（MyClass實(shí)例）被分配給mclass變量。

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

調(diào)用getElementById（）方法并獲取帶有“output”id的元素（div）。將調(diào)用MyClass類的method1（）方法的返回值替換為獲取元素的innerHTML。將帶有“output”作為id的div標(biāo)記位置的文本更改為“Hello JavaScript Class”。

運(yùn)行結(jié)果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

2345截圖20181130111404.png

單擊[Exec]按鈕。顯示“output”的部分的字符串更改為“Hello JavaScript Class”。創(chuàng)建一個(gè)類的實(shí)例，可以確認(rèn)方法可以執(zhí)行。

2345截圖20181130111612.png

最后，我們來看一下構(gòu)造函數(shù)的示例

我們將使用構(gòu)造函數(shù)介紹簡單類的實(shí)現(xiàn)代碼。

代碼如下：

<!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>

說明：類聲明和實(shí)現(xiàn)的格式與前面的代碼相同。

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

使用上面的constructor實(shí)現(xiàn)構(gòu)造函數(shù)。在此代碼中，賦予構(gòu)造函數(shù)參數(shù)的值存儲在iquote成員變量中。可以通過在“this”之后描述變量名來聲明成員變量。

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

method01（）方法返回一個(gè)字符串“Hello JavaScript Class”。與前一個(gè)示例的不同之處在于，在字符串之前和之后添加了賦予構(gòu)造函數(shù)參數(shù)的字符串。

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

單擊該按鈕將執(zhí)行上面的onButtonClick（）函數(shù)。創(chuàng)建MyClass的實(shí)例，并將方法1方法的返回值分配給具有輸出ID的元素，并將其顯示在瀏覽器上。

運(yùn)行結(jié)果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

2345截圖20181130111404.png

單擊[Exec]按鈕。顯示“output”的部分的字符串變?yōu)椤?Hello JavaScript Class .~”。創(chuàng)建了一個(gè)類的實(shí)例，您可以看到該方法是可執(zhí)行的。在“Hello JavaScript Class .”的字符串前后，可以確認(rèn)“～”將執(zhí)行。

2345截圖20181130113032.png

以上就是使用class語法在JavaScript中實(shí)現(xiàn)類的方法介紹的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁設(shè)計(jì)教程 > 詳細(xì)頁面

使用class語法在JavaScript中完成類的方法介紹

本類教程下載

系統(tǒng)下載排行