[인프런] Javascript입문 - 객체 2 : 객체의 생성자(생성자를 사용해 객체 만들기)

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

객체의 생성자 살펴보기

---

복습

객체 object 는 유지 보수를 쉽게 하기 위해서 값들을 묶어 놓은 것으로, 속성property과 메소드method를 가집니다.

var p1 = {
  "name": "honux", // 속성(프로퍼티)
  "eat": function(food) { //  메소드
  }; 
};

 

생성자로 여러 객체를 쉽게 만들기

var a = {"name" = "아서스", "hp" : 999999};

객체를 한 두개 만들 때는 그냥 위 코드처럼 JSON표기법으로 나열해 만들면 된다.

하지만 비슷한 형식의 객체를 '여러 개' 만들어야 할 때, 매번 위와 같은 코드를 입력하는 것은 매우 번거롭다.
따라서 비슷한 객체를 여러 개 만들 때는 객체를 생성하는 함수, 생성자Constructor를 이용한다.
(생성자Constructor : 객체를 생성하는 함수)

-생성자는 관례상 대문자로 시작하는 경우가 많습니다.      

-생성자의 형태

var 생성자 이름 = function(생성자의 매개변수들) {
    this.속성1 = ;
    this.속성2 = ;
    ...
    this.메서드1 = function(메서드1의 매개변수) { ..
    };
    this.메서드2 = function(메서드2의 매개변수) { ..
    };
};

//Human 클래스를 정의하는 함수 = 생성자 
var Human = function(name, hp, power) { 
    this.name = name; 
    this.hp = hp;
    this.power = power; 
    this.attack = function(target) {
		console.log(this.name + "이 " + target.name + "을 공격했다.");
        target.hp -= this.power; 
    };
    this.show = function() {
        console.log("%s %d" , this.name, this.hp);
    }; 
};

 

➕ "%s $d" 의 의미 : 출력형식(type)을 알려주는 것.
%s = (string의 약자) 뒤의 '문자열'을 출력한다. 즉 위의 코드에서는 this.name을 출력 
%d = (decimals = 소수 의 약자) 뒤의 '숫자'를 출력한다. 즉 위의 코드에서는 this.hp를 출력 

 

 

생성자를 이용해서 객체 만들기

생성자를 이용해서 객체를 만들 때는 new 라는 키워드를 사용합니다.

var p1 = new Human("honux", 100, 10);
var p2 = new Human("crong", 200, 1); 
var p3 = new Human("pobi", 50, 30);


p1.attack(p2); // honux이 crong을 공격했다.
p2; // Human {name: "crong", hp: 190, pow: 1, attack: f, show: f}
// (crong의 체력이 10 깎였다)

p3.attack(p2); // pobi이 crong을 공격했다.
p2; // Human {name: "crong", hp: 160, pow: 1, attack: f, show: f}
// (crong의 체력이 30 깎였다)

p1.show(); // [honux] 100
p2.show(); // [crong] 159
p3.show(); // [pobi] 50

위 코드에서 p1/p2/p3은 "객체" 또는 "(클래스의) 인스턴스instance"라고 합니다.
또, p1/p2/p3은 변수 중에서도 "참조 변수"입니다.
참조 변수는 객체의 변수이며, 참조 변수에 대해서는 다음에 다시 설명합니다.

읽을 때 : Human 클래스의 인스턴스 p1/p2/p3이다.

❗ 인스턴스 instance : 예/경우/사례(≓example, case) 라는 뜻이다.
-인스턴스라는 용어 자체는 '객체object'와 유사하나,
객체는 더 일반적인 의미이며 / 인스턴스는 현재 생성된 그 객체라는 더 구체적인 의미이다.

 

 

생성자를 사용하는 이유

• 객체를 하나만 만들 때는 간단히 json 표기법으로 만듭니다.
• 여러 객체를 만들고 싶을 때는 생성자를 통해서 만듭니다.

 

예제

1. Food(name, energy) 생성자를 만들어 봅시다.
2. eat(food) 메소드를 Human() 생성자 안에 추가해 봅시다.
3. 도너츠 객체를 생성해서 휴먼 객체에게 먹여 봅시다.

///// 예제 풀이 - Human.eat(food)대신 Food.feed(human) 으로 변형.
var Food = function(name, energy) {
	this.name = name;
    this.energy = energy;
    this.feed = function(human) {
    	human.hp += this.energy;
    };
};

var d = new Food('donut', 30);
// 새로 만들 때는 꼭 new를 적기!
d // Food {name: "donut", energy: 30, feed: f}

p2; // Human {name: "crong", hp: 159, pow: 1, attack: f, show: f}


d.feed(p2);
p2; // Human {name: "crong", hp: 189, pow: 1, attack: f, show: f}
// d (도넛)을 먹여서 crong의 hp가 30 증가했다.
d.feed(p2);
p2; // Human {name: "crong", hp: 219, pow: 1, attack: f, show: f}
// d (도넛)을 한 번 더 먹여서 crong의 hp가 30 더 증가했다.

 

 

객체 조금 더 공부하기

더 공부하고 싶으신 분들은 생활 코딩의 아래 페이지를 공부해 보세요. https://opentutorials.org/course/743/6553

생활코딩 - 객체지향 프로그래밍 오리엔테이션 (1. 객체 / 2. 설계와 추상화 / 3. 부품화)

객체지향 프로그래밍 - 생활코딩