Featured image of post Javascript - this
Frontend

Javascript - this

자바스크립트 학습

Javascript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작한다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있다.

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정되는데, 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다.

ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했다.(렉시컬 컨텍스트안의 this값을 유지함)

전역 문맥

전역 실행 문맥(global execution context)에서 this는 엄격 모드 여부에 관계 없이 전역 객체를 참조한다.

1
2
3
4
5
6
7
8
9

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

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

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

함수 문맥

함수 내부에서 this의 값은 함수를 호출한 방법에 의해 결정된다.

단순 호출

엄격 모드가 아닐경우 this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역 객체를 참조하게 된다.

1
2
3
4
5
6
7
8
9

function f1() {
  return this;
}

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

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

반면에 엄격 모드에서 this 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 this는 undefined로 남아있게 된다.

1
2
3
4
5
6

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

f2() === undefined; // true

f2를 객체의 메서드나 속성(예: window.f2())이 아닌 직접 호출했기 때문에 this는 undefined여야 하지만 브라우저에서 엄격 모드를 지원하지 않는다면 window 객체를 반환한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var prop = 1;

var test = {
  prop: 42,
  func: function() {
    var func2 = function() {
    	console.log(this);
    }

    console.log(this);
    
		func2();
  },
};

test.func();

/* 
> Object { prop: 42, func: function() {
    var func2 = function() {
    	console.log(this);
    }
    console.log(this);
    func2();
  } }
> [object Window] // browser
> [object global] // node.js
*/

function 키워드로 선언된 함수가 전역 실행 문맥(global execution context)에서 호출되었기 때문에 this는 엄격 모드 여부에 관계 없이 전역 객체를 참조한다.

bind 메서드

ECMAScript5는 Function.prototype.bind를 도입했다. f.bind(someObject)를 호출하면 f와 같은 본문(코드)과 범위를 가졌지만 this는 원본 함수를 가진 새로운 함수를 생성한다. 새 함수의 this는 호출 방식과 상관없이 영구적으로bind()의 첫 번째 매개변수로 고정된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function f() {
  return this.a;
}

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

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

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

화살표 함수

화살표 함수에서 this는 자신을 감싼 정적 범위(lexical context)이다. 전역 코드에서는 전역 객체를 가르킨다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

var globalObject = this;

var foo = (() => this);

console.log(foo() === globalObject); // true

// 객체로서 메서드 호출
var obj = {func: foo};
console.log(obj.func() === globalObject); // true

// call을 사용한 this 설정 시도
console.log(foo.call(obj) === globalObject); // true

// bind를 사용한 this 설정 시도
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

화살표 함수를 call(), bind(), apply()를 사용해 호출할 때 this의 값을 정해주더라도 무시한다. 사용할 매개변수를 정해주는 건 문제 없지만, 첫 번째 매개변수(thisArg)는 null을 지정해야 한다.

어떤 방법을 사용하든 foo의 this는 생성 시점의 것으로 설정된다.(위 예시에서는 global 객체). 다른 함수 내에서 생성된 화살표 함수에도 동일하게 적용된다. this는 싸여진 렉시컬 컨텍스트로 유지된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

var fn = obj.bar();
console.log(fn() === obj); // true

var fn2 = obj.bar;
console.log(fn2()() === window); // true

화살표 함수의 범위는 선언될때 결정되는데, fn은 obj.bar()로 호출된 x를 활용하게 되어 this가 obj 를 의미하게 되고, fn2는 전역 실행 문맥에서 obj.bar 자체를 fn2에 할당 하였기 때문에 window로 설정되었다.

객체의 메서드를 호출할 때

함수를 어떤 객체의 메서드로 호출하면 this의 값은 그 객체를 사용한다.

다음 예제에서 o.f()를 실행할 때 o 객체가 함수 내부의 this와 연결된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

o.b = {g: independent, prop: 42};
console.log(o.b.g()); // logs 42

this 바인딩은 멤버 대상에 영향을 받는다. 함수를 실행할 때, 객체 o.b의 메소드 g 로서 호출하면 함수 내부의 this는 o.b를 나타낸다.

객체의 프로토타입 체인에서의 this

메서드가 어떤 객체의 프로토타입 체인 위에 존재한다면, this의 값은 그 객체가 메서드를 가진 것 처럼 설정된다.

1
2
3
4
5
6
7
8

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

이 예제에서, f 속성을 가지고 있지 않은 변수 p가 할당된 객체는, 프로토타입으로 부터 상속받는다. 그러나 그것은 결국 o에서 f 이름을 가진 멤버를 찾는 되는 문제가 되지 않는다 ; p.f를 찾아 참조하기 시작하므로, 함수 내부의 this는 p 처럼 나타나는 객체 값을 취한다. 즉, f는 p의 메소드로서 호출된 이후로, this는 p를 나타낸다. 이것은 JavaScript의 프로토타입 상속의 흥미로운 기능이다.

접근자와 설정자의 this

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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는 새로 생긱 객체에 묶인다.