ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JAVASCRIPT-모던자바스크립트] new 연산자와 생성자 함수2
    Javascript& React study 2021. 10. 23. 05:47
    728x90
    반응형
    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

    댓글

Designed by Tistory.