[Javascript] this deep dive

javascript Deep Dive

[Javascript] this deep dive

이경찬 :) 2024. 1. 15. 13:56

자바스크립트에서 this란?

다른 객체지향 언어에서의 this는 클래스로 생성한 인스턴스 객체를 의미합니다. 클래에서만 사용하기에 혼란의 여지가 없거나 많지 않습니다. 그러나 자바스크립트에서의 this는 어디서는 사용할 수 있습니다. 이 말은 상황에 따라서 this가 바라보는 대상이 달라지는 것을 의미합니다. 자바스크립트에서 this는 실행 컨텍스트가 생성될때 함께 결정됩니다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있습니다. 한마디로 쉽게 정의내리면 "누가 나를 호출했나"입니다.

왜 이렇게 this를 설계 했을까요?

JavaScript의 this 동작이 다른 객체지향 언어와 다른 점은 JavaScript 자체의 설계 철학과 목표에 뿌리를 두고 있습니다.

1. 동적 유형 지정 및 후기 바인딩

- JavaScript는 동적으로 유형이 지정되는 언어이며 런타임에 객체가 변경될 수 있습니다. 이러한 동적인 특성은 this에 대한 결정이 컴파일 타임에 이루어 질 수 없고 오히려 함수가 호출될 때 런타임에 이루어질 수 있음을 의미합니다. 이는 this에 대한 결정이 컴파일 타임에 해결될 수 있는 정적인 유형의 언어와는 대조적입니다.

2. 기능적 프로그래밍 영향

- JavaScript에는 함수형 프로그래밍 기능이 있으며 함수는 일급함수입니다. 즉, 함수를 인수로 전달하고, 다른 함수에서 반환하고, 변수에 할당할 수 있습니다. 이러한 함수 사용 방법은 보다 유여난 this바인딩 메커니즘을 필요로 합니다.

3. 프로토타입 기반 상속

- JavaScript는 클래스 기반 상속 대신 프로토타입 기반 상속을 사용합니다.

상황에 따라 달라지는 this

JavaScript에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정됩니다. 실행 컨텍스트는 함수를 호출할 때 생성됩니다. 즉, this는 함수를 호출할 때 결정된다고 할 수 있습니다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것입니다. 다양한 상황과 각 상황별로 this가 어떤 값을 보게 되는지를 살펴보고 그 원인도 알아보도록 하겠습니다.

전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킵니다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문입니다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있습니다. 브라우저 환경에서 전역객체는 window이고 Node.js환경에서 전역 객체는 global입니다.

전역 공간에서 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당합니다. 변수이면서 객체의 프로퍼티입니다. 코드로 확인해 보겠습니다.

위의 코드를 보면 전역공간에서 변수 a를 할당했을 뿐인데 window.a와 this.a 모두 1이 출력됩니다. 그 이유는 자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼티로서 동작하기 때문입니다.즉, 사용자가 var 연산자를 이용해 변수를 선언하더라도 실제 자바스크립트 엔진은 어떤 특정 객체의 프로퍼티로 인식하는 것입니다.

var변수선언 => 특정 객체의 프로퍼티로 인식 => 특정 객체는 실행 컨텍스트의(L.E) => 변수를 수집해서 L.E의 프로퍼티로 저장

따라서, 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다

window의 프로퍼티에 직접 할당하면 var연산자를 사용한것과 완전히 동일할까??

대부분의 경우에는 위의 말이 맞습니다. 확인해 보도록 하겠습니다.

전역 변수 선언과 전역객체의 프로퍼티 할당 사이에 전혀 다른 경우도 있습니다. 바로 삭제 명령어를 실행 할 때 입니다.

전역객체의 프로퍼티로 할당한 경우에는 삭제가 되는 반면 전역변수로 선언한 경우에는 삭제가 되지 않는 것을 확인할 수 있습니다. 이는 사용자가 의도치 않게 삭제하는 것을 방지하는 차원에서 마련한 방어 전략이라고 생각됩니다. 즉, 전역변수를 선언하면 자바스크립트 엔진이 이를 자동으로 전역객체의 프로퍼티로 할당하면서 추가적으로 해당 프로퍼티의 configurable 속성을 false로 정의하는 것입니다.

메서드로서 호출할 때 그 메서드 내부에서의 this

함수 vs 메서드

함수와 메서드를 구분하는 유일한 차이는 독립성에 있습니다. 함수는 그 자체로 독립적인 기능을 수행하는 반면에, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행합니다.

주의할점은 흔히 메서드를 '객체의 프로퍼티에 할당된 함수'로 이해하곤 하는데 이는 반은 맞고 반은 틀립니다.

즉, 어떤 함수를 객체의 프로퍼티에 할당한다고 해서 그 자체로서 무조건 메서드가 되는 것이 아니라 객체의 메서드로서 호출할 경우에만 메서드로 동작하고, 그렇지 않으면 함수로 동작합니다.

위의 예시를 보면 func를 함수로서 호출하면 this가 전역객체 window가 출력되고 메서드로서 호출되면 this가 obj가 됩니다.

그렇다면 내부함수에서의 this를 함수로서 호출과 메서드로서 호출할 때의 this가 어떻게 호출되는지 확인 해 보도록 하겠습니다.

첫번째 호출 - obj1.outer() 메서드로서 호출결과 obj1

두번째 호출 - innerFunc() 호출 함수로서 호출결과 전역객체 window

세번째 호출 - 메서드로서 호출 obj2호출

위의 결과로 봤을때 this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지 등)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건입니다.

메서드 내부 함수에서의 this를 우회하는 방법

위의 예시를 보면 호출 주체가 없는 함수 호출은 전역객체 window를 호출하는 문제점이 존재합니다. 그러면 this를 명확하게 지정해 주는 방법은 무엇이 있는지 확인해 보도록 하겠습니다.

outer스코프에서 self라는 변수에 this를 저장한 상태에서 innerFunc2함수에서 해당 self를 호출해 this가 outer를 가르키도록 설정 해 주었습니다.

this를 바인딩하지 않는 함수

this가 가장 명시적으로 어떻게 동작해야 할까요?

바로 상위 스코프를 호출하면 그게 this의 가장 올바른 동작이라고 생각합니다.

ES6에서는 위의 요구에 맞는 화살표 함수가 생겼습니다.

화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있습니다. 즉, 내부함수를 화살표 함수로 바꾸면 '우회법'이 불필요해집니다.

명시적으로 this를 바인딩하는 방법

위에서 this를 우회하는 방법, this를 바인딩하지 않는 함수를 알아보았습니다. 이번에는 this를 명시적으로 바인딩 하는 방법을 알아보겠습니다.

call 메서드

Function.prototype.call(thisArg[, arg1[,arg2[, ...]]])

call 메서드는 호출 주체인 함수를 즉시 실행하도록 하는 명령어입니다. 이때 call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 합니다. 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있습니다.

call 사용예시

다른 객체의 메서드를 나의 메서드인 것 처럼 사용할 수 있습니다.

let obj1 = {
	name : 'casic'
    speak() {
    	console.log(`${this.name} call`)
    }
}

let obj2 = {
	name : 'micle'
}

obj1.speak() // casic call 호출
obj2.speak() // error 호출
obj1.speak().call(obj2) // micle call 호출

생성자 내부에서 사용하여, 다른 생성자 함수의 멤버를 가져올 수 있습니다.

const Util = function() {
	this.getName = function () {
    	return this.name;
    };
    
    this.setName = function(name) {
    	this.name = name;
    };
};

Class Car = {
	constructor(name, price) {
    	Util.call(this);
    };
    this.name = name;
    this.price = price;
};

const mycar = new Car('sonata', 800)

mycar.getName() // sonata 출력
mycar.setName('benze') // setName가져와서 this에 benze입력
mycar.getName() // benze 출력

apply 메서드

Function.prototype.apply(thisArg[, argsArray])

apply 메서드는 call과 기능적으로 완전히 동일합니다. 다만 call 메서드는 첫번째 인자를 제외한 나머지를 매개변수로 받는 반면에 apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다는 차이가 있습니다.

call /apply 메서드의 활용

유사배열객체에 배열 메서드를 적용

객체에는 배열 메서드를 적용할 수 없습니다. 그러나 키가 0 또는 양의 정수인 프로퍼티가 존재하고 length 프로퍼티의 값이 0 또는 양의 정수인 객체, 즉 배열의 구조와 유사한 객체의 경우 call 또는 apply 메서드를 이용해 배열 메서드를 차용할 수 있습니다.

생성자 내부에서 다른 생성자를 호출

생성자 내부에 다른 생성자와 공통된 내용이 있을 경우 call 또는 apply를 이용해 다른 생성자를 호출하면 간단하게 반복을 줄일 수 있습니다. 아래에서 Student, Employee, 생성자 함수 내부에서 Person 생성자 함수를 호출해서 인스턴스의 속성을 정의하도록 구현해 보겠습니다.

bind 메서드

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

bind메서드는 ES5에서 추가된 기능으로 call과 비슷하지만 즉시 호출하지는 않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드입니다.즉 다시 새로운함수를 호출할 때 인수를 넘기면 그 인수들은 기존 bind에서 메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록됩니다.

let obj1 = {
	name : 'casic'
    speak() {
    	console.log(`${this.name} call`)
    }
}

let obj2 = {
	name : 'micle'
}

obj1.speak() // casic call 호출
obj2.speak() // error 호출
obj1.speak.call(obj2) // micle call 호출

let obj2Func = obj1.speak.bind(obj2)
obj2Func // micle call

bind 메서드는 함수에 this를 미리 적용하는 것 과 부분 적용 함수를 구현하는 두 가지 목적을 모두 지닙니다.