JS에서 'this' 키워드 이해하기

소개

이 키워드는 모든 객체 지향 프로그래밍 언어에서 특별한 위치를 차지하며 Javascript에서 마음을 구부려 왔습니다. 말할 필요도 없이, 그것은 모든 면접관들이 가장 좋아하는 주제였습니다.
따라서 이것이 무엇을 의미하고 다른 맥락에서 그 가치가 무엇인지 자세히 살펴보겠습니다.

이 키워드는 이것이 사용된 함수 또는 코드 블록의 실행 컨텍스트를 반환합니다.
예를 들어, '엄격' 모드 여부에 관계없이 전역 컨텍스트(함수 외부)에서 다음 작업을 수행하면 다음과 같은 결과를 얻게 됩니다.

const name = "XYZ";
console.log(window.name); // Prints XYZ
console.log(this === window) // Prints true

함수 컨텍스트

이 경우 this의 값은 함수가 호출되는 방식에 따라 다릅니다.
엄격 모드가 아닌 경우:

function f() {
  console.log(this === window)
}

f(); // prints true

'strict' 모드에서 실행 컨텍스트에 들어갈 때 이것이 설정되지 않으면 정의되지 않은 상태로 유지됩니다.

function f() {
  'use strict';
  console.log(this===undefined);
}

f();  // prints true

Note: apply() 또는 call() 함수를 사용하여 설정할 수 있습니다.

const x = {val: 'x-val'};
const val = 'global-val';

function f() {
  console.log(this.val);
}

f() // prints 'global-val'
f.call(x) // prints 'x-val'
f.apply(x) // prints 'x-val'

non-strict 모드에서 this(call() 및 apply()의 첫 번째 인수) 값이 객체가 아니면 객체로 변환하려고 시도합니다. 'null' 또는 'undefined'는 전역 객체가 됩니다. 1 또는 'text'와 같은 기본 요소는 이 예제에서 각각의 생성자, Number 및 String을 사용하여 객체가 됩니다.

클래스 컨텍스트

javascript의 클래스는 구문상의 설탕이기 때문에 이것의 동작은 클래스 및 함수 컨텍스트에서 유사합니다. 기본적으로는 함수일 뿐입니다.

클래스의 생성자 함수 내에서 this는 평범한 객체입니다. 클래스의 모든 비정적 메서드는 이 개체의 프로토타입에 추가됩니다.

파생 클래스에는 이 바인딩이 없습니다. 파생 클래스에서 super() 함수를 호출해야 합니다. 이것이 하는 일은 기본 클래스의 생성자를 호출하고 해당 생성자에서 this 개체를 할당하는 것입니다.

this = new Base()

Note: 파생 클래스는 개체를 호출super()하거나 반환하지 않고 반환할 수 없습니다. 그렇게 하면 ReferenceError가 발생하기 때문입니다.

바인드 방법

ES5는 함수에 바인딩 방법을 도입했습니다. f.bind()를 호출하면 f와 본문 및 범위가 동일한 새 함수가 생성됩니다. 그러나 this는 bind() 함수에 전달된 첫 번째 인수에 바인딩됩니다. bind()를 사용하여 바인딩되면 변경할 수 없습니다.

function f() {
  console.log(this.val);
}

x = f.bind({val: 'new val'});
x(); // prints 'new val'

y = x.bind({val: 'change val'})
y(); // prints 'new val'

const obj = {val: 1, f:f, x: x, y: y};
obj.f(); // prints 1
obj.x(); // prints 'new val'
obj.y(); // prints 'new val'

화살표 함수

화살표 함수에서 this는 둘러싸는 컨텍스트의 this 값을 유지합니다. 글로벌 컨텍스트에서 이는 글로벌 객체를 의미합니다. 함수 컨텍스트에서는 위 섹션에서 논의한 대로 결정됩니다.

예를 들어,

const obj= {
  x: function() {
    const y = () => this;
    return y;
  }
};

// calling x with obj context and setting its reference to f
const f = obj.x();

// Calling f would normally return window or global object or //undefined in strict mode
console.log(f() === obj) // true

// However, in this case above behaviour will not be true
const f = obj.x; // we are just taking the function

// Calling f from global context
console.log(f()() === obj) // false, this will equal global