Self-invoking constructor 패턴
자바스크립트에서 객체지향으로 프로그래밍할 때 일반적으로 function을 생성자로 하여 new 키워드로 클래스와 객체를 만들곤한다.
그런데 이 생성자 자체가 function이라서 가끔 다른 라이브러리나 모듈의 클래스를 가져다가 사용하려고 하면 new 키워드를 실수로 생략하는 경우도 있다.
자바스크립트에서 new 키워드를 생략하더라도 생성자 함수를 일반함수인 것처럼 호출하고 실행하므로 오류는 발생하지 않고 오동작만 하게 된다.
이러한 경우 작은 오타라서 소스가 많아지면 오류를 찾아내는 것이 힘들 수 있다.
Self-invoking constructor 패턴은 이러한 실수를 고려하여 생성자를 그냥 함수로 호출할 때 스스로 new를 붙여서 다시 호출하는 패턴이다.
ECMAScript 6에서 class 키워드가 별도로 나오면서 function 기반으로 객체지향을 개발하는 상황은 점점 줄어들고 있지만, 아직 ECMAScript 6의 class 키워드를 모든 브라우저가 100% 지원하지는 않고 있다.
따라서 function으로 객체지향을 구현할 때 방ㅇ어적으로 이 패턴을 이용하여 생성자 호출 실수를 처리하면 좋다.
이는 function 생성자와 관련된 패턴으로 객체지향 프로그래밍을할 때 유용하게 사용할 수 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello</title> </head> <body> <script> (function(){ function Employee(name, manMonth){ if(!(this instanceof Employee)){ return new Employee(name, manMonth); } this.name = name; this.manMonth = manMonth; } var unikys = Employee("Unikys", 1), world = new Employee("World", 2); console.log(unikys); console.log(world); }()); </script> </body> </html> |
Empolyee() 함수는 생성자로 new 키워드와 함께 사용하는것이 맞지만, 변수를 선언하면서 new 키워드를 빠뜨려도 함수는 정상으로 호출한다.
이때 this는 일반적으로 글로벌 컨텍스트인 window 객체이기 때문에 현재 this가 Employee()함수의 인스턴스인지 확인한 다음, new Employee를 함수내에서 별도로 호출하여 생성된 객체를 반환한다.
이러한 실수는 자바스크립트가 자료형에 대한 제약이 없어서 타입이 다르거나 함수에 반환값이 없어도 오류를 내지 않고 undefined 등으로 처리하기 때문이다.
따라서 함수 호출 자체는 문제없이 넘어갈 수 있다.
이러한 방어적인 코딩을 안한 다면 unikys 변수가 undefined로 정의되었을 것읻다.
따라서 function을 이용해서 객체지향을 구현한다면 이러한 방어적인 패턴을 적용하여 보호하는 것이 좋다.
출처-속깊은 자바스크립트 양성익 지음
'FRONT-END > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 디자인 패턴 #10. curring 패턴 (0) | 2018.01.05 |
|---|---|
| 자바스크립트 디자인 패턴 #9. Callback Function 패턴 (0) | 2018.01.05 |
| 자바스크립트 디자인 패턴 #7. Memoization 패턴 (0) | 2018.01.03 |
| 자바스크립트 디자인 패턴 #6. Self-defining function 패턴 (0) | 2018.01.03 |
| 자바스크립트 디자인 패턴 #5. Init-time branching 패턴 (0) | 2018.01.03 |