[Essentials] 클래스(1) - 생성자 함수

01.일반함수 예제

const heropy = {
firstName: "Heropy",
lastName: "park",
getFullName: function() {
	return `${this.firstName} ${this.lastName}`
	}
}

console.log(heropy.getFullName()); // Heropy park

const amy = {
	firstName: "Amy",
	lastName: "Clarke",
	getFullName: function () {
		return `${this.firstName} ${this.lastName}` 
	}
}

console.log(amy.getFullName()); // Amy Clarke

const neo = {
	firstName: "Neo",
	lastName: "Smith",
	getFullName: function () {
		return `${this.firstName} ${this.lastName}`
	}
}

console.log(neo.getFullName()); // Neo Smith

02.생성자 함수 예제

function User(first, last) {
	this.firstName = first;
	this.lastName = last;
}

User.prototype.getFullName = function () {
	return `${this.firstName} ${this.lastName}`
}
// getFullName 메소드는 로직이 동일하기 때문에 통일화하여 메모리 효율적 관리 가능!
// user라는 함수에 숨어있는 prototype 속성에 getFullName을 할당하면 된다.

// (new) => 객체 데이터 생성 / (User) => 생성자 함수
const heropy = new User("Heropy", "Park"); // user {firstName: "Heropy", lastName: "Park"}
const amy = new User("Amy", "Clarke"); // Amy Clarke
const neo = new User("Neo", "Smith"); // Neo Smith
// 인스턴스: new라는 키워드를 통해 생성자 함수로 실행한 결과를 반환하여 할당된 변수
// 여기서 '인스턴스'들은 orosy, amy, neo!

console.log(heropy)
console.log(heropy.getFullName());
console.log(amy.getFullName());
console.log(neo.getFullName());
// 위의 메소드들은 user.prototype.getFullName이란 한 번 만들어진 함수를 '참조'하는 것

• 추가적으로 생성자 함수는 일반 함수와 비교하기 위하여 개발자들끼리 암묵적으로 첫 문자를 대문자로 사용하도록 PascalCase를 사용힙니다.

03.프로토타입(prototype)

• 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다.

• 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.

• 일반 함수로 getFullName()메소드를 생성하면 똑같은 기능을 하는 메소드를 각각의 함수마다 하나씩 만들어 줘야 하기 때문에 이것이 많아지게 되면 결국 메모리를 많이 잡아먹는 메소드가 됩니다.

• 하지만 prototype을 사용해서 getFullName() 메소드를 한번만 만들어 주면 다른 생성자 객체들이 따로 만들필요 없이 이미 prototype 으로 만들어진 getFuallName() 메소드를 참조하여 사용하기 때문에 메모리를 효율적으로 사용할 수 있습니다.

• 즉, 생성자를 이용해 객체를 여러개 만들어도 prototype으로 만들어진 메소드는 메모리에 딱 한번만 만들어지므로 여러 객체들은 메모리에 만들어진 하나의 메소드를 참조헤서 사용하므로 메모리 사용이 효율적입니다.

04.리터럴 방식 (Literal)

• 리터럴은 데이터(값) 그 자체를 뜻한다. 즉, 변수에 넣는 변하지 않는 데이터를 의미합니다.
• 변수에 할당 연산자(=)를 통해 중괄호를 열고 닫는 것처럼 특정한 기호를 이용하여 손쉽게 데이터를 만드는 방식을 의미합니다.
• 코드 상에서 데이터를 표현하는 방식을 리터럴이라하며 객체지향언어에서는 객체의 리터럴 표기법을 지원합니다.

리터럴 표기법

• 변수를 선언함과 동시에 그 값을 지정해주는 표기법을 말합니다.
• '', "", {}, [] 등이 모두 리터럴 방식!

// Number
var age=10; // 리터럴 
var name="new Number(10); // 객체  

// String
var name="hi"; // 리터럴  
var name=new String("hi"); // 객체  

// Boolean
var cold=true; // 리터럴 
var cold=new Boolean(true); // 객체 

// Array
var aryData=["data1","data2","dat3"]; // 리터럴 
var aryData=new Array("data1","data2","dat3"); // 객체 

• 일반적으로 실무에서는 숫자나 문자 배열 데이터 같은 기본적인 데이터 생성할때 리터럴 방식을 더 많이 사용합니다.
• 리터럴 방식 var age=10;이렇게 넣으면 자바스크립트 엔진에 의해서 var name="new Number(10);로 자동변환되서 실행됩니다.