흠 이게 뭘까?
일단 . (닷) 의 왼쪽에 있는 얘를 가르킨다.
. 왼쪽에 얘가 없으면 글로벌 스코프를 내준다.
논리적으로 연결되어 있는 가장 가까운 오브젝트를 가르킨다. 자기 자신을 가리킨다고도 한다.
뭐 닷 옆에, 아니면 글로벌 스코프 정도만 기억하면 될듯!
아래는 codeflow.co.kr 에서 가져온 디스에 관한 설명이다.
————————————————————————————————————————
The context of “this”
자바스크립트는 this 라는 특별한 키워드를 이용한다. this 는 다른 여타 변수들과 동일하게 동작하나, 수정이 불가능하다는 점이 다르다. 이 변수는 context (역주: 환경) 을 가리키는 참조 객체로 쓰인다. 객체이기 때문에, . 이나 [] 을 이용하여 속성들을 접근할 수도 있다. 신기한 점은 여러분이 함수를 호출하는 context 에 따라 this 의 값이 달라진다는 것이다. 보통의 경우에는 context 는 message 를 받는 (역주: 호출받는) 객체이다. 예를들어:
var Person = {
name: “Tim”,
age: 28,
greeting: function () {
return “Hello ” + this.name + “. Wow, you are ” + this.age + ” years old.”;
}
};
Person.greeting();
Output
=> ‘Hello Tim. Wow, you are 28 years old.’
Person.greeting 에서 Person.name 과 Person.age 를 접근하였다.
“this” is where it bites
위 코드는 다른 언어의 클래스 객체처럼 보인다. 하지만 거기에 함정이 있다. this 가 꼭 Person 일 것이라는 보장이 없다. 예를들어 greeting 함수를 다음처럼 저장한다고 해보자:
var greeting = Person.greeting;
greeting(); // `this.name` 과 `this.age` 는 undefined 가 된다
Output
=> ‘Hello undefined. Wow, you are undefined years old.’
위 greeting 함수에서 this 는 global 객체이지 Person 객체가 아니다. 또 다른 예를 보자:
var Dog = {
name: “Alfred”,
age: 110,
greeting: Person.greeting
}
Dog.greeting(); // 정상작동하며, Dog 의 데이터를 보여준다.
Output
=> ‘Hello Alfred. Wow, you are 110 years old.’
Dog 과 Person 의 greeting 함수는 같은 함수이다. 이 두 함수는 메모리상의 같은 객체를 참조한다. 하지만 어디서 불렸는지에 따라 this 의 값이 변할 수 있다. 기본적으로 함수호출시 . 앞에 있는 객체가, 함수에서 this 가 된다. Dog.greeting() 에서는 this 가 Dog 이고, Person.greeting() 에서는 Person 이다. . 앞에 아무것도 없을 때에는 글로벌 객체가 this 가 된다.