생성자 함수

클래스(생성자함수)

개념

자바스크립트에서는 생성자함수라고도 함

클래스는 객체지향 프로그래밍(OOP - Object Oriented Programming)과 밀접한 관계가 있음

객체지향 프로그래밍은 어떤 코딩을 작성하는 스타일 중에 하나라고 보면됨

예시

슈퍼맨이 가지고있는 여러가지 요소들이 다른 히어로에도 존재할 수 있다.

각각의 히어로들 마다 어떤 개체를 구성하는 요소들은 유사한 형태를 가지고있음(공통된 요소) - name, age, gender, skills

var superMan = {
	name: "슈퍼맨",
	age: 30,
	gender: "남성",
	skills: ["레이저빔", "공중부양", "파워"]
}

var spiderMan = {
	name: "스파이더맨"
	age: 18,
	gender: "남성",
	skills: ["거미줄", "벽타기", "스파이더센서"]
}

var blackWidow = {
	name: "블랙위도우"
	age: 34,
	gender: "여성",
	skills: ["격투", "암살", "잠입"]
}

이렇게 각각 히어로들을 따로 객체로 만드는게 아니라 공통된 요소들을 하나의 집합체로 관리로 하는게 더 효율적이지 않을까? 그렇게해서 등장한게 객체지향프로그래밍

공통된 요소를 묶어내는 일종의 박스 자체가 클래스(생성자함수)라고 보면된다

방금 작성한 코드를 생성자함수로 바꾸어보자

생성자함수 생성

함수를 만들 때 사용하는 function 키워드를 가지고 생성자 함수를 만들수 있다

기능을 만들 때 사용되는 일반함수와 생성자함수를 구분짓기 위해서 생성자함수는 첫글자를 대문자로 작성함

매개변수로 name, age 나머지는 너무 길어져서 생략

function Heroes(name, age) {
	this.name = name;
	this.age = age;
}

name과 age는 매개변수이고 이것들은 우리가 만들어놓은 히어로의 구성요소 즉, 틀이다

틀을 찍어내는 행위를 할때 안에 Heroes의 name과 age를 전달함

hero의 이름과 나이는 각각 this.name, this.age에 할당이 된다

this는 후에 다시 설명

Heroes라는 틀을 가져다 사용할 것이다

각각 생성한 변수 안에다가 new라는 키워드사용

함수를 호출하는 구조와 유사함, 인수로는 name과 age 순서대로 작성

생성자함수를 호출할때 전달한 값이 각각 age, name에 할당이됨

var superMan = new Heroes('슈퍼맨', 30);
var blackWidow = new Heroes('블랙위도우', 34);

console.log(superMan);
console.log(blackWidow);

인스턴스

superMan과 blackWidow처럼 new키워드를 사용해서 생성자함수를 호출한 결과값이 담겨진 그 결과물

만들어진 틀을 가지고 new키워드를 사용해 호출된 결과물을 인스턴스라고 한다.

콘솔로그로 this를 찍어보자

superMan, blackWidow를 가리키고 있음 즉, 인스턴스 자체를 가리키고 있다.

function Heroes(name, age) {
	this.name = name;
	this.age = age;
	
	console.log(this);
}

붕어빵 예시

붕어빵틀이 있는데 붕어빵 틀로 찍혀나오는 결과물들은 모두 빠짐없이 붕어빵임

여기에서 생성자함수 자체를 바로 붕어빵틀이라고 보면됨

그리고 붕어빵틀을 new라는 키워드를 사용해서 찍어낸것

찍어낼 때 안에 내용물을 같이 입력을 해준것(슈퍼맨,30)

그렇게해서 찍어낸 결과값들은 모두 붕어빵, Heroes의 정보를 담고있는 객체가 되는것

생성자함수를 공부할 때는 생성자함수 자체를 붕어빵틀, 그로인해서 찍혀져나온 인스턴스를 붕어빵이라고 보면된다.

예시 - 2

Person이라는 생성자 함수에 fullName이라는 함수를 만듬

firstName과 lastName을 더하는 일종의 메서드를 하나 만든 것

function Person(firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;

	this.fullName = function() {
		console.log(this.firstName + " " + this.lastName);
	}
}

kim과 park에 Person 붕어빵틀 사용

firstName, lastName, fullName 함수를 각각 kim , park 이 가지고있음

그 안에는 인수로 전달한 값들이 할당되어있음

var kim = new Person("Woosung", "Kim");
var park = new Person("David", "Park");

console.log(kim);
console.log(park);

이렇게 만들어진 객체 안에 풀네임 메서드가 들어가있는 상태

kim, park 안에있는 풀네임을 호출해보자

kim.fullName();
park.fullName();

우리가 this.firstName, this.lastName에 할당해놓은 woosung kim, david park을 fullName에서 더했기 때문에 kim안에 fullName이라고 하는 메서드를 호출하게 되면은 kim 인스턴스로 전달된 인수값들이(woosung, kim) 더해진 형태로 화면에 출력된다

생성자함수는 안에 인수를 담을 공간을 부여할수도 있지만(this.firstName, this.lastName) 안에다가 인스턴스가 활용할 메서드 자체를 정리할수도 있다(fullName)

메서드 부여시 주의점

지금 객체값을 보면 kim, park 인스턴스에 두개의 키값은 서로 다른값이 들어가있지만 fullName에 대해서는 서로 같은 값을 가지고 있음

정리하면 함수 자체(fullname = function() { console....}가 kim과 park안에 각각 들어가있음

안에 결과물이 달라지는 이유는 우리가 전달해놓은 인수를 덧셈해준것 뿐이지 함수 자체는 kim이든 park이든 똑같은 상태이다

여기서 문제점이 코드 전체 분량으로 봤을때 같은 코드가 계속 반복적으로 노출되고 있는 것이다

이것은 불필요한 메모리를 잡게되고 쓸데없는 용량을 잡아먹게된다

kim, park 모두 동일하기 때문에 모든 인스턴스에 공통적으로 적용되는 메서드를 만들면된다.

생성자함수 안쪽에다가 작성하는게 아니라 프로토타입이라고 하는 개념을 활용해서 메서드를 부여해줘야한다

function Person(firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;
}

Person.prototype.fullName = function() {
	console.log(this.firstName + " " + this.lastName);
}

var kim = new Person("Woosung", "Kim");
var park = new Person("David", "Park");

kim.fullName();
park.fullName();

같은 결과가 출력된다

console.log로 kim과 park을 찍어보면 kim과 park 안에는 fullName 메서드가 없다, 그런데 fullname을 가져다가 사용하고있음

이 현상이 발생하는 이유는 Person 생성자 함수를 만들 때 자바스크립트는 Person.prototype 객체를 같이 생성한다

person.prototype 객체라는 요소안에다가 fullname이라고 하는 메서드를 새롭게 추가해준 것이다