생성자 함수 constructor

생성자 함수

• 객체를 생성하는 함수
• new 연산자와 함께 호출하여 객체를 생성하는 함수
• new 연산자와 함께 생성자 함수를 호출하지 않으면 해당 함수는 생성자 함수로 동작한다
• 인스턴스 : 생성자 함수에 의해 생성된 객체

 

// [ new 연산자와 생성자 함수를 통한 객체 생성 ]

// Array 생성자 함수를 통한 Array 객체 생성
const arr = new Array('A', 'B', 'C');
console.log(arr); // ['A', 'B', 'C']

// String 생성자 함수를 통한 String 객체 생성
const str = new String('문자열 str');
console.log(str); // '문자열 str'

// Boolean 생성자 함수를 통한 Boolean 객체 생성
const bool = new Boolean(true);
console.log(bool); // true

 

// [ 생성자 함수를 통한 객체 생성 ]

// 생성자 함수
function Person(name, age) {
	// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스이다.
	this.name = name;
    this.age = age;
    this.introduce = function() {
    	return `${this.name}은/는 ${age}살 입니다.`;
    };
}

// 인스턴스 생성
const person1 = new Person('민수', 20); // 이름이 민수이고 나이는 20인 Person 객체 생성
const person2 = new Person('영희', 25); // 이름이 영희이고 나이는 25인 Person 객체 생성

console.log(person1.introduce()); // 민수은/는 20살 입니다.
console.log(person2.inteoduce()); // 영희은/는 25살 입니다.

 

생성자 함수를 통한 객체 생성 시

1. 빈 객체를 만들어 this에 할당한다
2. 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다
3. this를 반환한다.

function Person(name, age) {
	// this = {};
    
    // 새로운 프로퍼티를 this에 추가한다
    this.name = this;
    this.age = age;
    
    // return this;  this가 암시적으로 반환된다 this = {name: name, age: age}
}

const person1 = new Person('민수', 20);
/*
위 코드는 아래와 같이 동작한다.
const person1 = {
	name: '민수';
    age: 20
}
*/

* 출처 [모던자바스크립트 튜토리얼] https://ko.javascript.info/constructor-new

 

 

Person 함수를 new 연산자와 함께 생성자 함수로써 호출하면

함수 내부의 this는 Person 생성자 함수가 생성할 인스턴스를 가리킨다.

Person 함수를 일반함수로써 호출하면 함수 내부의 this는 전역 객체(window)를 가리킨다.

// 생성자 함수
function Person(name, age) {
	this.name = name;
    this.age = age;
    this.introduce = function () {
    	return `${this.name}은/는 ${age}살 입니다.`;
    }
}

// new 연산자 없이 생성자 함수 호출 시 일반 함수로서 호출
const person1 = Person('민수', 20);
console.log(person1); // undefined

// 일반 함수 내부의 this는 전역 객체를 가리킨다
console.log(name); // 민수