[JAVASCRIPT-모던자바스크립트] 메서드와 this 2

자유로운 this

자바스크립트의  this는 다른 프로그래밍 언어의 this와 동작 방식이 다르다. 자바스크립트에서는 모든 함수에 this를 사용할 수 있다. 즉 아래와 같이 코드를 작성하더라도 에러가 발생하지 않는다.

function sayHi() {
	alert( this.name );
}

this값은 런타임에 의해서 결정이 된다고 볼 수 있다. 컨택스트에 따라 달라질 수 있다.  동일한 함수라고 할지라도 다른 객체에서 호출했다고 한다면 'this'가 참조하는 값이 달라진다.

let user = { name : 'John' };
let admin = { name : 'Admin' };

function sayHi() {
	alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용
user.f = sayHi;
admin.f = sayHi;

// this는 '점(.) 앞의' 객체를 참조한다.
// this 값이 달라짐

user.f(); // John (this == user)
admin.f(); // Admin (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

규칙은 간단하며 obj.f()를 호출했다고 한다면 this는 f를 호출하는 동안의 obj입니다. 위 예시에서는 obj가 user나 admin을 참조합니다.

객체 없이 호출하기

객체가 없어도 함수를 호출할 수 있다. 

function sayHi() {
	alert(this);
}

sayHi(); // undefined​

위와 같은 코드의 경우 엄격모드에서 실행하게 되면 this에는 undefined가 할당됩니다. this.name으로 name에 접근하려고 하면 에러가 발생된다.

엄격모드가 아닐 경우에는 this가 전역 객체를 참조한다. 브라우저 환경에서는 window라는 전역 객체를 참조하는데 이런 동작의 차이는 'use strict'가 도입된 배경이기도 한다. 전역 객체는 전역 객체에서 자세히 다룰 예정이다.

이런식의 코드는 대개 실수로 작성된 경우가 많다. 함수 본문에 this가 사용되었다고 한다면 객체 컨텍스트 내에서 함수를 호출할 것이라고 예상하면 된다.

자유로운 this가 만드는 결과

다른 언어를 사용하다가 자바스크립트로 넘어온 개발자는 this를 혼동하기 쉽다. this는 항상 메서드가 정의된 객체를 참조할 것이라고 착각하며 이런 개념을 'bound this'라고 한다.

자바스크립트에서 this는 런타임에 결정이 된다. 메서드가 어디서 정의되었는지에 상관이 없이 this는 점 앞의 객체가 무엇인가에 따라서 자유롭게 결정된다.

이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있다. 함수 (메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것이 장점이라고 볼 수 있지만 이런 유연함이 실수로 이어질 수 있다는 것은 단점입니다. 

자바스크립트에서 this를 다루는 방식이 좋은지 판단할 문제는 아니며 개발자는 this의 동작방식을 충분히 이해하고 장점을 취하면서 실수를 피하는데만 집중하면 된다.