this

This

• 자바스크립트의 this 키워드는 다른 언어들과는 조금 다르게 동작한다.
• 대부분은 함수를 호출하는 방법에 따라 this의 값이 결정된다. 실행하는 동안의 할당에 의해서나 함수가 호출될 때마다 다를 수 있다.
• ES5에서는 this의 값이 함수가 어떻게 호출되었든지 상관하지 않고 설정이 가능한 bind 메소드를 새로 정의했다.
• 쉽게 말하자면 호출하는 객체 === this와 같다고 할 수 있다.

---

This의 예

- this는 호출하는 객체에 따라 결과가 달라질 수 있다.

var person = {
    name: "lee",
    info: function() {
        console.log(this);
    }
}

person.info();

var myInfo = person.info;

myInfo();

• 단순히 생각한다면 person.info()와 myInfo()가 같은 결과가 나온다고 보겠지만, myInfo()메소드는 Window에서 호출된다.
• 두 메소드의 결과가 다른 이유는 this를 호출하는 방법이 서로 다르기 때문이다.
• info() 메소드는 person 객체가 호출하는 반면 myInfo() 메소드는 전역 범위에서 실행되며 해당 범위는 Window가 관리하기 때문에 Window.myInfo()와 같은 결과를 얻게 되는 것이다.

- 호출하는 객체에 따라 같은 결과가 나올 수도 있다.

var person = {
    name: "lee",
    info: function () {
        console.log(this);
    }
};

var myInfo = person.info();

var button = document.querySelector("#btn");
var button2 = document.querySelector("#btn2");

button.addEventListener("click", person.info);
button2.addEventListener("click", myInfo);

• 앞선 예시에서는 person.info()와 myInfo()의 결과가 달랐다. 하지만 버튼을 각각 넣어 실행해보니 똑같은 결과가 나오게 된다.
• 이 사례에서 둘의 결과가 같게 나오는 이유는 메소드를 실행하는 주체가 person이나 Window가 아닌 button이기 때문이다.
• 이를 보아 this는 해당 메소드를 호출한 객체와 같다는 것을 알 수 있다.

- 호출한 객체에 관계없이 같은 결과를 나오게 해주는 bind()

var person = {
    name: "lee",
    info: function () {
        console.log(this);
    }
};

person.info();

var myInfo = person.info();

//ES6에서 추가된 bind 메소드 활용
var bindedMyInfo = myInfo.bind(person);
bindedMyInfo();

var button = document.getElementById("btn");
button.addEventListener("click", bindedMyInfo);

• bindedMyInfo를 선언하는 부분에서 bind 메소드는 괄호 안의 객체를 무조건 this로 받겠다고 선언하는 것이다.
• 이 과정을 거친 후에는 버튼에서 해당 변수를 넣어주더라도 button이 this가 아닌 person이 this가 되어 결과는 person.info()와 같아지게 된다.
• person.info() === bindedMyInfo() === button.addEventListener("click", bindedMyInfo)