简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  JavaScript에서 메소드를 사용하는 방법

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

不言
不言원래의
2018-12-17 10:43:212792검색

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

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에서 메소드를 사용하는 방법

change_light 함수는 단지 Traffic_light 객체의 메서드이므로 결과는 변경되지 않았습니다.

위 내용은 JavaScript에서 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript switch console function 对象
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript를 사용하여 팝업 경고를 구현하는 방법다음 기사：JavaScript를 사용하여 팝업 경고를 구현하는 방법

관련 기사

더보기