키워드 this
는
함수를 호출할 때 발생합니다. 즉, 그 값은
함수가 메서드, 독립형 함수 또는
생성자가 아닙니다.
함수가 호출되면 뒤에 this
키워드의 인스턴스가 생성됩니다.
해당 함수가 포함된 객체에 대한 참조로 장면을 표시하여
해당 범위 내에서 함께 정의된 속성과 메서드에 액세스할 수 있습니다.
this
를 사용하는 것은 선언된 변수를 사용하는 것과 몇 가지 측면에서 비슷합니다.
const
. 상수와 마찬가지로 this
는 삭제할 수 없으며 그 값은
재할당되지만 this
키워드가
변경할 수 있습니다.
전역 바인딩
함수 또는 객체의 컨텍스트 외부에서 this
는 다음을 나타냅니다.
globalThis
속성: 대부분의
JavaScript 환경입니다. 웹 브라우저에서 실행되는 스크립트의 컨텍스트에서,
전역 객체는 window
객체입니다.
this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}
Node.js에서 globalThis
는 global
객체입니다.
$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}
엄격 모드 외부에서 this
는 독립형
함수. 상위 Window
가 효과적으로 '소유'하는 객체이기 때문입니다.
살펴보겠습니다
function myFunction() {
console.log( this );
}
myFunction();
> Window {...}
(function() {
console.log( this );
}());
> Window {...}
엄격 모드를 사용하면 독립형 내에서 this
의 값이 undefined
입니다.
함수:
(function() {
"use strict";
console.log( this );
}());
> undefined
엄격 모드를 도입하기 전에 this
의 null
또는 undefined
값
전역 객체에 대한 참조로 대체됩니다. 가끔
전역 바인딩은 '기본 바인딩'이라고 합니다. 문제가 발생할 수 있습니다.
암시적 바인딩
함수가 객체의 메서드로 호출되면 내부의 this
인스턴스가
해당 메서드는 메서드가 포함된 객체를 참조하며
메서드와 속성이 있습니다.
let myObject = {
myValue: "This is my string.",
myMethod() {
console.log( this.myValue );
}
};
myObject.myMethod();
> "This is my string."
this
의 값은 함수와
정의된 모든 경계선에 적용됩니다. 대신 this
값의 컨텍스트는 다음과 같습니다.
현재 실행 컨텍스트입니다. 이 경우 실행 컨텍스트는
myObject
객체가 myMethod
메서드를 호출하므로 myObject
가 값입니다.
(this
) 이전 사례의 맥락에서 기술적으로 보일 수 있습니다.
예이지만 this
의 고급 사용의 경우
명심하세요
일반적으로 this
는 주변 코드에
특정 구조를 만들 수 있습니다. 이 규칙의 예외는 ES5입니다.
화살표 함수.
화살표 함수의 this
화살표 함수에서는
this
는
어휘적으로 포함된 환경. 즉,
화살표 함수의 this
는 해당 함수의 this
값을 참조합니다.
가장 가까운 바깥쪽 컨텍스트:
let myObject = {
myMethod() { console.log( this ); },
myArrowFunction: () => console.log( this ),
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
myObject.myArrowFunction();
> Window {...}
이전 예에서 myObject.myMethod()
는 myObject
를 객체로 로깅합니다.
을 '소유'하는 해당 메서드이지만 myObject.myArrowFunction()
가 globalThis
를 반환합니다.
(또는 undefined
) 화살표 함수 내의 this
인스턴스가
대신 가장 높은 바깥쪽 범위를 나타냅니다.
다음 예에서 myEnclosingMethod
는
객체를 정의합니다. 내부의 this
인스턴스는
이제 화살표 함수가 인클로징 내부의 this
값을 참조함
환경입니다. 왜냐하면
myEnclosingMethod
내부의 this
값은 myObject
를 참조하며
화살표 함수를 정의합니다. 화살표 함수 내의 this
도 다음을 참조합니다.
myObject
:
let myObject = {
myMethod() { console.log( this ); },
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
명시적 바인딩
암시적 바인딩은 this
작업을 위한 대부분의 사용 사례를 처리합니다. 하지만
특정 실행을 나타내기 위해 this
값이 필요할 수 있음
맥락에서 사용될 수 있습니다. 이 그림은 약간 오래된 것 같지만
setTimeout
의 콜백 함수 내에서 this
를 사용하는 예시입니다.
이 콜백에는 고유한 실행 컨텍스트가 있기 때문입니다.
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
myObject.myMethod();
> "This is my string."
setTimeout( myObject.myMethod, 100 );
> undefined
setTimeout
의 이러한 구체적인 단점은 이후
기타 기능, '손실'과 유사한 문제 this
번은 이전에 해결되었습니다.
다음 범위 내에서 this
의 값에 대한 명시적 참조를 만들어
도움이 됩니다. 간혹 this
의 인스턴스가 할당되는 경우가 있습니다.
레거시에서 that
, self
또는 _this
와 같은 식별자를 사용하여 변수에
생성합니다. 이것은
this
값을 전달했습니다.
call()
, bind()
또는 apply()
메서드를 사용하여 함수를 호출하면
this
는 호출되는 객체를 명시적으로 참조합니다.
let myFunction = function() {
console.log( this.myValue );
}
let myObject = {
"myValue" : "This is my string."
};
myFunction.call( myObject );
> "This is my string."
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."
명시적 바인딩은 암시적 바인딩에서 제공되는 this
값을 재정의합니다.
let myObject = {
"myValue" : "This string sits alongside myMethod.",
myMethod() {
console.log( this.myValue );
}
};
let myOtherObject = {
"myValue" : "This is a string in another object entirely.",
};
myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."
this
의 값을
undefined
또는 null
인 경우 이 값은 엄격을 벗어나 globalThis
로 대체됩니다.
모드:
let myFunction = function() {
console.log( this );
}
myFunction.call( null );
> Window {...}
마찬가지로 this
에 프리미티브를 제공하는 방식으로 함수가 호출되는 경우
해당 값은
원시 값의 래퍼 객체
엄격 모드 외:
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> Number { 10 }
엄격 모드에서는 전달된 this
값이 어떤 식으로든 객체로 강제되지 않습니다.
프리미티브, null
또는 undefined
값이더라도 다음과 같습니다.
"use strict";
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> 10
myFunction.call( null );
> null
바인딩 new
개
클래스가
new
키워드, this
는 새로 만든 인스턴스를 나타냅니다.
class MyClass {
myString;
constructor() {
this.myString = "My string.";
}
logThis() {
console.log( this );
}
}
const thisClass = new MyClass();
thisClass.logThis();
> Object { myString: "My string." }
마찬가지로 new
를 사용하여 호출되는 생성자 함수 내의 this
값
는 생성 중인 객체를 나타냅니다.
function MyFunction() {
this.myString = "My string.";
this.logThis = function() {
console.log( this );
}
}
const myObject = new MyFunction();
myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }
이벤트 핸들러 결합
이벤트 핸들러 컨텍스트에서 this
의 값은
호출합니다. 이벤트 핸들러의 콜백 함수 내에서 this
을 의미합니다.
는 핸들러와 연결된 요소를 참조합니다.
let button = document.querySelector( "button" );
button.addEventListener( "click", function( event ) { console.log( this ); } );
사용자가 이전 스니펫의 button
와 상호작용하면 다음과 같은 결과가 발생합니다.
<button>
자체를 포함하는 요소 객체입니다.
> Button {}
화살표 함수가 이벤트 리스너 콜백으로 사용되면
this
는 가장 가까운 바깥쪽 실행 컨텍스트에 의해 다시 제공됩니다. 상단에
이는 이벤트 핸들러 콜백 함수 내의 this
가
globalThis
(또는 엄격 모드에서 undefined
):
let button = document.querySelector( "button" );
button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined
다른 객체와 마찬가지로 call()
, bind()
또는 apply()
를 사용하는 경우
이벤트 리스너 this
의 콜백 함수를 참조하는 메서드
다음과 같이 객체를 명시적으로 참조합니다.
let button = document.querySelector( "button" );
let myObject = {
"myValue" : true
};
function handleClick() {
console.log( this );
}
button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }
이해도 확인
웹브라우저에서 실행되는 스크립트의 경우 전역 객체는
this
가 참조하는 함수 또는
컨텍스트라고 할 수 있을까요?
undefined
객체browser
객체window
객체