this 바인딩?? 뭔데??

진짜 삽질하는 짱구입니다 :) 재형·2022년 5월 4일

1. 서론

API공부를 하면서 class를 많이 쓰면서, this를 많이 써봤다. 어떤 개념인지는 알지만, 정확히 이해가 되지 않은 것이 사실이다. 이번에 확실히 이해를 해봐야겠다!! 내 블로그를 본 사람도 잘 알게 되었으면 좋겠다.

this를 MDN을 참고하여 먼저 요약하자면, this의 값을 함수를 호출하는 방법에 의해 결정된다.

2. this

자신이 속한 객체(Object) 또는 생성자 함수를 통해 생성할 인스턴스를 가르킨다.

메서드(method)에서 this 키워드를 사용하면 어떤 객체(Object)에서 호출이 되었는지 확인 가능하고 생성자 함수를 통해 생성될 인스턴스 또한 참조가 가능하다.

객체에서는 재귀호출을 통해서 자기 자신을 호출이 가능하다.

* 객채에서 재귀호출을 통해서 프로퍼티에 접근하는 방법
const obj = {
    data: 10,
    getData() {
        // obj 객체를 재귀적으로 호출하는 방법
        return obj.data;
    }
};

console.log(obj.getData()); // 10

위 코드는 바람직하지 않다고 한다. 객체에서는 재귀호출로 참조가 가능하지만 생성자 함수에서는 위 방법이 불가능하다. => 생성자 함수의 경우 인스턴스가 생성되어야 참조가 가능하기 때문이다.

3. this 바인딩 여러가지 경우

3-1) 메서드에서의 this 바인딩

 * 메서드(method)에서의 this 바인딩
 */
const obj = {
    data: 10,
    getData() {
        // getData 메서드는 obj 객체에서 호출되기 때문에
        // this에는 obj가 바인딩 된다.
        console.log('getData 메서드 내부에서의 this : ', this); 
        console.log('getData 메서드 내부에서의 this.data : ', this.data);
    }
};

obj.getData();

getData 메서드 내부 this : { data : 10, getdata: f }
getData 메서드 내부 this.data : 10

메서드 this 바인딩은 메서드를 호출한 객체를 바인딩 한다. 즉, 객체를 가르킨다.

3-2) 일반 함수에서의 this 바인딩

 * 일반 함수(function)에서의 this 바인딩
 */

var data = 1;

const obj = {
    data: 100,
    getData() {
        setTimeout(function () {
            console.log('obj의 data : ', this.data); // 1
        })
    }
};

obj.getData();

위 코드는 일반함수로 호출한 콜백 함수이다.

일반함수로 호출된 모든 함수 내부의 this 에는 전역객체(window)가 바인딩 된다.

일반함수로 호출된 콜백함수, 중첩함수 등 모든 함수가 이에 적용된다.

3-3) 일반함수로 호출된 중첩함수

* 일반 함수(function)에서의 this 바인딩

var age = 10;

function person() {
    let age = 20;

    function findPerson() {
        console.log(`findPerson의 this.age : ${this.age}`); // 10
    }

    findPerson();
}

person();

동일하게 전역객체의 프로퍼타입인 age의 값을 가져온다.

3-4) 생성자함수에서의 this 바인딩

* 생성자함수(function)에서의 this 바인딩

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

Person.prototype.getInfo = function() {
    console.log(`${this.name}의 나이는 ${this.age} 입니다.`);
}

const firstPerson = new Person('Kim', 23);
const secondPerson = new Person('Lee', 25);

firstPerson.getInfo(); // Kim의 나이는 23 입니다.
secondPerson.getInfo(); // Lee의 나이는 25 입니다.

각각 생성된 firstPerson과 secondPerson 의 인스턴스에 정의된 this.name, this.age를 출력한다.

3-5) 화살표함수에서의 this 바인딩

 * 화살표함수(function)에서의 this 바인딩

var age = 10;

const person = {
    age: 20,
    getAge() {
        setTimeout(() => {
            console.log(this.age); // 20
        });
    },
}

person.getAge();