[js]자바스크립트 클래스

클래스와 인스턴스

클래스

객체지향 프로그래밍에서 객체를 생성하기 위한 청사진, 설계도를 의미한다.

인스턴스

클래스를 사용해 생성한 객체를 인스턴스라고 한다.

 

자바스크립트의 객체지향 프로그래밍

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다.

따라서 다른 객체 지향 프로그래밍 언어들과 다르게 클래스를 사용하지 않고 객체지향 프로그래밍을 할 수 있다.

물론 ES6에 클래스 문법이 생기면서 클래스를 사용할 수 있다. 단, 클래스를 사용하더라도 프로토타입을 기반으로 객체지향 프로그래밍을 구현한다는 점은 변하지 않는다.

따라서 자바스크립트에는 재사용가능한 객체를 생성할 때, 클래스를 사용하는 방식과 생성자 함수를 사용하는 방식 두 가지가 존재한다. 편리함은 클래스가 더 편하다.

• 클래스 기반과 프로토타입 기반에 관한 글은 링크 참고

클래스 기반 객체 지향 언어 vs 프로토타입 기반 객체 지향 언어

생성자 함수를 사용하기

function Person(name){
	this.name = name;
	this.talk = function(){ // 인스턴스에 중복적으로 존재
		console.log("wow!");
	}
}
// 프로토타입에 존재
Person.prototype.getName =function(){
	console.log(this.name);
}
// 정적 메서드 Person에 존재
Person.sayHi = function(){
	console.log("say Hi");
}

talk는 생성자함수로 생성한 모든 인스턴스의 메서드로 들어가게된다. 이는 메모리 낭비이다.

따라서 getName처럼 Person의 prototype 객체에 메서드를 추가해주면 인스턴스에는 해당 메서드가 존재하지않지만 prototype에 존재하기때문에 인스턴스들이 사용할 수 있다.

• 프로토타입은 간단하게 부모역할을 하는 객체라고 보면 된다.

sayHi 처럼 생성자 함수(자바스크립트에서 함수는 객체다)에 메서드를 추가해 놓으면 인스턴스를 생성하지 않더라도 사용할 수 있다. = 정적 메서드

 

클래스를 사용하기

클래스를 사용하는 방법은 생성자 방식과 일부분 차이가 있다. 그래서 문법적 설탕이라고만 보기는 어렵다.

1. 클래스는 new 연산자없이 호출 불가
2. extends와 super 키워드 제공
3. 클래스 내부는 암묵적으로 strict mode
4. 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트의 [[Enumerable]]이 false라 순회할 수 없다. for…in에서 안보인다는 의미

이처럼 좀 더 객체지향의 클래스에 맞춰져있다.

class Person {
	constructor(name){
		this.name = name;
	}
	// 메서드
	getName(){
		console.log(this.name);
	}

	// 정적 메서드
	static sayHi(){
		console.log("say Hi");
	}
}

메서드와 정적 메서드 선언이 생성자 함수를 사용할 때 보다 훨씬 간결하고 쉽다.

extends 키워드

extends 키워드를 사용해 간단하게 상속을 할 수 있다.

// 상속할 부모 클래스
class Animal {
  constructor(age, name) {
    this.age = age;
    this.name = name;
  }

  // 프로토타입 메서드
  eat() {
    return "eat";
  }
  move() {
    return "move";
  }
}

// Animal을 상속받는 클래스
class Bird extends Animal {
  fly() {
    return "fly";
  }
}

const bird = new Bird();

console.log(bird.eat(), bird.move(), bird.fly());

super 키워드

함수처럼 호출할 수 있고 참조할 수 있는 특수한 키워드이다.

• super를 호출하면 super 클래스(부모 클래스)의 constructor를 호출한다
• super를 참조하면 super 클래스의 메서드를 호출할 수 있다.

// 상속할 부모 클래스
class Animal {
  constructor(age, name) {
    this.age = age;
    this.name = name;
  }
  // 프로토타입 메서드
  eat() {
    return "eat";
  }
}

// Animal을 상속받는 클래스
class Bird extends Animal {
	// 만약 서브 클래스의 constructor를 생략하지 않았다면 
	// 꼭 내부에 super를 호출해줘야한다.
	constructor(age, name, color){
		super(age,name,color); // super로 부모 생성자 호출
		this.color = color;
	}
  eatAndfly() {
		console.log(super.eat()); // super로 부모 메서드 참조
    return "fly";
  }
}

const bird = new Bird(10,"Ann","red");