1. 객체 리터럴로 객체 생성했을 때 단점
객체를 생성할 경우 속성과 메서드의 공통되는 부분을 반복적으로 아래처럼 반복적으로 적어야한다
var student1 = {
name: "lee",
age: 24
}
var student2 = {
name: "ae",
age: 24
}
var student3 = {
name: "jin",
age: 24
}위 3개의 객체는 다른 점은 고작 name 프로퍼티의 값 뿐인데 같은 코드를 여러 번 작성하면 매우 비효율적이다
이럴 때 생성자 함수로 구조를 개선할 수 있다
2. 생성자 함수?
js 함수는 재사용 가능한 코드를 묶음으로 사용하는 것 외에 객체를 생성하기 위한 방법으로도 사용된다
객체를 생성하기 위해서 직접 객체를 반환해도 되지만, new 키워드를 사용하여 함수를 호출하게 되면 return문이 없어도 새로운 객체를 반환시킨다
3. 예시
function Student(name, age) {
this.name = name;
this.age = age;
this.info = function () {
console.log(`${this.name}학생의 나이는 ${this.age}`);
}
}
const student1 = new Student("lee", 24);
student1.info(); // lee학생의 나이는 24
const student2 = new Student("ae", 24);
student2.info(); // ae학생의 나이는 24
const student3 = Student("jin", 24);
console.log(name); // jin
console.log(age); // 24이처럼 생성자 함수 방식을 이용해서 객체를 생성하면 여러 번 코드를 작성할 필요 없이 효율적인 코드를 작성할 수 있다
생성자 함수는 this를 사용하여 반환되는 객체의 초기 상태와 행위를 정의할 수 있다
new 키워드를 생성하면 인자로 넘어간 값을 this에 저장하고, new 키워드로 생성하지 않으면 this는 window 객체를 가르킨다
그렇기 때문에 함수명을 대문자로 시작한다
4. 결론
생성자 함수의 역할은 같은 값과 동작을 공유하는 객체를 여러 개 만드는 것에 있다
new 키워드를 사용하면 js가 생성자 함수 내에 있는 this의 값을 새로 만들어진 객체로 설정함으로써 생성자 함수는 일반 함수와 다른 동작을 한다
결국 생성자 함수는 new 연산자와 함께 호출하여 객체를 생성하는 함수로, 그 때 생성된 객체를 인스턴스라고 부른다
ref
Frontend Developer