[번역글] 자바스크립트에서 this 키워드 이해하기(this 키워드가 할당되는 시나리오들)

이번 포스팅에서 자바스크립트의 this 키워드와 this가 할당되는 시나리오들에 대해서 살펴볼 것입니다.
이번 포스팅을 이해할 가장 좋은 방법은 예제로 드리는 코드들을 직접 브라우저의 콘솔탭에서 실행해보는 것입니다.
아래 단계를 확인하시고 크롬 브라우저에서 따라해보시기 바랍니다.

1. 크롭에서 새탭을 켠다!  2. F12를 눌러 개발자도구를 켠다!  3. 콘솔탭으로 간다.  4. 예제코드를 실행한다.

Objects는 자바스크립트의 기본구성요소입니다. 자바스크립트에서 사용할 수 있는 하나의 특수객체인 this 객체가
있습니다. 자바스크립트 소스에서 매번 봐왔을 코드입니다. 자바스크립트의 this 키워드의 값은 코드가 어떻게 실행되
는지에 따라서 결정될 것입니다.

this에 대해서 살펴보기전, 먼저 자바스크립트 런타임 환경에 대해서 이해하고 어떻게 자바스크립트 코드가 실행되는지
이해해야할 필요가 있습니다.

Javascript 인터프리터 and Execution Context

자바스크립트는 스크립트언어입니다. 그 말은 즉, 코드의 실행에 있어서 컴파일이 없다는 뜻입니다. 인터프리터가 코드를 읽어들일때마다 소스를 해석하고 실행합니다. 이러한 코드의 라인이 실행되는 환경(혹은 스코프)을 Context 라고 합니다. 자바스크립트 런타임은 이러한 실행 컨텍스트의 스택을 유지관리하며 이 스택의 맨 위에있는 실행컨텍스
트는 현재 실행중인 컨택스트가 됩니다. this 객체는 이런 실행컨텍스트(스코프)가 변경될 때마다 바뀌는 값입니다.

this는 Global 객체를 나타냅니다("this" Refers to a Global Object)

기본적으로 실행에 대한 스코프는 전역적입니다. 즉, 간단한 함수 호출의 일부로 코드가 실행되는 경우 Global 객체를 나타냅니다.
window 객체는 브라우저에서 지칭할 수 있는 Global 객체입니다. 그리고 NodeJS 환경에서는 global이라는 특별한 객체가
window에 상응하는 Global 객체입니다.

예제코드

function foo () { 
	console.log("Simple function call"); 
	console.log(this === window);  
} 
foo(); // true
console.log(this === window) // true

 

[즉시실행함수표현(Immediately Invoked Function Expression)]

 

즉시실행함수 예제코드

(function(){ 
	console.log("Anonymous function invocation"); 
	console.log(this === window); // true 출력
})(); 

 

 

함수에서 strict 모드인 경우 참조하는 this의 값은 undifined입니다. 

strict 예제코드

function foo () { 
	'use strict'; 
	console.log("Simple function call") 
	console.log(this === window);  
} 

 

foo(); 는 false를 콘솔에 출력합니다. strict 모드에서는 this의 값이 전역 컨텍스트에서 값이 정의되지 않기 때문입니다.

this는 new 인스턴스를 참조합니다.("this" Refers to a New Instance)

어떤 함수가 new 키워드로 호출되었을 때, 그 함수를 흔히 생성자 함수라고 부르고 새로운 인스턴스를 반환합니다.
그 경우, this의 값은 새로이 생성된 인스턴스를 참조하게 됩니다. 

 

예제코드

function Person(fn, ln) { 
	this.first_name = fn; 
	this.last_name = ln; 

	this.displayName = function() { 
    	console.log(`Name: ${this.first_name} ${this.last_name}`); 
    } 
} 
let person = new Person("John", "Reed"); 
person.displayName();  // Name: John Reed 출력
let person2 = new Person("Paul", "Adams"); 
person2.displayName();  // Name: Paul Adams 출력

 

person.displayName의 경우 this는 새로운 인스턴스인 person을 참조하고 person2.displayName의 경우에 this는 person2를 참조하게 됩니다.(person과 person2는 각각 다른 인스턴스입니다.)

this는 호출한 객체를 참조합니다.(부모객체)

자바스크립트에서, 객체의 속성은 간단한 값이나 메소드가 될 수 있습니다. 객체의 메소드가 실행될때, this는 호출되는 메소드가 포함된 객체를 참조하게 됩니다.

 

이번 예제에서, 처음 정의했던 foo() 메소드를 활용해보겠습니다.

 

예제코드

function foo () { 
	'use strict'; 
	console.log("Simple function call") 
	console.log(this === window);  
} 
let user = { 
	count: 10, 
	foo: foo, 
	foo1: function() { 
		console.log(this === window); 
	} 
} 
user.foo()  //false 출력, window 객체 대신 [user 객체를 this]가 참조하고 있기때문에..
let fun1 = user.foo1; 
fun1() //true 출력, 단순 메소드콜로 실행되었기 때문에 [this는 window 객체 참조]
user.foo1()  //false 출력, 객체의 메소드로 실행되었기 때문에 [this는 user 참조].

 

user.foo()는 false 출력합니다. 왜냐하면 현재 this 키워드는 전역객체대신 user 객체를 참조하고 있기 때문입니다.

위의 예제에서, 어떤 케이스에서 this 키워드가 혼란을 야기할 지 어느정도 알 수 있을 것입니다.

foo1()의 함수 정의는 마찬가지로 동일하지만 단순한 메서드 호출로 실행된 경우 this 키워드는 전역객체를 참조하게 됩니다.  같은 정의된 함수가 객체의 메소드로 호출됬을 때, this 키워드는 해당 객체를 참조하게 됩니다. 그래서 this의 값은 어떻게 메소드가 호출되는지에 따라서 결정되게 됩니다.

Call 및 Apply 메소드를 사용한 this

자바스크립트에서의 함수는 특수한 타입의 객체이다. 모든 함수는 call(), bind(), apply() 메소드를 갖고 있습니다. 이러한 메소드들은 함수 스코프에서 커스텀값을 설정하는데 사용될 수 있습니다.

다음예제를 통해 call 메소드의 사용을 설명하겠습니다.

 

예제코드

function Person(fn, ln) { 
	this.first_name = fn; 
	this.last_name = ln; 

	this.displayName = function() { 
		console.log(`Name: ${this.first_name} ${this.last_name}`); 
	} 
} 
let person = new Person("John", "Reed"); 
person.displayName(); 						//Name: John Reed 출력
let person2 = new Person("Paul", "Adams"); 
person2.displayName(); 						//Name: Paul Adams 출력
person.displayName.call(person2); // 함수내 this가 person2를 참조하여 값을 세팅 
//Name: Paul Adams 출력

 

call 메소드와 apply 메소드의 유일한 차이는 파라미터가 전달되는 방식입니다.

apply 메소드 : 두번째 파라미터가 파라미터들의 배열로 전달.  call 메소드 : 파라미터들이 각각 전달됨.

 

bind 메소드를 통한 this

bind() 메소드는 전달된 첫번째 파라미터를 참조하여 새 메소드를 리턴하게 됩니다.

아래의 예제로 설명하겠습니다.

 

예제코드

function Person(fn, ln) { 
	this.first_name = fn; 
	this.last_name = ln; 

	this.displayName = function() { 
		console.log(`Name: ${this.first_name} ${this.last_name}`); 
	} 
} 
let person = new Person("John", "Reed"); 
person.displayName(); // Prints Name: John Reed 
let person2 = new Person("Paul", "Adams"); 
person2.displayName(); // Prints Name: Paul Adams 

let person2Display = person.displayName.bind(person2);  
// Creates new function with value of “this” equals to person2 object 
person2Display(); // Prints Name: Paul Adams 

요약, Summary

현재 우리는 다음과 같은 규칙에 따라 this에 대한 값을 알아낼 수 있을 것입니다.
- 기본적으로 this는 global 객체를 참조합니다. NodeJS의 경우 Global 객체이고 browser의 경우 Window 객체입니다.
- 메소드가 객체의 속성으로 호출되었을 경우, this 해당 메소드가 속한 객체를 참조하게됩니다.
- 함수호출이 new 키워드로 실행된 경우, this는 새로이 생성된 인스턴스를 참조합니다.
- 함수가 call()이나 apply() 메소드를 활용하여 호출된 경우, this는 첫번째 파라미터(객체)를 참조합니다.

위에서 본바와 같이, this의 값은 때때로 혼란을 초래하기도 합니다. 그러나 위의 룰을 이해한다면 this의 값을 알아내는데에 매우 큰 도움이 될 것입니다.

 

 

 

 

원본글 : https://medium.com/better-programming/understanding-the-this-keyword-in-javascript-cb76d4c7c5e8