✔️ this는 함수 내부에서 사용 가능 ⇒ 유연, 재사용성
가리키는 값은 `함수를 실행(호출)할 때` 결정된다.3-1 상황에 따라 달라지는 this
✔️ this는 실행 컨텍스트가 생성될 떄 함께 결정
→ 실행컨텍스트는 함수를 실행(호출)할 떄 결정되므로, this도 함수를 호출할 때 결정된다.
3-1-1 전역 공간에서의 this
전역 공간에서의 this는 전역 객체
→브라우저 환경? window, Node.js환경? global
자바스크립트의 변수 = 특정 객체(실행 컨텍스트의 L.E)의 프로퍼티로서 동작
var a = 1;
window.b = 2;
console.log(b, window.b, this.b); // 2 2 2
delete window.a; // 삭제안됨
delete window.b; // 삭제됨
/* 처음부터 전역객체의 프로퍼티로 할당 => 삭제
전역변수로 할당 => js 엔진이 configurable 속성 false로 정의 => 삭제 안됨 */3-1-2 메서드로서 호출할 때 그 메서드 내부에서의 this
함수 vs 메서드? 독립성
함수? 그 자체로 독립적 기능 수행
foo();
//함수로서 호출메서드? 호출한 대상 객체에 관한 동작 수행
obj.method(1);
obj['method'](2);
//메서드로서 호출메서드 내부에서 this?
호출 주체는 함수명 앞의 객체
3-1-3 함수로서 호출할 때 그 함수 내부에서의 this
일반 함수 실행에서 this?
this 값은 global object (브라우저에서는 window 객체)
3-1-4 콜백 함수 호출 시 그 함수 내부에서의 this
콜백함수? 함수 A의 제어권을 다른 함수(메서드) B에게 넘겨주는 경우 함수 A
이 경우 this? 제어권을 가지는 함수가 정의하는 this
3-1-5 생성자 함수 내부에서의 this
생성자 함수로 만든 객체 = 인스턴스
new Foo ⇒ 해당 함수가 생성자로서 동작
// 생성자 함수는 이름 첫글자를 대문자로 함this? 인스턴스 자신 (새로운 빈 객체)
3-2 명시적으로 this를 바인딩하는 방법
✔️ 모든 자바스크립트 객체(배열, 함수 포함)은 내장 메소드를 가짐
함수 또한 함수만의 메소드가 있고, 아래는 함수의 특정 메소드를 이용한 함수 실행 방식3-2-1 call 메서드
this? call 메서드의 첫 번째 인자로 받은 값, 이후 인자들은 호출할 함수의 매개변수
call 메소드는 받을 수 있는 인자의 제한이 없음
3-2-2 apply 메서드
this? 기본적으로 call과 동일
두 번째 인자를 배열로 받아 호출할 함수의 매개변수로 지정 → 동적인 상황에서 apply 사용
3-2-3 call/ apply 메서드의 활용
유사배열객체에 배열 메서드를 적용
생성자 내부에서 다른 생성자를 호출
여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 → apply 활용
3-2-4 bind 메서드
this? 첫 번째 인자로 받은 값, 이후 인자들은 호출할 함수의 매개변수
bind 메소드는 원본 함수를 복제한 새로운 함수를 반환, 새로운 함수를 실행해야 원본함수 실행됨
새로운 함수에 인자가 포함될 경우, bind 메소드에 포함된 인자에 이어서 전달
bind 메소드는 받을 수 있는 인자의 제한이 없음
bind가 일반함수호출보다 우선순위가 높음
function foo(){
console.log("foo");
}
const bar = foo.bind();
bar();3-2-5 화살표 함수의 예외사항
화살표함수에서는 this가 없음 → 상위 scope에서 찾음
3-2-6 별도의 인자로 this를 받는 경우(콜백함수 내에서의 this)
요소를 순회하면서 콜백 함수를 반복 호출? 별도의 인자로 this를 받음
