This

Rosevillage·2023년 1월 1일

This

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)

전역 문맥

전역 실행 맥락에서 this는 엄격모드 여부에 관계없이 전역 객체를 참조

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

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

this.b = "hello";
console.log(window.b)  // "hello"
console.log(b)         // "hello"

let과 const는 var와 다르게 전역 범위 선언에 사용(최상위 스코프 선언)해도 window 객체에 새로운 속성을 추가하지 않는다. (알고 쓰자)

함수 문맥

함수 내부에서 this의 값은 함수의 호출 방법에 따라 결정

단순 호출

엄격모드가 아닐때는 전역 객체를 참조

function f() {
  return this;
}

// 브라우저
f() === window; // true

// Node.js
f() === global; // true

엄격모드일 때는 실행 문맥에 진입하여 설정되는 값을 유지하므로 undefined

function f(){
  "use strict"; // 엄격 모드
  return this;
}

f() === undefined; // true

bind 메서드

bind를 사용해 함수를 호출하면, 지정된 함수와 같은 본문과 범위를 가지지만 this는 원본 함수를 가진 새로운 함수를 생성, 새 함수의 this는 호출 방식과 상관없이 영구적으로 bind의 첫 번째 매개변수로 고정

function f() {
  return this.a;
}

var g = f.bind({a: 'rosevilleage'});
console.log(g()); // rosevilleage

var h = g.bind({a: 'tulip'}); // bind는 한 번만 동작
console.log(h()); // rosevilleage

var o = {a: 100, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 100, 100, rosevilleage, rosevilleage

화살표 함수
- 화살표 함수에서 this는 자신을 감싼 정적 범위, 전역 코드에서는 전역 객체를 가라킨다.
```
var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
```
- 화살표 함수는 call(), bind(), apply()를 사용해 호출할 때 this의 값을 정해주더라도 무시하므로 첫 번째 매개변수(thisArg)는 null을 지정해야 한다.
객체의 메서드
- 함수를 객체의 메서드로 호출하면 this의 값은 그 객체를 사용
```
var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // 37
```
- 함수를 먼저 정의하고 나중에 o.f를 추가해도 동일한 동작 결과를 보인다. 즉 함수가 o의 멤버 f로 부터 호출 된 것만이 중요하다는 의미이다.
객체의 프로토타입 객체
- 메서드가 어떤 객체의 프로토타입 체인 위에 존재하면, this의 값은 그 객체가 메서드를 가진 것 마냥 설정된다.
```
 var o = {
   f:function() { return this.a + this.b; }
 };
 var p = Object.create(o);
 p.a = 1;
 p.b = 4;
 
 console.log(p.f()); // 5
```
- 객체p는 프로토타입인 o로 부터 상속을 받는다. 함수는 p.f를 찾아 참조하기 시작하므로, 함수 내부의 this는 p처럼 호출한 객체의 값을 취한다. 즉, f는 p의 메소드로서 호출된 이후로, this는 p를 나타낸다.

접근자와 설정자

함수를 접근자와 설정자에서 호출하더라도 동일한 결과를 가진다. 접근자나 설정자로 사용하는 함수의 this는 접근하거나 설정하는 속성을 가진 객체로 묶인다.

 function sum() {
   return this.a + this.b + this.c;
 }

 var o = {
   a: 1,
   b: 2,
   c: 3,
   get average() {
     return (this.a + this.b + this.c) / 3;
   }
 };

 Object.defineProperty(o, 'sum', {
   get: sum, enumerable: true, configurable: true
 });

 console.log(o.average, o.sum); // 2, 6

생성자
- 함수를 new 키워드와 함께 생성자로 사용하면 this는 새로 생긴 객체에 묶인다
DOM이벤트 처리기
- 함수를 이벤트 처리기로 사용하면 this는 이벤트를 발생시킨 요소로 설정된다.
인라인 이벤트 헨들러
- 코드를 인라인 이벤트 처리기로 사용하면 this는 처리기를 배치한 DOM 요소로 설정
```
<button onclick="alert(this.tagName.toLowerCase());">
  this 표시
</button>
//	button을 표시
```
- 아래 같은 경우 내부 함수의 this는 정해지지 않았으므로 전역/window 객체를 반환
```
<button onclick="alert((function() { return this; })());">
   내부 this 표시
</button>
// 전역/window를 표시
```

참고 사이트

Rosevillage

이전 포스트

객체 메서드(Object Method)

다음 포스트

This

This

전역 문맥

함수 문맥

객체 메서드(Object Method)

원시 자료형과 참조 자료형

0개의 댓글