[코어 자바스크립트] 상황에 따라 달라지는 this

link717·2021년 1월 3일
0
post-thumbnail

🙂 this

자바스크립트에서 this는 실행 컨텍스트가 생성될 때 결정됩니다. 실행 컨텍스트가 실행되는 경우는 함수가 호출될 때이므로 this는 함수가 실행될 때 결정된다고 할 수 있습니다.

🧐 1) 전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서의 전역객체는 this이고 Node.js 환경에서는 global입니다.

let a = this;
let b = window;

console.log(a === b); // true

이 전역 공간에서 전역 변수를 선언할 경우, 자바스크립트 엔진은 전역 객체의 프로퍼티로써 변수를 할당합니다. window 프로퍼티로 직접 변수를 선언하면 그 결과는 전역 변수를 선언하는 경우와 동일할 것이라고 예상할 수 있습니다. 다만, 변수를 삭제하는 경우에는 그 결과가 조금 다릅니다.

var c = 1;

console.log(c, window.c, this.c);  // 1 1 1

/*변수 c를 let 또는 const로 선언했을 경우에는 다른 결과가 나온다.*/

window.d = 1;
var e = 2;

console.log(d, window.d, this.d); // 1 1 1
console.log(e, window.e, this.e); // 2 2 2

// 전역 변수로 선언된 변수의 경우, configurable 속성(변경 및 삭제 가능성)이 false로 할당된다.
console.log(delete window.d); // true
console.log(delete window.e); // false

🧐 2) this를 호출할 때의 상황

자바스크립트에서 함수는 그 자체로 독립적인 기능을 수행하는 반면, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행합니다.

2-1 함수로서 호출할 때

  • this는 전역 객체를 참조합니다.
  • 함수가 this로 전역 객체를 binding 하는 문제를 해결하기 위해 es6에서는 arrow function(화살표 함수)이 도입되었습니다. 실행 컨텍스트가 실행될 때, 화살표 함수는 this를 binding 하는 과정을 skip하고 상위 스코프의 this를 그대로 사용할 수 있습니다.(호출 당시의 상황은 상관없습니다.)

2-2 메서드로서 호출할 때

  • this는 메서드의 호출 주체(객체)를 참조합니다.

2-3 생성자 함수 내부에서 호출할 때

  • this는 곧 새로 만들어지는 구체적인 인스턴스 자신이 됩니다.
profile
Turtle Never stop

0개의 댓글