[JavaScript] this

이번 포스팅에서는 자바스크립트에서 this 키워드에 대하여 공부를 해보고자 한다.

 

---

this란

this는 자바스크립트에서 함수가 호출될 때, 해당 함수를 호출한 객체를 참조하는 키워드이다.
this를 사용하면 함수가 어떻게 호출되었는지에 따라 해당 함수 내부에서 다른 객체나 변수를 참조할 수 있다.

 

this의 값은 호출되는 위치에 따라 달라질 수 있다.
객체의 메서드로 함수가 호출될 경우 this는 해당 객체를 가리키지만, 일반적인 함수로 호출될 경우, this는 전역 객체를 가리킨다.

 

예제 코드

let person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Hello, my name is John.

let greet = person.greet;
greet(); // Hello, my name is undefined.

• 위 예제에서 person 객체는 name 속성과 greet( ) 메서드를 가지고 있다.
• greet( ) 메서드 내부에서 this.name을 사용하여 name 속성을 참조하고 있다.
• person.greet( )를 호출하면 this는 person 객체를 가리키므로 "Hello, my name is John."이 출력된다.
• 그러나 greet 변수에 person.greet 메서드를 할당한 후, greet( )를 호출하면 this는 전역 객체인 window를 가리키므로 "Hello, my name is undefined."가 출력된다.

 

---

함수 내부에서 this의 값을 변경할 수도 있다.
call( )과 apply( ) 메서드를 사용하면 this를 강제로 바꿀 수 있다.

 

예제 코드

let person1 = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

let person2 = {
  name: 'Bob'
};

person1.greet.call(person2); // Hello, my name is Bob.

• 위 예제에서 person1.greet( )을 호출하면 this는 person1 객체를 가리키므로 "Hello, my name is Alice."가 출력된다.
• 그러나 person1.greet.call(person2)를 호출하면 this가 person2 객체를 가리키므로 "Hello, my name is Bob."이 출력된다.

 

---