[JavaScript] this (1)

자바스크립트에서 this는 매우 유연하게 쓸 수 있다.

메서드 내부에서 this를 사용하면 객체에 접근할 수 있다.

let Jin = {
  'name' : 'Jin',
  sayHello() {
    alert(this.name + " 안녕하세요.");
  }
}

let Yumi = {
  'name' : 'Yumi',
  sayHello() {
    alert(this.name + " 안녕하세요.");
  }
}

Jin.sayHello(); // Jin 안녕하세요.
Yumi.sayHello(); // Yumi 안녕하세요.

 

하지만 위 코드는 sayHello()가 Jin과 Yumi에 중복 작성되었기 때문에 깔끔하지 않다.

다음처럼 줄여 쓸 수 있다.

let Jin = {'name' : 'Jin',}
let Yumi = {'name' : 'Yumi',}

function sayHello() {
  alert(this.name + " 안녕하세요.");
}

Jin.hello = sayHello;
Yumi.hello = sayHello;

Jin.hello(); // Jin 안녕하세요.
Yumi.hello(); // Yumi 안녕하세요.

 

화살표 함수에서 this를 참조하면 화살표 함수가 아닌 외부 함수에서 this 값을 가져온다.

let member = {
  'name': "Jin",
  sayHello() {
    let arrow = () => alert(this.name); // 인수가 없으므로 빈 괄호
    arrow();
  }
};

member.sayHello(); // Jin

arrow의 this가 아닌 sayHello의 this를 가져오는 것이다.