2018년 5월 28일 월요일

[JavaScript 예제] 037 클래스 정의하기

JavaScript에서 클래스르르 정의하려면 함수를 이용한다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>클래스 정의하기</title>
</head>
<body>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  var Animal = function(name) {
    this.name = name;
    this.toString = function() {
      return 'Animal:' + this.name;
    };
  };

  var ani = new Animal('바루');
  console.log(ani.name);
  console.log(ani.toString());  
  </script>
</body>
</html>


프로토타입 기반 객체 지향

  • JavaScript는 객체 지향 언어이지만 그 구문은 프로토타입이라는 개념을 바탕으로 하고, 그 특수성을 말할 때 대표적인 특징으로 예를 든다.
    • 일반적인 클래스 기반 객체 지향에 대하여 프로토타입 기반의 객체 지향이라고 한다
  • 무엇보다 프로토타입 자체는 조금도 특수한 것이 아니라 '제약이 느슨한 클래스' 같은 것으로 인식하면 된다.


주의

  • 이름은 대문자로 시작한다.
  • 프로퍼티는 'this.프로퍼티 이름' 으로 정의한다.
  • 메소드는 함수형 프로퍼티이다.
  • 반환값은 필요 없다.
    • 생성자에서 자동으로 this가 가리키는 객체를 돌려주기 때문에 반환값은 필요 없다.
    • 명시적으로 반환값을 돌려준 경우 그 값이 new 연산자의 값이 된다.
      • 이 경우 this에 대한 프로퍼티 설정 등은 무시되므로 주의


new 연산 없이 호출 경우

1
2
3
4
5
6
var Animal = function(name) {
  if(!(this instanceof Animal)) {
    return new Animal(name);
  }
  // 코드 구성
}


클래스에 메소드 추가하기

생성자함수.prototype.메소드명 = function(...) {...}

정적 멤버 추가하기

생성자함수.프로퍼티명 = 값
생성자함수.메소드명 = function(...) {...}




작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)