Javascript this

객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

1. this 키워드

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

    // 객체 리터럴
    const circle = {
        radius: 5,
        getDiameter() {
            // this는 메서드를 호출한 객체를 가리킨다.
            return 2 * this.radius;
        }
    };

    console.log(circle.getDiameter());  // 10

    // 생성자 함수
    function Circle(radius) {
        // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
        this.radius = radius;
    }

    Circle.prototype.getDiameter = function () {
        // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
        return 2 * this.radius;
    };

    // 인스턴스 생성
    const circle = new Circle(5);
    console.log(circle.getDiameter());  // 10

자바나 C++ 같은 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리킨다. 하지만 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다.

    //전역에서 this는 전역 객체 window를 가리킨다.
    console.log(this);  // window

    function square(number) {
        // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다.
        console.log(this);  // window
        return number * number;
    }

    square(2);

    const person = {
        name: 'Lee',
        getName() {
            // 메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다.
            console.log(this);  // { name: "Lee", getName: f }
            return this.name;
        }
    };
    console.log(person.getName());  // Lee

    function Person(name) {
        this.name = name;
        // 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
        console.log(this);  // Person { name: "Lee" }
    }
    const me = new Person("Lee");

2. 함수 호출 방식에 따른 this 바인딩

this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

1. 일반 함수 호출

2. 메서드 호출

3. 생성자 함수 호출

4. Funtion.prototype.apply/call/bind 메서드에 의한 간접 호출

    // this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.
    const foo = function() {
        console.dir(this);
    };

    // 1. 일반 함수 호출
    // this는 전역 객체 window를 가리킨다.
    foo();  // window

    // 2. 메서드 호출
    // this는 메서드를 호출한 객체 obj를 가리킨다.
    const obj = { foo };
    obj.foo();  // obj

    // 3. 생성자 함수 호출
    // this는 생성자 함수가 생성한 인스턴스를 가리킨다.
    new foo();  // foo {}

    // 4. Funtion.prototype.apply/call/bine 메서드에 의한 간접 호출
    // this는 인수에 의해 결정된다.
    const bar = { name: 'bar' };

    foo.call(bar);      // bar
    foo.apply(bar);     // bar
    foo.bind(bar)();    // bar

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 생성할 인스턴스
Funtion.prototype.apply/call/bind 메서드에 의한 간접 호출	Function.prototype.apply/call/bind 메서드에 첫번째 인수로 전달한 객체