Javascript - this

 

this란?

JS에서 실행 컨텍스트에 따라 다르게 바인딩되는 객체

this는 함수의 블록 스코프 내에서 선언되어야 작동

 

cf) 실행 컨텍스트란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  title2 : this.title,
  title3() { console.log(this.title) }
};

console.log(group.title2); //undefined
group.title3(); // 1모둠

 

 

this의 기본 동작 원리

'this'는 함수가 호출되는 방식에 따라 다르게 동작함

- 일반 함수로 호출될 때: 전역 객체를 가리킴

- 메소드로 호출될 때: 해당 메소드를 호출한 객체를 가리킴

 

왜냐하면 자바스크립트는 함수가 호출되는 방식에 따라 'this'가 가리키는 대상을 다르게 설정하기 때문

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

const obj = {
    foo: foo
};

foo(); // 전역 객체를 가리킴
obj.foo(); // obj 객체를 가리킴

 

 

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

call', 'apply', 'bind' 메서드를 사용하면 'this'를 임의로 지정할 수 있음

이를 통해 함수의 'this'를 유연하게 조작할 수 있음

call, apply : 함수 호출 함수

- 첫번째 인자에 this로 만들고 싶은 객체를 넘겨 this를 바꾸고 나서 실행

- 두 함수의 차이점은 파라미터 전달 방식밖에 없음

bind: 함수를 실행하지 않고 this를 바꾸고 난 뒤의 함수인 bound 함수를 리턴

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'

 

 

Class와 this의 관계

클래스 내에서 'this'는 해당 클래스의 인스턴스를 가리킴

클래스의 메서드에서 'this'를 사용하면 해당 메소드를 호출한 인스턴스를 참조

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

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

const alice = new Person('Alice');
alice.greet(); // 'Hello, my name is Alice'

 

 

화살표 함수와 this

화살표 함수는 일반 함수와는 다르게 'this'를 바인딩하지 않음

화살표 함수 내에서 'this'는 상위 스코프의 'this'를 그대로 사용함

이를 통해 화살표 함수 내에서 'this'를 일관되게 사용할 수 있음

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

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

위 예제에서 'greet' 메소드는 화살표 함수로 정의되어 있음

this는 상위 스코프의 this를 그대로 사용 -> 상위 스코프: 전역 객체이므로 this.name은 undefined가 됨