🔍 자바스크립트의 this

　thisBinding은 실행 컨텍스트가 활성화될 때 이루어진다. 실행 컨텍스트는 함수가 호출되는 순간에 생성되며, 이 때 this가 결정된다. 따라서 코드로는 this가 어떤 객체를 가리킬지 미리 예측할 수 없다.

　thisBinding은 JavaScript에서 실행 컨텍스트에 따라 동적으로 결정되지만, 명시적으로 바인딩하여 해당 컨텍스트에서의 this 값을 특정 객체로 고정할 수 있다. 이를 통해 this와 해당 객체를 연결시킬 수 있다. 이는 함수가 어떻게 호출되느냐에 따라 다르게 동작하며, 이러한 동작을 동적 바인딩이라고 한다.

1) 전역 공간에서 사용 시

　전역 공간에서의 this는 전역 객체를 가리킨다. 전역 컨텍스트를 실행하는 주체가 전역 객체이기 때문이다. 이러한 전역 객체는 호스트 환경에 따라 다르며, 브라우저 환경에서는 window 객체를 참조하고, Node.js 환경에서는 global 객체를 참조한다.

　전역 객체는 전역 범위에 항상 존재하는 객체로, 전역 변수 및 전역 함수를 포함하여 전역 환경에서 사용되는 모든 객체와 함수가 이 객체의 프로퍼티나 메서드로 존재한다. 따라서 전역 범위에서 실행되는 코드에서 this를 사용하면 해당 코드가 실행되는 컨텍스트에 따라 전역 객체를 가리키게 된다.

console.log(this === window); // 브라우저 환경에서 true
console.log(this === global); // Node.js 환경에서 true

첫 행은 전역 객체인 window 객체와 this가 동일하므로 true를 출력하고, 두 번째 행은 global 객체와 this가 동일하므로 true를 출력한다.

2) 함수 호출 시

　어떤 함수도 소유하지 않은 함수가 전역 범위에서 호출될 때, JavaScript 엔진은 this를 전역 객체로 설정한다. 이것은 "전역 호출"이라고도 한다. 전역 범위에서 함수가 호출되는 경우에는 this가 전역 객체를 가리키게 된다.

　ES6부터 도입된 화살표 함수(arrow function)는 함수를 정의할 때 자체적인 this를 생성하지 않고, 함수를 감싸고 있는 가장 가까운 상위 함수의 this를 상속하게 된다. 따라서 화살표 함수는 상위 컨텍스트에 있는 this를 그대로 사용하게 된다. 화살표 함수를 사용하면 일반 함수의 thisBinding과 관련된 일반화 문제를 방지할 수 있다. 메소드나 콜백 함수를 정의할 때 유용하며, 메소드 내부에서 this가 자신을 가리키도록 하고 싶을 때 사용될 수 있다. 하지만 화살표 함수는 자체적인 this를 가지지 않기 때문에 메소드 내부에서 사용할 때는 적합하지 않을 수 있다.

// 일반 함수
function myFunction() {
    console.log(this);
}

myFunction(); // this는 전역 객체(window)

// arrow 함수
const myObject = {
    myMethod() {
        const myArrowFunction = () => {
            console.log(this);
        };
        myArrowFunction();
    }
};

myObject.myMethod(); // this는 myMethod가 속한 객체 (=myObject)

3) method 호출 시

　method 호출 시 객체의 메소드 내에서 this는 해당 메소드가 속한 객체를 참조한다. 메소드 호출 시 메소드명 앞에 있는 객체가 this가 된다. 점 표기법 또는 대괄호 표기법에서 앞에 있는 객체가 this로 사용된다.

const myObject = {
    myMethod() {
        console.log(this);
    }
};

myObject.myMethod(); // this는 메서드가 속한 객체 (=myObject)

메소드는 객체와 관련된 동작을 수행하는 함수를 의미한다. 함수가 어떤 객체와 관련된 동작을 하면 해당 함수는 메소드로 간주된다. 이렇게 메소드를 사용하여 객체의 동작을 정의하고 구현할 수 있다.

4) callback 호출 시

　기본적으로 콜백 함수는 호출하는 함수의 this와 동일하다. (해당 함수를 호출한 객체를 가리킴) 하지만 제어권을 가진 함수가 콜백의 this를 지정해둔 경우, 콜백 함수 내부에서의 this는 해당 함수에서 지정된 대상을 가리킨다. 명시적으로 this를 바인딩하여 원하는 객체를 this로 설정할 수 있다.

*명시적으로 this를 바인딩 하는 방법 : call(), apply(), bind() 메서드 사용

* call 메서드

call 메서드는 함수를 호출하면서 특정 객체를 함수 내부의 this로 지정한다. 인자로 넘긴 첫 번째 값이 함수 내부에서의 this로 설정된다.

const myObject = { value: 123 };

function myFunction() {
  console.log(this.value);
}

myFunction.call(myObject); // 123

* apply 메서드

apply 메서드는 call과 비슷하지만, 인자를 배열로 받는다. 배열의 첫 번째 값이 함수 내부의 this로 설정된다.

const myObject = { value: 123 };

function myFunction() {
  console.log(this.value);
}

myFunction.apply(myObject); // 123

* bind 메서드

bind 메서드는 함수를 호출하지는 않지만, 함수를 호출할 때 사용할 this 값을 영구적으로 바인딩한다. 새로운 함수를 반환하며, 원본 함수와 동일한 코드를 가지지만 this 값이 고정된다.

const myObject = { value: 123 };

function myFunction() {
  console.log(this.value);
}

const result = myFunction.bind(myObject);
result(); // 123

5) 생성자 함수(new 연산자) 호출 시

　생성자 함수를 호출할 때는 new 키워드를 사용하여 새로운 객체를 생성하고, 이 새로운 객체가 생성자 함수 내부에서의 this가 된다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('cho', 30);
const person2 = new Person('megu', 26);

console.log(person1.name); // 'cho'
console.log(person2.age); // 26

---

코어 자바스크립트 3강 this