이 키워드

키워드 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 }

이해도 확인