JavaScript(this 키워드)

■ this의 특징

 

자바스크립트에서 this는 일반적으로 코드가 실행되는 환경에 따라 결정됩니다.

함수가 호출되거나 전역 코드가 실행될 때마다 실행되는 환경에 맞춰 this가 바인딩되는 객체가 달라질 수 있습니다.

 

 

 

■ 함수 내부에서의 this

 

함수 안에서 this를 사용하면, 전역 객체인 window 객체를 참조합니다.

 

일반적으로 자바스크립트에서의 전역 객체는 모든 객체의 최상위에 있으며, 기본적인 전역 변수와 함수들이 이 객체에 정의됩니다.

 

따라서  this를 사용해 전역 변수나 함수를 참조한 경우, 해당 변수나 함수는 전역 객체(window 객체)의 프로퍼티나 메소드로 취급됩니다.

const name = 'kim';
function sayName() {
  // window 출력
  console.log(this);  
  
  // 'kim' 출력
  console.log(this.name);  
}
sayName();

 

 

페이지 최상단에 'use strict' 키워드를 추가하면 strict mode로 자바스크립트를 작성할 수 있습니다.

strict mode에서는 this 키워드를 일반 함수에서 불렀을 때 undefined 값으로 지정해줍니다.

'use strict';

function 엄격한함수(){  
  console.log(this)
}

// undefined 출력
엄격한함수();

 

 

■ 메서드에서의 this

 

메서드(method)는 객체에 속한 함수를 의미합니다.

 

메서드 안에서의 this는 메서드를 호출한 객체를 참조합니다.

const obj = {
  name: 'kim',
  getName() {
    console.log(this.name);
  }
};

// kim 출력
obj.getName();

 

 

 

■ 생성자 함수에서의 this

 

생성자 함수는 새로운 객체를 생성하는 함수로, 대문자로 시작하는 이름을 사용하여 일반함수와 구분됩니다.

생성자 함수 호출 시 객체를 생성할 때 new 키워드를 사용하여 생성자 함수를 호출할 경우, this는 생성된 객체를 참조합니다.

 

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('kim', 28);
console.log(person1); // Person { name: "kim", age: 28 }

const person2 = new Person('lee', 30);
console.log(person2); // Person { name: "lee", age: 30 }

 

 

■ 이벤트 핸들러에서의 this

 

이벤트 핸들러 안에서 쓰는 this는 e.currentTarget와 같은 의미로 쓰입니다.

e.currentTarget는 현재 이벤트가 동작하는 곳으로 이벤트가 부착된 HTML 요소를 뜻합니다.

document.getElementById('button').addEventListener('click', function(e){
  console.log(this),
  console.log(e.currentTarget)
});

// html의 버튼 요소를 출력

 

 

■ 화살표 함수에서의 this

 

this는 내부함수에서 쓰일 경우 일반 함수, 메소드, 콜백함수 어디에서 사용되었는지에 관계없이 전역객체를 참조합니다.

 

하지만 화살표 함수에서는 this를 새로 정의하지 않고,  화살표 함수가 정의된 시점에서의 this를 유지합니다.

쉽게 말하면, 바깥에서 쓰인 this를 가져와서 씁니다.

 

즉 화살표 함수를 사용하면 내부 함수의 this가 전역 객체를 참조하는 것을 회피해서 사용할 수 있다는 장점이 있습니다.

const obj = {
  name: 'kim',
  func: () => {
    console.log(this.name);
  }
};

obj.func(); // undefined

const obj = {
  name: 'kim',
  func() {
    console.log(this.name);
  }
};

obj.func(); // "kim"