JavaScript中的方法如何使用-js教程-PHP中文網

首頁

web前端

js教程

JavaScript中的方法如何使用

不言

Dec 17, 2018 am 10:43 AM

方法是分配給物件屬性的函數，當在物件的屬性中定義函數時，它被稱為該物件的方法而不被稱為函數，本篇文章就來給大家介紹關於JavaScript中的方法如何使用中的方法如何使用中的方法如何使用中方法的使用。

JavaScript中的方法如何使用中的方法如何使用中的方法如何使用

屬性是預先設定的特定資訊（值），其中新增了名稱（屬性名稱）。在其屬性中，該函數被特別稱為“方法”。

我們來看具體的範例

在下面的程式中，我們基於交通燈blue，yellow，red建立一個對象，並將其放在一個名為traffic_light的變數中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>JavaScript中的方法如何使用中的方法如何使用中的方法如何使用</title>
  </head>
  <body>
    <script>
      var traffic_light = {
        blue: "go",
        yellow: "slow down",
        red: "stop"
      }
    </script>
  </body>
</html>

登入後複製

我們在這裡新增了一個名為current的屬性。在current中包含交通號誌的顏色。

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",    current: " "
  }
</script>

登入後複製

改變交通燈顏色的函數定義為change_light。然後，透過呼叫名為change_light的方法（函數）來變更此current的值。

我們先定義函數change_light

繼續在上面的程式中使用function，讓我們暫時定義函數為change_light。

讓我們考慮下一個訊號呼叫change_light以確定要呼叫的下一個屬性的行為，這取決於當時當前的內容。

使用switch語句將change_light設定為四種模式。

如果current中包含的屬性為blue，則下一個屬性將變更為yellow。

如果current中包含的屬性為yellow，下一個屬性將會變更為red。

如果current中包含的屬性為red，下一個屬性將會變更為blue。

預設是blue。

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",
    current: " "
  }

  function change_light(){
      switch(traffic_light.current){
         case traffic_light.blue:
        traffic_light.current = traffic_light.yellow;
        break;      
        case traffic_light.yellow:
        traffic_light.current = traffic_light.red;
        break;      
        case traffic_light.red:
        traffic_light.current = traffic_light.blue;
        break;      
        default:
        traffic_light.current = traffic_light.blue;
        break
    }
  }
</script>

登入後複製

接下來，透過在console.log中呼叫current來查看結果

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",
    current: " "
  }
  function change_light(){
    switch(traffic_light.current){
      case traffic_light.blue:
        traffic_light.current = traffic_light.yellow;
        break;
      case traffic_light.yellow:
        traffic_light.current = traffic_light.red;
        break;
      case traffic_light.red:
        traffic_light.current = traffic_light.blue;
        break;
      default:
        traffic_light.current = traffic_light.blue;
        break
    }
  }  change_light();
  console.log(traffic_light.current);
</script>

登入後複製

因為預設的屬性設定為blue，所以輸出blue的值為go。

JavaScript中的方法如何使用中的方法如何使用中的方法如何使用

使用console.log重複三次呼叫...

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",
    current: " "
  }

  function change_light(){
    switch(traffic_light.current){
      case traffic_light.blue:
        traffic_light.current = traffic_light.yellow;
        break;
      case traffic_light.yellow:
        traffic_light.current = traffic_light.red;
        break;
      case traffic_light.red:
        traffic_light.current = traffic_light.blue;
        break;
      default:
        traffic_light.current = traffic_light.blue;
        break
    }
  }  
  change_light();
  console.log(traffic_light.current);
  change_light();
  console.log(traffic_light.current);
  change_light();
  console.log(traffic_light.current);
  change_light();
  console.log(traffic_light.current);
  </script>

登入後複製

current的變化從blue->yellow->red-> ;blue

值的輸出為go->slow down->stop->go

JavaScript中的方法如何使用中的方法如何使用中的方法如何使用

最後就讓我們來看看讓change_light作為traffic_light的方法的使用

要做的是在current：“”之後設置屬性名稱change_light，並使用以下函數對其進行分隔（比如用“：”分隔它們）。（此時，連續的函數名稱change_light是重複的，所以可以刪除它）

<script>
   var traffic_light = {
     blue: "go",
     yellow: "slow down",
     red: "stop",
     current: " ",
     change_light:function(){
       switch(traffic_light.current){
         case traffic_light.blue:
           traffic_light.current = traffic_light.yellow;
           break;
         case traffic_light.yellow:
           traffic_light.current = traffic_light.red;
           break;
         case traffic_light.red:
           traffic_light.current = traffic_light.blue;
           break;
         default:
           traffic_light.current = traffic_light.blue;
           break
       }
     }
   }
</script>

登入後複製

現在，teaffic_light物件將有一個名為change_light的方法。

我們以同樣的方式在consoe.log中呼叫它。這次重複執行四次。

在呼叫物件中的每個屬性時，可以透過將「.」放入變數名稱後接屬性名稱來呼叫屬性值。因此，當你想要在變數traffic_light中包含的物件中呼叫方法（屬性）時，它變成如下所示。

 <script>
   var traffic_light = {
     blue: "go",
     yellow: "slow down",
     red: "stop",
     current: " ",
     change_light:function() {
       switch(traffic_light.current){
         case traffic_light.blue:
           traffic_light.current = traffic_light.yellow;
           break;
         case traffic_light.yellow:
           traffic_light.current = traffic_light.red;
           break;
         case traffic_light.red:
           traffic_light.current = traffic_light.blue;
           break;
         default:
           traffic_light.current = traffic_light.blue;
           break
       }
     }
   }   
   traffic_light.change_light();
   console.log(traffic_light.current);
   traffic_light.change_light();
   console.log(traffic_light.current);
   traffic_light.change_light();
   console.log(traffic_light.current);
   traffic_light.change_light();
   console.log(traffic_light.current);
   </script>

登入後複製

運行結果如下：

JavaScript中的方法如何使用

結果沒有改變，因為函數change_light只是traffic_light的物件的方法。

以上是JavaScript中的方法如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7802

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1236

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。