this

정의

자바스크립트의 this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 라고 쓰여있다. 말이 좀 어려운데 간단한 예시를 통해 알아보자.

let person = {
  firstName: "Kim",
  lastName: "Chungyeon",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); //Kim ChungYeon

이 예시 코드는 this 의 정의 중 "자신이 속한 객체를 가리키는~" 에 대한 코드이다. 예시에서 this는person 객체의 fullName 메서드에서 사용되었다. this는 실행 중인 함수가 속한 객체를 가리키므로 여기서 this는 바로 person 객체를 가리킨다.

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

Person.prototype.introduce = function() {
  console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
}

// 인스턴스 생성
let person1 = new Person("Kim");
let person2 = new Person("Lee");

person1.introduce(); // 안녕하세요, 제 이름은 Kim입니다.
person2.introduce(); // 

이번에는 "자신이 생성할 인스턴스를 가리키는~"에 대한 예시 코드를 보자.

예시에서 this는 Person 객체의 프로토타입에 추가된 메서드인 introduce에서 사용되었다. 즉, 여기서 말하는 "자신"은 프로토타입을 만든 Person 객체이며, Person 객체가 생성한 인스턴스가 바로 person1과 person2 이다. 따라서 this는 Person이 생성할 인스턴스인 person1과 person2를 가리키는 것이다.

두 번째 예시 코드에서 알아본 것처럼, this는 호출하는 대상에 따라 동적으로 가리키는 값이 결정되며, this의 값이 결정되는 것을 바인딩이라고 한다. 바인딩에 대해 조금 더 살펴보자

바인딩

일반 함수에서 this는 전역 객체인 window에 기본적으로 바인딩 된다. (node.js에서는 global)

console.log(this) // window

function test() {
  console.log(this); // Window {0: Window, ...}
  function inner() {
    console.log(this); // Window {0: Window, ...}
  }
  inner();
}
test();

메서드 호출 시에는 우리가 예시 코드 1 에서 확인 했던 것처럼 메서드를 호출한 객체에 바인딩 된다.

유의할 점은, 만약 화살표 함수로 작성이 된 경우, this 는 상위 컨텍스트의 this를 참조하기 때문에 아래 예시에서는 전역 객체에 바인딩 된다.

아래에서 다시 한 번 살펴보자.

const obj = {
	normal: function() {
		console.log('normal fn this:', this);
	},
	arrow: () => {
		console.log('arrow fn this:', this);
	},
}

obj.normal(); // normal fn this: obj
obj.arrow(); // arrow fn this: window

다음으로 생성자 함수에서는 생성자 함수로 부터 만들어지는 인스턴스에 바인딩 된다.

function User(name) {
  this.name = name;
}
const user1 = new User('Kim');
console.log(user1.name); // Kim

그런데 만약 new 키워드를 사용하지 않은 일반 함수로 호출되는 경우, 전역객체로 바인딩 된다.

위에서 잠시 살펴보았는데, 화살표함수에서 사용된 this의 경우, Lexical this를 바인딩한다. 쉽게 말해, 화살표 함수의 렉시컬 스코프에 존재하는 this를 바인딩 하게 된다.

const arrow= () => {
	console.log(this);
}

arrow(); // window

// arrow 메서드의 스코프에 정의되있으므로, this가 arrow 메서드의 this를 가리킨다.
const obj = {
	arrow: function() {
		const arrowInner = () => {
			console.log(this);
		}

		arrowInner ();
	}
};

obj.arrow(); // obj

예시 코드를 보면 obj 객체의 arrow 메서드의 렉시컬 스코프는 생성되었을 당시의 환경인 obj 객체이고, arrowInner 는 화살표 함수이므로, this는 arrow 메서드의 스코프의 this를 가리키게 된다. 그런데 arrow 메서드의 스코프의 this가 바로 obj 객체이므로 this는 obj 객체를 가리키는 것이다.

마지막으로 이벤트 처리에서 this를 살펴보자.

const button = document.getElementById('button');
const consoleThis = function (e) {
  console.log(e.target === this, this);
};

button.addEventListener('click', consoleThis);
// <button id="button">click</button>

이벤트 처리에서 this는 이벤트를 받은 HTML 요소를 가리킨다. 예시 코드에서는 button 에 클릭 이벤트를 줬기 때문에, console.log 에 출력 되는 값, this는 바로 button 요소 자체이다.