[JavaScript] Chapter 15. This

this

• 함수 호출 방법에 따라 값이 결정 => 바인딩

 

전역 객체 (global Object)

• 모든 객체의 최상위 객체
• 자바스크립트에서는 window 객체

 

전역 객체에 바인딩 되는 경우

• this는 전역 객체(window)에 바인딩

1.  전역 함수
2.  내부 함수
3.  콜백 함수
4.  등등..

javascript

닫기 줄바꿈

// 내부 함수
function sFoo() {
​​​​console.log("sFoo ::: " + this); // sFoo ::: [object Window]
}

function mFoo() {
​​​​console.log("sFoo ::: " + this); // mFoo ::: [object Window]
​​​​sFoo();
}

 

this 바인딩 종류

1.  기본 바인딩
2.  암시적 바인딩
3.  명시적 바인딩
4.  new 바인딩
5.  화살표 함수

 

기본 바인딩

• 기본 규칙
• 전역(global) 바인딩

*웹 브라우저 전역 객체 - Window 객체

javascript

닫기 줄바꿈

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

 

 

암시적 바인딩

• 함수 호출 위치에 따라 바인딩 됨
• 암시적으로 바인딩 되는 것

javascript

닫기 줄바꿈

window.str = "window";

function foo() {
​​​​console.log(this === obj);
​​​​console.log(this.str);
}

var obj = {
​​​​str : 10,
​​​​fn : foo  // foo함수 참조
}

obj.fn(); // 암시적 바인딩
// 결과는 [true, 10]
// 함수 호출을 obj에서 함 => this는 obj를 참조함
// this는 obj를 참조하기 때문에, this.str은 obj의 str 값이 출력됨


foo(); // 기본 바인딩

 

명시적 바인딩

• 암시적 바인딩의 반대
• 명시적으로 바인딩 시키는 것
• call, apply 이용

javascript

닫기 줄바꿈

window.str = "window";

function foo() {
​​​​console.log(this === obj);
​​​​console.log(this.str);
}

var obj = {
​​​​str : 10,
​​​​fn : foo  // foo함수 참조
}

foo.call(obj); // 명시적 바인딩
// 결과는 [true, 10]
// call을 이용하여 foo함수에서 obj를 참조하겠다고 명시적으로 바인딩 한 것

 

new 바인딩

• new 키워드 사용하여 바인딩
• 함수 호출 시, new 키워드 이용

javascript

닫기 줄바꿈

function foo(str) {
​​​​console.log(this === obj);
​​​​console.log(this.str);
​​​​this.str = str;
​​​​console.log(this.str);
}

var obj = new foo("new 바인딩");
console.log(obj.str); // new 바인딩
// 출력 결과 [false, undefined, new 바인딩, new 바인딩]

 

화살표 함수

• this 바인딩 예외 적용
• 이미 바인딩 된 것은 다시 바인딩 불가 => 암시적, 명시적이던 재바인딩 불가