자바스크립트는 알면 알수록 무시무시한 함수입니다.
여러분 빨리 도망치세요..!
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를 가리키게 되고,
이 코드 작성자는 "??? : 아 그 코드 그렇게 쓰는거 아닌데" 라고 하는 것이다.
'개발 > javascript' 카테고리의 다른 글
React Array Toggle Element (리액트 배열 값 토글하기!) (0) | 2021.07.16 |
---|---|
React useState() Object 내부 값 변경 (0) | 2021.07.05 |
[Javascript] 당신의 머리를 터지게 만들 Instanceof (0) | 2020.12.17 |
자바스크립트만의 특징 몇가지 (ft. 호이스팅) + 예시 퀴즈 (0) | 2020.12.07 |
꼭 알아야 할 자바스크립트 성능 최적화를 위한 몇가지 꿀팁 (0) | 2020.12.03 |