Deep Dive - 17.생성자 함수
🔶생성자 함수를 사용하여 객체를 생성하는 법
const person = new Object(); // 1.생성자 함수 사용 - 빈 객체를 생성하여 반환함.
person.name = "Lee"; // 2.그 객체에 프로퍼티 또는 메서드를 추가할 수 있음.
person.sayHello = function(){console.log("Hello")};
console.log(person); // 3.결과 { name:"Lee", sayHello:function(){} }
🔶생성자 함수에 의한 객체 생성 방식의 장점
:생성자 함수를 사용하면 프로퍼티 구조가 동일한 객체를 간편하게 반복하여 생성할 수 있음.
// ☆생성자 함수에서의 this : new연산자로 인해 생성된 "인스턴스 객체"
function Circle(num){
this.radius = num;
this.getDiameter = function(){
return 2*this.radius;
};
}
const c1 = new Circle(5); // {radius:5, getDiameter:fn}
const c2 =new Circle(10); // {radius:5, getDiameter:fn}
c1.getDiameter(); // 10
c2.getDiameter(); // 20
🔶생성자 함수의 인스턴스 생성 과정
function Circle(num){
//1.암묵적으로 인스턴스 객체가 생성되고,
console.log(this); // Circle{} //2.this가 바인딩 됨.
// 3.초기화 됨.
this.radius = num;
this.getDiameter = function(){
return 2*this.radius;
};
}
const c1 = new Circle(5); // 4.완성된 인스턴스를 반환함. {radius:5, getDiameter:fn}
new 연산자와 함께 생성자 함수를 호출하면
< 런타임 이전에 >
1.암묵적으로 인스턴스를 생성함
:암묵적으로 빈 객체(인스턴스)가 생성 됨.
2.this바인딩 됨 :생성자 함수 내부의 this와 인스턴스 객체가 연결됨
:생성자 함수 내부의 this와 this가 가리킬 객체인 인스턴스 객체가 연결됨.
< 런타임 중 >
3.인스턴스를 초기화 한 후 (초기화: 인스턴스 프로퍼티 추가, 초기값 할당하는 것)
:인스턴스에 프로퍼티나 메서드를 추가함.
:생성자 함수가 인수로 전달받은 초기값을 프로퍼티에 할당함.
4.암묵적으로 인스턴스를 반환함.
: 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환됨.
1)그러나 명시적으로 객체를 반환하면 this반환이 무시되고, 명시적으로 반환한 객체가 반환됨.
function Circle(num){
this.radius = num;
return {a:"1"}; // 명시적으로 객체를 반환함.
}
const c1 = new Circle(5);
console.log(circle); // {a:"1"}
2)그러나 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고, 암묵적으로 this가 반환됨.
function Circle(num){
this.radius = num;
return 1; // 원시값을 반환함. 이는 무시됨.
}
const c1 = new Circle(5);
console.log(circle); // {radius : 5}
🔶생성자 함수 내부에서 명시적으로 다른 값을 return하는 것은 생성자 함수의 기본 동작을 훼손함. 따라서 생성자 함수에서 return문은 반드시 생략해야 한다!
🔶new연산자
- 일반 함수와 생성자 함수에는 특별한 차이가 없음.
일반 함수에 new를 붙이면 그게 생성자 함수가 되는 것임. - 그래서 일반함수와 구별하기 위한 노력으로 생성자 함수는 첫 문자를 대문자로 하게 됨.
Author And Source
이 문제에 관하여(Deep Dive - 17.생성자 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jhplus13/Deep-Dive-17.생성자-함수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)