This

 This는 함수 내에서 함수 호출 맥락을 의미한다. 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라질 수 있다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 하며 아주 중요한 역할을 한다. this를 사용할 때에는 scope관계도 잘 따져야 하는데 이건 나중에 더 공부하여 올릴 예정이다. 

 

function a() { console.log(this); };
a(); // Window {}

 

 위와 같이 기본 적으로 this는 window를 가리킨다.  다른 예시로 window를 가리키지 않는 상황을 살펴보자.

 

var obj = {
  a: function() { console.log(this); },
};
obj.a(); // obj

 

 위와 같이 짜서 실행을 시켜보면 객체 메서드 a 안의 this는 객체를 가리킨다. 이것은 객체의 메서드를 호출할 때 this를 내부적으로 바꿔주기 때문이다. 하지만 var obj2 = obj.a 처럼 한 뒤 obj2를 실행시키면 결과는 window를 가리키게 된다. 그 이유는 호출할 때, 호출하는 함수가 객체의 메서드인지 그냥 함수인지가 중요하기 때문이다. 여기서 obj2는 obj.a를 꺼내온 것이기 때문에 더 이상 obj의 메서드가 아니다. 

 

 명시적으로 this를 바꾸는 함수 메서드인 bind, call, apply를 사용하면 this가 객체를 가리킵니다.

var obj2 = { c: 'd' };
function b() {
  console.log(this);
}
b(); // Window
b.bind(obj2).call(); // obj2
b.call(obj2); // obj2 
b.apply(obj2); // obj2

 

 마지막으로 생성자인 new를 썼을 때의 this에 대해 알아보자.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function() {
  console.log(this.name, this.age);
}

 

 

 만약 여기서 new를 호출하지 않고 그냥 호출하게되면 this 자체가 window를 가리키고 있어서 window.name, window.age가 되버린다. 이러한 문제를 막으려면 new Person을 사용하면 된다.

var hero = new Person('Hero', 33); // Person {name: "Hero", age: 33}
hero.sayHi(); // Hero 33

 이렇게 되면 this가 생성자를 통해 생성된 인스턴스(hero 자신)가 되기 때문에 위와 같은 문제를 막을 수 있다. 

---

 솔직히 나도 아직까지는 this를 잘 사용할 줄 모른다. 기본적인 예제와 기본적인 문법으로 봤을 때에는 아 this는 이렇게 쓰이는 구나라고 한눈에 파악할 수 있지만 코드가 조금이라도 복잡해지면 바로 헷갈리기 일수여서 조금 더 공부를 해야 실무에서 유용하게 잘 사용할 수 있을 듯 하다.