S06. advanced2
Advanced 2 (this, Closure)
-
this는 함수를 어떻게 실행하느냐에 따라 바뀐다.
- 일반함수(non-strict) : window (실무에선 this를 window로 사용하는 건 버그다. 차리리 window로 선언해라)
var name = 'ken'; function log() { console.log(this.name); => window.name } log(); // ken
-
일반함수(strict 모드) : undefined
-
점 방식 : 함수명 앞 객체
-
foo.call(ken) : call 내 문자열이 this ( foo(), foo.call() 은 동일한 의미)
foo.apply(ken)도 동일하게 동작 -
foo.call(ken, 1, 2, 3, 4, 5) : ken이 this, 1~5는 foo의 매개변수로 들어감
-
foo.apply(ken, [1, 2, 3, 4, 5]) : apply는 2번째 인자를 배열로 받고, 배열의 요소가 하나하나 매개변수로 들어간다.
-
foo.bind(ken) : ken이 this인 foo함수의 리턴값을 반환
var bar = foo.bind(ken)
, foo.bind(ken)만으론 실행 X
bar(1, 2, 3, 4, 5); 가능 -
new로 선언된 함수 내에서 this는 빈 객체
new로 선언한 함수는 return this; 를 자동으로 한다. (return {} 만 강제할 수 있다.) -
var ken = new Person('ken', 34, 'm');
여기서 ken을 instance라 한다. (생성자 함수를 리턴하는 값을 담는 변수) Person을 생성자함수(constructor)라 한다.console.log(ken instanceof Person);
부모, 자식간 관계 확인, true or false 반환 - Closure
함수 생성 시 주변 스코프를 기억하는 성격을 클로져라 한다.
function say () {
var a = 2;
function log () {
console.log(a);
}
return log;
}
// 'log' function was just returned and assigned to variable 'a'.
var a = say();
// we are invoking 'log' function here. but it can still access the variable 'a' and log successfully.
a();
// Example #4
// 클로져는 선언뿐만 아니라 계속 변수의 변경 값도 계속 주시하고 있다.
var foo;
function doSomething () {
var a = 1;
function something () {
a++;
console.log(a);
}
foo = something;
}
function say () {
foo();
}
doSomething();
say(); // 2
say(); // 3
say(); // 4
======================
You Don’t Know JS
this 확정 규칙
- new로 함수를 호출(new 바인딩) 했는가? 맞으면 새로 생성된 객체가 this다.
var bar = new foo();
- call과 apply로 함수를 호출(명시적 바인딩), 이를테면 bind 하드 바인딩 내부에 숨겨진 형태로 호출됐는가? 명식적으로 지정된 객체가 this다.
var bar = foo.call(obj2);
- 함수를 콘텍스트(암시적 바인딩), 즉 객체를 소유 또는 포함하는 형태로 호출했는가? 바로 이 콘텍스트 객체가 this다.
var bar = obj1.foo();
- 그 외에 경우엔 this는 기본값으로 세팅된다.
var bar = foo(); // 엄격모드는 undefined, 비엄격모드는 전역객체