클래스 구문을 사용하여 JavaScript에서 클래스를 구현하는 방법 소개-JS 튜토리얼-php.cn

클래스 구문을 사용하여 JavaScript에서 클래스를 구현하는 방법 소개

不言

풀어 주다： 2018-11-30 12:00:59

원래의

2897명이 탐색했습니다.

JavaScript에서 클래스를 정의하는 클래스 구문이 ECMAScript 6에 추가되었습니다. 이번 글에서는 클래스 문법을 이용하여 자바스크립트 클래스를 구현하는 코드를 소개하겠습니다.

클래스 구문을 사용하여 JavaScript에서 클래스를 구현하는 방법 소개

브라우저 지원을 먼저 살펴보겠습니다

ECMAScript 6에 대응해야 하므로 다음 브라우저에서 작동합니다.

Microsoft Edge

Google Chrome 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() 메서드를 호출하고 "출력" ID가 있는 요소(div)를 가져옵니다. MyClass 클래스의 method1() 메서드 호출의 반환 값을 요소의 innerHTML 가져오기로 바꿉니다. ID가 "output"인 div 태그 위치의 텍스트를 "Hello JavaScript Class"로 변경합니다.

실행 결과

웹 브라우저를 사용하여 위 HTML 파일을 표시하세요. 아래와 같은 효과가 표시됩니다.

클래스 구문을 사용하여 JavaScript에서 클래스를 구현하는 방법 소개

[실행] 버튼을 클릭하세요. "output"을 표시하는 문자열이 "Hello JavaScript Class"로 변경됩니다. 클래스의 인스턴스를 생성하면 메서드가 실행될 수 있음을 확인할 수 있습니다.

클래스 구문을 사용하여 JavaScript에서 클래스를 구현하는 방법 소개

마지막으로 생성자의 예를 살펴보겠습니다.

생성자를 이용한 간단한 클래스의 구현 코드를 소개하겠습니다.

코드는 다음과 같습니다.

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

로그인 후 복사

위 생성자를 사용하여 생성자를 구현합니다. 이 코드에서 생성자 매개변수에 지정된 값은 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가 있는 요소에 할당하고 이를 브라우저에 표시합니다.

실행 결과

웹 브라우저를 사용하여 위 HTML 파일을 표시합니다. 아래와 같은 효과가 표시됩니다.

클래스 구문을 사용하여 JavaScript에서 클래스를 구현하는 방법 소개

[실행] 버튼을 클릭하세요. "출력"을 표시하는 문자열은 "~Hello JavaScript Class.~"가 됩니다. 클래스의 인스턴스가 생성되고 메서드가 실행 가능한 것을 확인할 수 있습니다. "Hello JavaScript Class ." 문자열 앞뒤로 "~"가 실행되는 것을 확인할 수 있습니다.

클래스 구문을 사용하여 JavaScript에서 클래스를 구현하는 방법 소개