this 바인딩?? 뭔데??

0
post-thumbnail

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();
  • 화살표함수의 경우 this 바인딩은 상위 스코프의 this를 바인딩한다.

마무리

=> 잘 이해가 가지 않을 수도 있지만, 공부를 하면서 계속 사용하고 자주 보다보면 이해가 되지 않을까 싶다.

profile
끝날때 까지 끝난게 아니야. 결국 내가 이겨!

0개의 댓글