[JavaScript] this

유얌얌·2024년 11월 21일

CS

목록 보기

14/15

this의 기본 동작 원리

this는 함수가 호출되는 방식에 따라 가리키는 대상을 다르게 설정합니다.
일반 함수로 호출될 때는 전역 객체를 가리키고,
메소드로 호출될 때는 해당 메소드를 호출한 객체를 가리킵니다.

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

메서드에서의 this
해당 메서드가 호출된 객체를 참조

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

전역 함수에서의 this

strict mode에서는 undefined

strict mode가 아닐 때에서는 window(웹 브라우저) 또는 global

내부 함수에서의 this

내부 함수에서는this가 다르게 동작합니다. 내부 함수는 일반적으로 this를 상위 함수의 this와 공유하지 않습니다.

const obj = {
    value: 42,
    getValue: function () {
        function inner() {
            console.log(this); // 전역 객체 또는 undefined (strict mode)
        }
        inner();
    }
};

obj.getValue();

내부 함수에서의 this

strict mode에서는 undefined

strict mode가 아닐 때에서는 window(웹 브라우저) 또는 global

call, apply, bind 메서드를 사용한 this의 지정

call, apply, bind 메서드를 사용하면 this를 임의로 지정할 수 있습니다.
이 메서드들은 함수의 this를 원하는 객체로 설정할 수 있게 해줍니다.
이를 통해 함수의 this를 유연하게 조작할 수 있습니다.

function foo() {
console.log(this.name);
}

const obj = {
name: 'Alice'
};

foo.call(obj); // 'Alice'   첫번째 인자: 참조할 객체, 두번째 인자: 인수
foo.apply(obj); // 'Alice'
const boundFoo = foo.bind(obj);
boundFoo(); // 'Alice'

call, apply, bind 메서드
함수의 this를 원하는 객체로 설정할 수 있습니다.

클래스에서의 this

클래스 내에서 this는 해당 클래스의 인스턴스를 가르킵니다. 클래스의 메소드에서 this를 사용하면 해당 메소드를 호출한 인스턴스를 참조하게 됩니다.

왜냐하면 클래스의 메소드는 해당 클래스의 인스턴스를 기반으로 동작하기 때문입니다. 따라서 클래스 내에서 this는 항상 해당 클래스의 인스턴스를 가리키게 됩니다.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

constructor는 클래스의 생성자 메서드
constructor(name)은 매개변수로 name을 받고, 이를 객체의 this.name 속성에 할당합니다.

const alice = new Person('Alice');

여기서 constructor가 호출되면서 this.name에 'Alice'가 저장됩니다.
생성된 객체는 { name: 'Alice' } 구조를 가지게 됩니다.

alice 객체는 다음과 같은 구조를 가지고 있습니다.
{
  name: 'Alice',
  greet: function() { ... } // greet 메서드를 상속받음
}

alice.greet(); // 'Hello, my name is Alice'

클래스에서의 this
해당 클래스의 인스턴스를 가르킵니다.
이를 통해 클래스의 메소드에서 인스턴스의 속성에 접근할 수 있습니다.

화살표 함수와 this

화살표 함수는 일반 함수와는 다르게 this를 바인딩하지 않습니다. 화살표 함수 내에서 this는 상위 스코프의 this를 그대로 사용합니다.

var globalObject = this;
var foo = () => this;
console.log(foo() === globalObject); // true

const obj = {
name: 'Alice',
greet: () => {
console.log(Hello, my name is ${this.name});
}
};

obj.greet(); // 'Hello, my name is undefined'

arrowFunction: 화살표 함수로 정의되어, this는 obj의 정의 위치의 상위 스코프에서 결정됩니다. 이 경우 전역 컨텍스트의 this(window 또는 undefined)를 사용합니다.

const obj = {
    value: 42,
    regularFunction: function () {
        console.log(this); // 호출한 객체(obj)
    },
    arrowFunction: () => {
        console.log(this); // 정의된 스코프의 this (전역 객체)
    }
};

obj.regularFunction(); // obj 출력
obj.arrowFunction(); // 전역 객체 (window 또는 undefined in strict mode)

내부 함수에서 화살표 함수

내부 함수에서 상위 this를 유지할 수 있습니다. 이 점때문에 화살표 함수가 메서드 내부에서 자주 사용됩니다.

const obj = {
    value: 42,
    regularMethod: function () {
        const innerFunction = () => {
            console.log(this.value); // this는 regularMethod의 this(obj)
        };
        innerFunction();
    }
};

obj.regularMethod(); // 42