[javascript ] new 연산자와 생성자 함수

1. 객체를 만드는 두가지 방법

1) 객체 리터럴을 이용한 방법

객체 리터럴은 {...}을 사용해서 객체를 생성합니다. 

var obj = {
    name: "kim",
    getName: function () {
        console.log(this.name);
    }
};

console.log(obj.name);
obj.getName();

2) 생성자 함수를 이용하는 방법

1) 관례상 함수 이름의 첫글자는 대문자로 시작합니다.
2) 함수 호출 시 "new" 연산자를 붙여서 실행합니다.

function Person(name) {
    this.name = name;
    this.showName = function () {
        console.log(`My name is ${this.name}`);
    };
}

var person = new Person("Son");
person.showName();

 

2-1) 함수 앞에 new를 붙일 경우

new Person("name")을 사용해서 함수를 실행하면 아래와 같은 알고리즘이 동작합니다.

1) 빈 객체를 생성하고 this가 빈 객체를 가리키게 합니다.
2) 함수를 실행합니다. 
3) this를 반환합니다.

function Person(name) {
// 빈 객체가 생성되고 this에 저장합니다.
// this = {};

// 함수가 실행됩니다. 
// this는 객체({})기 때문에 this.name = name 구문은 객체에 name 값을 넣는 것과 같습니다.
    this.name = name;
    this.showName = function () {
        console.log(`My name is ${this.name}`);
    };
    
// return this;
}

var person = new Person("Son");
person.showName();

생성자 함수를 사용하는 이유는 객체를 재사용하기 위함입니다. 리터럴 객체를 만드는 방법보다 수고를 덜 수 있지요.

var person01 = new Person("kim");
var person02 = new Person("park");
var person03 = new Person("lee");

2-2) 생성자 함수의 return문

생성자 함수에서 명시적으로 return문을 사용할 경우 다음과 같은 값을 반환합니다.

return문이 없을 경우

this를 반환한다.

return 값이 객체일 경우

해당 객체를 반환한다.

return 값이 기본 변수일 경우

기본 변수 반환을 무시하고 this를 반환한다. 

---

참조

https://ko.javascript.info/constructor-new