JavaScript에서 메소드를 사용하는 방법-JS 튜토리얼-php.cn

JavaScript에서 메소드를 사용하는 방법

不言

풀어 주다： 2018-12-17 10:43:21

원래의

2799명이 탐색했습니다.

메서드는 객체 속성에 할당된 함수입니다. 객체의 속성에 함수가 정의되면 이를 함수라기 보다는 객체의 메소드라고 부릅니다. 이 글에서는 자바스크립트에서 메소드를 사용하는 방법을 소개합니다.

JavaScript에서 메소드를 사용하는 방법에서 메소드를 사용하는 방법에서 메소드를 사용하는 방법

속성은 이름(속성 이름)이 추가되는 미리 설정된 특정 정보(값)입니다. 해당 속성에서는 함수를 구체적으로 "메서드"라고 부릅니다.

구체적인 예를 살펴보겠습니다

아래 프로그램에서는 신호등 파란색, 노란색, 빨간색을 기반으로 객체를 생성하고 이를 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라는 속성을 추가했습니다. 현재 신호등의 색상을 포함합니다.

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

로그인 후 복사

신호등의 색상을 변경하는 함수는change_light로 정의되어 있습니다. 그런 다음,change_light라는 메서드(함수)를 호출하여 이 전류 값을 변경합니다.

먼저 Change_light 함수를 정의합니다

위 프로그램에서 함수를 계속 사용하면서 임시로 함수를 Change_light로 정의하겠습니다.

change_light를 호출하는 다음 신호를 고려하여 당시의 현재 상태에 따라 호출될 다음 속성의 동작을 결정해 보겠습니다.

change_light를 4가지 모드로 설정하려면 스위치 문을 사용하세요.

현재에 포함된 속성이 파란색이면 다음 속성은 노란색으로 변경됩니다.

현재에 포함된 속성이 노란색이면 다음 속성은 빨간색으로 변경됩니다.

현재에 포함된 속성이 빨간색이면 다음 속성은 파란색으로 변경됩니다.

기본값은 파란색입니다.

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

로그인 후 복사

현재 변경 사항은 파란색->노란색->빨간색->파란색

값 출력은 go->slow down-입니다. >stop->go

JavaScript에서 메소드를 사용하는 방법에서 메소드를 사용하는 방법에서 메소드를 사용하는 방법

마지막으로 change_light를 Traffic_light

의 방법으로 사용하는 방법을 살펴보겠습니다. 해야 할 일은 속성 이름을 current: "" 뒤에 설정하고 The를 사용하는 것입니다. 다음 함수는 이를 구분합니다(예: ":"를 사용하여 구분). (이때 연속된 함수명인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에서 메소드를 사용하는 방법