JavaScript this 키워드

예제

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

직접 테스트해 보세요

this는 무엇인가요?

JavaScript this 키워드는 그 소속된 객체를 의미합니다.

그 사용 위치에 따라 다른 값을 가집니다:

  • 메서드에서는,this 은 소유자 객체를 의미합니다.
  • 단독으로 사용될 때는,this 는 전역 객체를 의미합니다.
  • 함수에서는,this 는 전역 객체를 의미합니다.
  • 함수에서는,严格模式下，this 는 undefined입니다.
  • 이벤트에서는,this 은 이벤트를 받는 요소를 의미합니다.

과 같이 call() 및 apply() 이와 같은 메서드는 this를 어떤 객체에도 참조할 수 있습니다.

메서드의 this

객체 메서드에서는,this 은 이 메서드의 "소유자"를 의미합니다.

이 페이지 상단의 예제에서는,this 은 person 객체를 의미합니다.

person 객체는 fullName 메서드의 소유자입니다.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

직접 테스트해 보세요

단독의 this

단독으로 사용될 때는 소유자는 전역 객체이므로 this 는 전역 객체를 의미합니다.

브라우저 창에서는 전역 객체는 [object Window]：

예제

var x = this;

직접 테스트해 보세요

严格模式에서는, 단독으로 사용될 때는, this 는 전역 객체를 의미합니다 [object Window]：

예제

"use strict";
var x = this;

직접 테스트해 보세요

함수의 this(기본)

JavaScript 함수에서는 함수의 소유자는 기본적으로 바인딩됩니다 this。

따라서, 함수에서는,this 는 전역 객체를 의미합니다 [object Window]。

예제

function myFunction() {
  return this;
}

직접 테스트해 보세요

함수의 this(严格模式)

JavaScript 严格模式는 기본 바인딩을 허용하지 않습니다.

따라서, 함수에서 사용할 때,严格模式下，this 는 정의되지 않은 것입니다(undefined）。

예제

"use strict";
function myFunction() {
  return this;
}

직접 테스트해 보세요

이벤트 처리기의 this

HTML 이벤트 처리기에서는,this 은 이 이벤트를 받는 HTML 요소를 의미합니다:

예제

<button onclick="this.style.display='none'">
  나를 지우기 위해 클릭하세요!
</button>

직접 테스트해 보세요

객체 메서드 바인딩

이 예제에서는,this 은 person 객체(person 객체는 이 함수의 "소유자"입니다):

예제

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

직접 테스트해 보세요

예제

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

직접 테스트해 보세요

다시 말해this.firstName 은 의미합니다 this의 (person) 객체 firstName 속성.

명시적 함수 바인딩

call() 및 apply() 메서드는 предопределенные JavaScript 메서드입니다.

그들은 모두 다른 객체를 인자로 사용하여 객체 메서드를 호출할 수 있습니다.

본 강의의 마지막 부분에서 call() 및 apply() 의 더 많은 내용을 읽을 수 있습니다.

다음 예제에서 person2를 인자로 사용하여 person1.fullName을 호출할 때this 인스턴스를 참조할 것입니다: person2,即使是 person1의 메서드

예제

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // "Bill Gates"를 반환합니다"

직접 테스트해 보세요