이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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

대부분의 경우 this의 값은 함수를 호출한 방법이 결정합니다. 실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ECMAScript 5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ECMAScript 2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다.

구문

this

전역 문맥

전역 실행 문맥global execution context, 즉 아무 함수에도 속하지 않은 범위에서 this는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.

// 웹 브라우저에서는 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의 값이 호출에 의해 설정되지 않으므로 기본값으로 전역 객체를 참조합니다.

function f1() {
  return this;
}

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

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

그러나 엄격 모드에서 this 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음과 같은 경우 thisundefined가 됩니다.

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

f2() === undefined; // true

즉 엄격 모드에서, 실행 문맥이 this의 값을 설정하지 않으면 undefined로 남아있게 됩니다.

두번째 예제에서 f2를 객체의 메서드나 속성(예: window.f2())으로써가 아닌 직접 호출했기 때문에  thisundefined여야 합니다. 그러나 엄격 모드를 처음 지원하기 시작한 초기 브라우저에서는 구현하지 않았고, window 객체를 잘못 반환했습니다.

this의 값을 한 문맥에서 다른 문맥으로 넘기려면 call()이나 apply()를 사용하세요.

// call()이나 apply()의 첫 번째 매개변수로 객체를 제공하면 this가 그 객체에 묶임
var obj = {a: 'Custom'};

// 전역 객체에 속성 지정
var a = 'Global';

function whatsThis() {
  return this.a;  // 함수 호출 방식에 따라 값이 달라짐
}

whatsThis();          // 'Global'
whatsThis.call(obj);  // 'Custom'
whatsThis.apply(obj); // 'Custom'

함수가 함수 본문에서 this 키워드를 사용하는 곳이라면 그 값을 Function.prototype으로부터 상속받는 call()이나 apply() 메서드를 사용해 특정한 객체에 묶을 수 있습니다.

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 첫 번째 매개변수는 this를 묶을 객체
// 이어지는 인수들은 함수 호출에 사용할 매개변수
add.call(o, 5, 7); // 16

// 첫 번째 매개변수는 this를 묶을 객체
// 두 번째 매개변수는 배열,
// 각 요소를 함수 호출에 사용
add.apply(o, [10, 20]); // 34

call()과 apply()에서, this로 제공한 값이 객체가 아니라면 내부 ToObject 연산을 사용해 객체로 변환하려 시도합니다. 따라서 주어진 값이 7이나 "foo"처럼 원시 값이라면 관련 생성자를 사용해 객체로 변환합니다. 그래서 원시 7new Number(7), 문자열 "foo"new String("foo")를 사용한 것과 같아집니다.

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]

bind 메서드

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

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입니다. 전역 코드에서는 전역 객체를 가리킵니다.

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

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

// 객체로서 메서드 호출
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

No matter what, foo's this is set to what it was when it was created (in the example above, the global object). The same applies to arrow functions created inside other functions: their this remains that of the enclosing lexical context.

// Create obj with a method bar that returns a function that
// returns its this. The returned function is created as 
// an arrow function, so its this is permanently bound to the
// this of its enclosing function. The value of bar can be set
// in the call, which in turn sets the value of the 
// returned function.
var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

// Call bar as a method of obj, setting its this to obj
// Assign a reference to the returned function to fn
var fn = obj.bar();

// Call fn without setting this, would normally default
// to the global object or undefined in strict mode
console.log(fn() === obj); // true

// But caution if you reference the method of obj without calling it
var fn2 = obj.bar;
// Then calling the arrow function this is equals to window because it follows the this from bar.
console.log(fn2()() == window); // true

In the above, the function(call it anonymous function A) assigned to obj.bar returns another function(call it anonymous function B) that is created as an arrow function. As a result, function B's  this is permanently set to the this of obj.bar (function A)when called. When the returned function(function B) is called, its this will always be what it was set to initially. In the above code example, function B's this is set to function A's this which is obj, so it remains set to obj even when called in a manner that would normally set its this to undefined or the global object (or any other method as in the previous example in the global execution context).

객체의 메서드로서

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

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

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

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

이 행동이 함수가 정의된 방법이나 위치에 전혀 영향을 받지 않는 것에 유의해라. 이전 예제에서, o 의 정의 중 f 함수를 구성원으로 내부에 정의 하였다.  그러나, 간단하게 함수를 먼저 정의하고 나중에 o.f를 추가할 수 있다. 이렇게 하면 동일한 동작 결과 이다 :

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

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

이는 함수가 o의 멤버 f로 부터 호출 된 것만이 중요하다는 것을 보여준다.

마찬가지로, 이 this 바인딩은 가장 즉각으로 멤버 대상에 영향을 받는다. 다음 예제에서, 함수를 실행할 때, 객체 o.b의 메소드 g 로서 호출한다. 이것이 실행되는 동안, 함수 내부의 thiso.b를 나타낸다. 객체는 그 자신이 o의 멤버 중 하나라는 사실은 중요하지 않다. 가장 즉각적인 참조가  중요한 것이다.

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

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

같은 개념으로 객체의 프로토타입 체인 어딘가에 정의한 메서드도 마찬가지입니다. 메서드가 어떤 객체의 프로토타입 체인 위에 존재하면, 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

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

접근자와 설정자의 this

다시 한 번 같은 개념으로, 함수를 접근자와 설정자에서 호출하더라도 동일합니다. 접근자나 설정자로 사용하는 함수의 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는 새로 생긴 객체에 묶입니다.

While the default for a constructor is to return the object referenced by this, it can instead return some other object (if the return value isn't an object, then the this object is returned).

/*
 * Constructors work like this:
 *
 * function MyConstructor(){
 *   // Actual function body code goes here.  
 *   // Create properties on |this| as
 *   // desired by assigning to them.  E.g.,
 *   this.fum = "nom";
 *   // et cetera...
 *
 *   // If the function has a return statement that
 *   // returns an object, that object will be the
 *   // result of the |new| expression.  Otherwise,
 *   // the result of the expression is the object
 *   // currently bound to |this|
 *   // (i.e., the common case most usually seen).
 * }
 */

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37


function C2() {
  this.a = 37;
  return {a: 38};
}

o = new C2();
console.log(o.a); // 38

DOM 이벤트 처리기로서

함수를 이벤트 처리기로 사용하면 this는 이벤트를 발사한 요소로 설정됩니다. 일부 브라우저는 addEventListener() 외의 다른 방법으로 추가한 처리기에 대해선 이 규칙을 따르지 않습니다.

// 처리기로 호출하면 관련 객체를 파랗게 만듦
function bluify(e) {
  // 언제나 true
  console.log(this === e.currentTarget); 
  // currentTarget과 target이 같은 객체면 true
  console.log(this === e.target);
  this.style.backgroundColor = '#A5D9F3';
}

// 문서 내 모든 요소의 목록
var elements = document.getElementsByTagName('*');

// 어떤 요소를 클릭하면 파랗게 변하도록
// bluify를 클릭 처리기로 등록
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', bluify, false);
}

인라인 이벤트 핸들러에서

코드를 인라인 이벤트 처리기로 사용하면 this는 처리기를 배치한 DOM 요소로 설정됩니다.

<button onclick="alert(this.tagName.toLowerCase());">
  this 표시
</button>

위의 경고창은 button을 보여줍니다. 다만 바깥쪽 코드만 this를 이런 방식으로 설정합니다.

<button onclick="alert((function() { return this; })());">
  내부 this 표시
</button>

위의 경우, 내부 함수의 this는 정해지지 않았으므로 전역/window 객체를 반환합니다. 즉 비엄격 모드에서 this를 설정하지 않은 경우의 기본값입니다.

명세

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'The this keyword' in that specification.
Draft  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'The this keyword' in that specification.
Standard  
ECMAScript 5.1 (ECMA-262)
The definition of 'The this keyword' in that specification.
Standard  
ECMAScript 3rd Edition (ECMA-262)
The definition of 'The this keyword' in that specification.
Standard  
ECMAScript 1st Edition (ECMA-262)
The definition of 'The this keyword' in that specification.
Standard Initial definition. Implemented in JavaScript 1.0.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, utatti, huusz, teoli, eros21c, Channy
최종 변경자: urty5656,