JavaScript this 키워드
예시
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
이게 뭐야 ?
JavaScript this
키워드는 그것이 속한 객체를 참조합니다.
사용 위치에 따라 값이 다릅니다.
- 메서드 에서 소유자 개체
this
를 나타냅니다 . - 단독으로 전역 개체
this
를 참조 합니다 . - 함수 에서 전역 개체
this
를 나타냅니다 . - 함수에서 엄격 모드에서는
this
입니다undefined
. - 이벤트에서 이벤트 를 수신한 요소
this
를 나타냅니다 . call()
, 및 같은 메서드는 모든 개체apply()
를 참조this
할 수 있습니다 .
이것은 메소드에서
개체 메서드에서 메서드 this
의 " 소유자 "를 나타냅니다.
이 페이지 상단의 예에서 는 사람 개체 this
를 나타냅니다 .
person 개체는 fullName 메서드 의 소유자 입니다 .
fullName : function() {
return this.firstName + " " + this.lastName;
}
이 혼자
단독으로 사용하는 경우 소유자 는 전역 개체이므로 전역 개체를 this
참조합니다.
브라우저 창에서 전역 개체는 [object Window]
다음과 같습니다.
예시
let x = this;
엄격 모드 에서 단독으로 사용 this
되면 Global 객체도 참조합니다
[object Window]
.
예시
"use strict";
let x = this;
함수의 this (기본값)
JavaScript 함수에서 함수의 소유자는 에 대한 기본 바인딩입니다 this
.
따라서 함수에서 this
Global 객체를 참조합니다 [object Window]
.
예시
function myFunction() {
return this;
}
이것은 함수에서 (엄격)
JavaScript 엄격 모드 는 기본 바인딩을 허용하지 않습니다.
따라서 함수에서 사용할 때 엄격 모드에서는 this
입니다 undefined
.
예시
"use strict";
function myFunction() {
return this;
}
이것은 이벤트 핸들러에서
HTML 이벤트 핸들러에서 this
이벤트를 수신한 HTML 요소를 나타냅니다.
예시
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
개체 메서드 바인딩
이 예에서 this
는 사람 객체입니다(사람 객체는 함수의 "소유자"입니다).
예시
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
예시
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
즉, this.firstName 은 이 (사람) 객체 의 firstName 속성을 의미 합니다.
명시적 함수 바인딩
및 메소드는 사전 정의된 JavaScript 메소드입니다 call()
.apply()
둘 다 다른 개체를 인수로 사용하여 개체 메서드를 호출하는 데 사용할 수 있습니다.
이 자습서의 뒷부분에서 자세한 내용 call()
을 읽을 수 있습니다 .apply()
아래 예에서 person2를 인수로 사용하여 person1.fullName을 호출하면 this
person1의 메서드인 경우에도 person2를 참조합니다.
예시
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"