javaScript. 클래스(Class)

객체를 생성하기 위한 Template.

class도 함수와 마찬가지로 Class표현식과 Class선언 두가지 방법이 존재.

 

- 함수표현식 vs 함수선언 비교

javaScript. 함수선언식 vs. 함수표현식

 

 

1 / 클래스 선언

 

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

-  class 키워드 + 클래스명 (Rectangle) 사용.

 

- 함수는 정의하기 전에 호출 가능 (By. Hoisting)

- 클래스는 반드시 정의 한 후에 사용 가능

 

 

 

2 / 클래스 표현식

// unnamed - 이름 無
let Rectangle = class {
  constructor(height, width) {   // 함수
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle"

// named - 이름 有
let Rectangle = class Rectangle2 {
  constructor(height, width) {  // 함수
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);   // name속성을 적어주는것.
// 출력: "Rectangle2"

 

- 이름 유무> 선택사항.

- 이름을 가진 class 표현식 : 클래스 로컬스코프에만 유효함. 

 

❗ 여기서, '클래스명'은 Rectangle이다. 위에서 말하는 '이름'은 객체의 속성 중 'name'속성을 의미함.

 

 

+)

Class Body

- 중괄호 { } 로 묶여있는 안쪽 부분.

- 메서드나 class 멤버를 정의하는 부분.

 

 

 

 

 

 

---

 

 

📌 Constructor (생성자)

 

constructor 함수는 객체가 생성되었을 때 실행되는 함수이다!

 

- class로 생성된 객체를 생성 및 초기화하는 메서드.

- 클래스 안에 한 개만 존재할 수 있음.

 

 

+) 부모 클래스의 constructor을 호출하기 위해 super 키워드 사용 가능.

 

// o라는 객체가 있고, 속성 'a' 와 'b'를 갖고 있다고 하자.
let f = function () {
    this.a = 1;
    this.b = 2;
}
let o = new f(); // {a: 1, b: 2}

 

 

** new 연산자

new constructor[([arguments])]

constructor  : 객체 인스턴스 타입을 기술하는 함수

 

- 사용자 정의 객체 생성시

1) 함수 작성 후 객체타입 정의

2) new 연산자로 객체의 인스턴스 생성

 

: 객체는 그 자체가 또 다른 객체의 속성을 가질 수 있음.

 

 

- 즉, 클래스로 객체 만들때

const 객체명 = new 클래스명(arguments) 과 같이 해주면 된다.

 

 

 

** instanceof 연산자

object instanceof Class   // object가 Class에 속하면 true 반환

판별할 객체 / 판별 목표 함수

 

>> instanceof 연산자는 object의 프로토타입 체인에 constructor.prototype이 존재하는지 판별합니다.

- 즉, 객체가 특정 클래스에 속하는지 아닌지 확인 가능.

 

 

 

---

예제.

var Human = function(type) {
  this.type = type || 'human';   
};
 
Human.isHuman = function(human) {      /// Human 생성자에 있는 static Method
  return human instanceof Human;       // instanceof 연산자 - Human이 존재하는지
}
 
Human.prototype.breathe = function() {    /// 모든 Human 객체가 받는 Method
  alert('h-a-a-a-m');
};

var Zero = function(type, firstName, lastName) { 
  Human.apply(this, arguments);      // Human의 this값을 가져옴
  this.firstName = firstName;      // 매개변수로 받은 인자값을 저장
  this.lastName = lastName;
};

Zero.prototype = Object.create(Human.prototype);    // Human의 프로토타입을 갖는 객체 생성
Zero.prototype.constructor = Zero;  // 상속하는 부분
Zero.prototype.sayName = function() {  
  alert(this.firstName + ' ' + this.lastName);
};
var oldZero = new Zero('human', 'Zero', 'Cho');  //  new 연산자
Human.isHuman(oldZero); // true       // instanceof연산자에 의해

 

 

** 클래스 사용시

class Human {
  constructor(type = 'human') {      // 매개변수 = type. 기본값 설정함.
    this.type = type;                // this = Human객체. / 매개변수를 통해 받은 값 저장
  }

  static isHuman(human) {         // static 메소드도 앞에 static을 붙여서 표시
    return human instanceof Human;    // human이 Class(Human)에 존재하면 true
  }

  breathe() {
    alert('h-a-a-a-m');           // Human클래스에 존재하는 메서드
  }
}



class Zero extends Human {                //  클래스를 다른 클래스의 자식으로. 
  constructor(type, firstName, lastName) {    // 매개변수 
    super(type);                              // ❗ super(arg) - 부모생성자 호출
    this.firstName = firstName;        // 매개변수를 통해 받은 값 저장
    this.lastName = lastName;
  }

  sayName() {
    super.breathe();     // ❗ super : 부모 객체에 접근. - Human 객체에 접근
    alert(`${this.firstName} ${this.lastName}`);  
  }
}

const newZero = new Zero('human', 'Zero', 'Cho');   // 클래스로 객체 생성
Human.isHuman(newZero); // true

- 생성자와 상속코드가 깔끔해짐.

- 클래스로 만들어 둔 것은 new를 붙이지 않으면 에러 발생.

 

- 이전에 생성자 객체를 function Object() {} 로 만들었지만,

이제는 class를 통해 생성할 수 있음.

 

- 상속 또한 간단하게 extends 를 이용하면 됨.

 

 

** 주의

 

❗ 부분, 즉 super에 주목.

첫번째로 나온  constructor 안의 super은 부모의 생성자에 type을 전달하는 역할을 한다.

- 부모객체에 type이 존재하므로.

- 부모객체에 없는 firstName과 lastName은 따로 저장해줘야함

 

---

 

 

** super (키워드)

- 부모객체의 메서드를 사용하기 위해

super([arguments]); // 부모 생성자 호출

super.functionOnParent([arguments]);  // 부모객체의 함수 사용

 

 

 

** extends (키워드)

- 클래스를 다른 클래스의 자식으로 만들기 위해 사용

class ChildClass extends ParentClass { ... }   // 자식 extends 부모

+) 내장 객체뿐만 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용함.

 

 

 

** Object.create()

 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듬.

 

 

 

 

 

++)

 

상속과 프로토타입 - JavaScript | MDN

 

 

각각의 객체는 [[Prototype]]이라는 private 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다.

그 객체의 프로토타입 또한 프로토타입을 가지고 있고, 이것이 반복되다 결국 null을 갖는 객체에서 끝남.

 

>> 프로토타입 체인

 

 

 

 

 

 

 

---

REFERENCE

https://www.zerocho.com/category/ECMAScript/post/5759cd68b15f881700c32592

(ECMAScript) ES2015(ES6) Class(클래스)

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!