Javascript new 연산자 없이 호출되기 방지

 

자바스크립트에서 생성자 함수를 만들기 위해서는 new 연산자를 사용합니다.

일반함수는 구현된 함수를 호출하여 사용한다면, 생성자 함수는 함수 자체를 인스턴스화 하여 만들어 사용 합니다.

 

일반함수 호출방법과 생성자함수 호출방법에서의 차이점 중 중요한 한가지를 꼽는다면, 바로 this 값 여부 입니다.

아래 간단한 함수를 정의하여 보았습니다.

function world(){
    this.name = 'hello world';
    this.print = ()=>{
        console.log('print 실행')
    }
} 

let hello = world(); //hello값은 없습니다.
window.name; //전역변수 name이 생성 되었습니다.
window.print(); //전역함수 print가 생성 되었습니다.


let newHello = new world(); //this 가 반환됩니다
newHello.name; //hello world값이 있습니다.
newHello.print(); //콘솔이 실행 됩니다.

 

world 함수를 단순하게 호출하면 this 연산자에 의해서 name과 print가 전역변수 및 함수로 등록되어 버립니다.

그러면 브라우저가 종료될 때 까지 해당 변수 및 함수는 메모리 공간을 차지하게 됩니다.

new...

 

ECMA5 버전에서는 이러한 현상을 방지하기 위해서 this 라는 값의 여부를 응용하여 제한을 줄 수 있습니다.

일반적으로 this는 인스턴스화를 하지 않는 경우에는 전역 객체인 window를 의미 합니다.

function world(){

    if(!(this instanceof world)) throw new Error('new로 생성하지 않았습니다!');
    
    this.name = 'hello world';
    this.print = ()=>{
        console.log('print 실행')
    }
}

 

 

자바스크립트의 instanceof 연산자를 활용하여 this 값의 여부를 확인하게 하였습니다.

new 연산자를 사용하였다면 this 값은 world 함수 본인의 값이 되겠지만 그렇지 않는 경우의 this 값은 전역객체인 window의 값을 바라보게 됩니다.

new 없인 못만들게 하였습니다!

 

ECMA6 문법에서는 new.target 이라는 속성을 제공하여 조금더 코드를 줄여서(?) 쓸 수 있게 해 줍니다.

기존의 instanceof 를 사용했던 부분을 아래처럼 바꾸어 봅니다.

function world(){

    //if(!(this instanceof world)) throw new Error('new로 생성하지 않았습니다!');
    if(!(new.target)) throw new Error('new로 생성하지 않았습니다!');
    
    this.name = 'hello world';
    this.print = ()=>{
        console.log('print 실행')
    }
}

 

위 코드를 실행하면 instanceof를 사용하였던 함수와 마찬가지로 new 연산자를 활용하지 않는 함수 호출에 대해서 오류를 반환하게 되는 것을 볼 수 있습니다.

줄여쓰니 좀 나은거 같긴 합니다..ㅎ

 

함수 내부의 정의가 this 가 있으면서 해당 this 값이 전역객체가 아니라면 이러한 new 연산자를 사용하게 하는 방법이 꼭 포함되어야 할 것 같습니다.

 

이상으로 Javascript new 연산자 없이 호출되기 방지 방법에 대해서 살펴보았습니다.

궁금한점 또는 틀린 부분은 언제든 연락주세요!.👻