본문 바로가기

개발/javascript

[Javascript] instance of, arguments, callee, this, new

자바스크립트는 알면 알수록 무시무시한 함수입니다.
여러분 빨리 도망치세요..!

 

 

function a() {

	if ( !(this instanceof arguments.callee) ) {
    	return new a() ;
        
    /* blah blah... */
}

위 구문은 어떤 것을 의미할까?

 

하나하나씩 보자.

function

function 도 하나의 객체이다.

거기에 추가적으로 arguments, caller, length, name 처럼

function 고유의 property가 함께 빌트인 되어있다.

당연히 Object는 function 이 아니다.

Object가 더 큰 집합이다.

 

this, new

this : 함수의 호출자를 가리킨다. = 함수의 호출자와 바인딩 된다.

즉시실행함수와 같이 앞에 호출자가 없다면, default로 Window 객체를 가리킨다.

함수를 선언할 때 앞에 new 가 붙고 안붙고는 완전 다른 결과를 부른다.

 

예를 들면 :

  a(); 처럼 호출 한다면,

  a함수 속 this 는 Window 를 가리키게 된다.

 

  new a(); 처럼 호출 한다면

  a함수 속 this 는 a() 라는 새로 생성된 객체를 가리킨다.

 

  var func = a(); 처럼 호출한다면

  a함수 속 this 는 Window 를 가리키게 된다.

  func ; 를 하면 a() 가 실행된다.

  func() ; 를 하면 에러가 뜬다. 

 

  var func = new a(); 처럼 호출한다면

  a함수 속 this 는 a() 라는 새로 생성된 객체를 가리킨다.

  func ; 를 호출하면 a() 라는 새로 생성된 객체를 가리킨다.

  func() ; 를 호출하면 에러가 뜬다.

 

this를 변경하고 싶다면 call / apply 함수를 사용하면 this를 넘겨줄 수 있다.

 

instanceof

==, <= 와 같이 앞, 뒤로 인자를 받아 비교해서 Boolean값을 반환하는 비교연산자이다.

자바스크립트의 모오오든 것은 Object이고, 모오오든 Object는 prototype을 갖고 있다.

나무처럼 아래로 Prototype이 내려가며 이어져 있는 것을 보고 Prototype Chain 이라고 하는데,

A instanceof B 는 이 A가 B의 prototype chain에 속해 있는지 알려주는 것이다.

( B가 부모고 A가 그 자식인지 친자판독해주는 것이다 )

 

var Person = function () { this.age = 5 } ;
var Annie = new Person() ;

Annie instanceof Person ; // true
Annie instanceof Object ; // true

 

instanceof 도 재미있는 특징이 있는데, 궁금하면 여기로 와보세욤 ㅎ

 

arguments

아규먼트 특성은 function 객체의 고유 프로퍼티이다.

function myfunc (a, b, c) {
	console.log(arguments[0]);
    return arguments ;
}

myfunc(2, 4, 6) ;
// 2
// Arguments(3) 배열 [2, 4, 6]

실행결과 쨔잔

이런 역할을 하는 것이다. 상당히 직관적인 코드이다.

여기서 특별한 것은 callee 라는 항목이다. callee는 브로콜리랑은 상관 없다 ㅎ

arguments.callee 로 함수 자기 자신을 반환해주는 항목이다.

 

 

다시 맨 처음으로 돌아와서

function a() {

	if ( !(this instanceof arguments.callee) ) {
    	return new a() ;
        
    /* blah blah... */
}

이제 이 코드를 해석할 수 있겠는가?

 

만약 a() 의 호출자가 이 함수의 prototype chain 에 속해 있지 않다면,

new a() 를 리턴해준다.

 

즉, 코드 작성자는 a함수를 부를 때 new a() ; 하기를 의도하는데,

new 붙이는거 까먹었는지 체크해서 다시 new a() ; 를 반환해주는 함수이다.

 

저 함수가 없다면

var asdf = a() ; 를 했을 때 a 함수 속 this 는 Window를 가리키게 되고,

이 코드 작성자는 "??? : 아 그 코드 그렇게 쓰는거 아닌데" 라고 하는 것이다.

반응형