✏️ 한 주간 배운 내용 정리

초보자를 위한 JavaScript 200제 내용을 참고하였습니다.

---

🧐 생성자 함수 이해하기

객체를 생성하기 위해 직접적으로 객체를 반환해도 되지만, new 키워드를 사용하여 함수를 호출하게 되면 return 문이 없어도 새로운 객체가 반환된다.
그리고 함수 바디에서 this 키워드를 사용하여 반환되는 객체의 초기 상태와 행위를 정의할 수 있다.

객체를 생성하는 역할을 하는 함수를 생성자 함수 라고 하는데, new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하며, 새로운 객체를 반환하지 않는다.
그렇기 때문에 함수명을 대문자로 시작한다.

---

객체에 타입이 적용되면 해당 객체는 그 타입의 인스턴트 라고 부른다.
생성자 함수는 새로운 타입을 정의하는데 사용되며, new 키워드로 만들어진 객체는 해당 타입의 인스턴트 가 된다.

---

function Teacher(name, age, subject) { // Teacher 생성자 함수 정의, 매개변수로 name, age, subject 정의
	this.name = name; // 전달받은 매개변수들의 값을 this의 속성으로 대입
	this.age = age;
	this.subject = subject;
	this.teach = function (student) { // teach 메소드를 정의
		console.log(student + '에게 ' + this.subject + '를 가르칩니다.');
		
	};
}

const jay = new Teacher('jay', 30, 'JavaScript'); 
// new 키워드와 함께 생성자 함수를 호출하면 생성자 함수 블록이 실행, 별도의 return문 없이 새로운 객체 반환됨.
// 이 때 반환되는 새로운 객체를 가리키는 것이 this이다.

console.log(jay); // Teacher {name: "jay", age: 30, subject: "JavaScript", teach: f}
jay.teach('bbo'); // bbo에게 JavaScript를 가르칩니다.

console.log(jay.constructor); // f Teacher(name, age, subject) {...생략...}
console.log(jay instanceof Teacher); // true

const jay2 = Teacher('jay', 30, 'JavaScript');
console.log(jay2); // undefined
console.log(age); // 30

---

생성자 함수의 new 호출을 통한 객체 생성 과정

1. 빈 객체를 만든다.
2. 만든 빈 객체를 this에 할당한다.
3. 생성자 함수 바디의 코드를 실행한다. (this에 속성 및 메소드 추가)
4. 만든 빈 객체의 __proto__ 에 생성자 함수의 prototype 속성을 대입한다.
5. this를 생성자의 반환값으로 변환한다.

---

초보자를 위한 JavaScript 200제 내용을 참고하였습니다.