-
[JAVASCRIPT-모던자바스크립트] new 연산자와 생성자 함수2Javascript& React study 2021. 10. 23. 05:47728x90반응형SMALL
new function() {...}
재사용할 필요가 없는 복잡한 객체를 만들어야 한다고 했을때 많은 양의 코드가 필요할 것이다. 이럴때에는 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다.let user = new function() { this.name = "John"; this.isAdmin = false; // 사용자 객체를 만들기 위한 여러 코드 // 지역 변수, 복잡한 로직, 구문등 // 다양한 코드가 들어가게 된다. }
- 생성자 함수의 경우 익명함수이기 때문에 어디에서도 저장이 되지 않는다.
- 처음 만들 때 단 한번만 호출될 목적으로 만들었기 때문에 재사용이 불가능하다.
- 익명 생성자 함수를 이용하게 되면 재사용을 막으면서 코드를 캡슐화할 수 있다.
생성자와 return문
생성자 함수에는 보통 return문이 없다. 반환해야 할 것들은 this에 저장이 되며 this는 자동으로 반환이 되기 때문에 반환문을 명시적으로 쓸 수 없다.
만약 return문이 있을 경우 아래와 같은 규칙이 적용된다.
- 객체를 return한다면 this 대신에 객체가 반환된다.
- 원시형을 return한다면 return문이 무시된다.
return 뒤에 객체가 오게 된다면 생성자 함수의 경우 해당 객체를 반환해주며 이 외의 경우 this를 반환한다.
function BigUser() { this.name = "원숭이"; return {name : "고릴라"}; // this가 아닌 새로운 객체를 반환 } alert( new BigUser().name); // 고릴라.
아무것도 하지 않은 return문을 살펴보면 원시형을 반환하는 경우와 마찬가지로 두 번째 규칙이 적용된다.
function SmallUser() { this.name = "원숭이"; return; // this를 반환함 } alert( new SmallUser().name ); // 원숭이
return문이 있는 생성자 함수는 거의 없다.
괄호 생략하기
인수가 없는 생성자 함수는 괄호를 생략해서 호출할 수 있다.
let user = new User; // 괄호가 없음 let user = new User(); // 둘다 똑같이 동작한다.
생성자 내 메서드
생성자 함수를 사용하게 되면 매개변수를 이용하여 객체 내부를 자유롭게 구성할 수 있다. 이 때 엄청난 유연성이 확보가 된다. 지금까지는 this에 프로퍼티를 더해주는 예시만 봤지만 메서드를 더하는 것도 가능하다.
new User(name)는 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어준다.
function User(name) { this.name = name; this.sayHi = function() { alert( "제 이름은" + this.name + "입니다."); }; } let bora = new User("이보라"); bora.sayHi(); // 제 이름은 이보라입니다. /* bora = { name: "이보라", sayHi: function () {...} } */
class문법을 사용하게 되면 생성자 함수를 사용하는 것과 마찬가지로 복잡한 객체를 사용할 수 있다.
728x90반응형LIST'Javascript& React study' 카테고리의 다른 글
[JAVASCRIPT-모던자바스크립트] 옵셔널 체이닝 '?.'2 (0) 2021.10.30 [JAVASCRIPT-모던자바스크립트] 옵셔널 체이닝 '?.' (1) 2021.10.24 [JAVASCRIPT-모던자바스크립트] 메서드와 this 3 / new 연산자와 생성자 함수 (4) 2021.10.22 [JAVASCRIPT-모던자바스크립트] 메서드와 this 2 (4) 2021.10.21 [JAVASCRIPT-모던자바스크립트] 메서드와 this (3) 2021.10.20