[Javascript] This

This란?

Javascript의 this 키워드는 함수를 호출한 방법에 따라 this가 가리키는 객체가 변경됩니다. 일반적으로 this는 브라우저에서는 window 전역객체를 가리키고, Node에서는 global 전역객체를 가리킵니다. 

// 브라우저
this === window; // true

// Node.js
this === global; // true

 

this 값 할당

전역 범위내에서의 this는 전역객체를 가리키는데 Custom한 객체 내의 프로퍼티 Value로 정의한 함수내에서의 this는 자신이 속한 Custom 객체를 가리킵니다.

var Obj = {
	whatsThis : function () {
		return this;
	}
}

Obj.whatsThis() === Obj // true

또한 apply(), call(), bind() 메서드를 통해 this를 할당 할 수 있습니다.

var etc_Obj = {
    a : 'Custom'
}

var a = 'Global'

function whatsThis() {
    return this.a;
}

whatsThis() // 'Global'
whatsThis.call(etc_Obj) // 'Custom'
whatsThis.apply(etc_Obj) // 'Custom'
whatsThis.bind(etc_Obj)() // 'Custom'

apply, call 메소드는 실행하려는 함수에게 this의 값과 파라메터를 전달하여 실행시킨다. this가 바인딩 된 상태로 동작이 되며 위 예제에서는  etc_Obj객체를 this로 전달하였습니다. 단, apply와 call 메소드의 첫번째 인자는 'this'로 동일하지만 두번째 인자부터는 전달하려는 파라메터 값인데 apply는 두번째 인자 자리 배열 내에 전달하려는 파라메터를 입력하는 것에 차이점이 있습니다. 또한 bind 메소드는 함수를 실행시키지는 않고 this binding 동작만 수행합니다. 

// call 메소드
func.call(etc_Obj, param1, param2, ...)

// apply 메소드
func.apply(etc_Obj, [param1, param2, ...])

/// bind 메소드
func.bind(etc_Obj)(param1, param2);

 

화살표함수에서의 This

일반 함수와는 다르게 화살표 함수에서의 this는 가리키는 대상이 다릅니다. 자신이 '생성된 시점'에 자신을 '포함하는' 상위 객체를 가리킵니다.  전역 코드에서의 this는 화살표 함수와 일반 함수 모두 전역 객체를 가리킵니다. 

//전역 코드 내 this
var basicFunc = function () {
	return this;
};
var arrowFunc = (() => this);
basicFunc(); // window
arrowFunc(); // window

//객체 내 this
var obj = {
    basic : function () {
        return this
    },
    arrow : (() => this)
}

obj.basic(); // obj
obj.arrow(); // window

화살표 함수는 apply, call, bind로 전달된 this를 무시합니다. 오로지 본인 호출된 시점의 렉시컬 컨텍스트의 것으로 this가 정의됩니다.

// example 1
var arrow = (() => this);
var obj = {};
arrow(); // window

//호출시점의 상위 객체를 가리킨다.
arrow.call(obj); // window 
arror.apply(obj); // window
arrow.bind(obj)(); // window


// example 2
// obj.basic의 return값이 arrow function일 때
var obj = {
	basic: function () {
		var arrow = (() => this);
		return arrow;
	}
}

// basic 함수를 obj의 메소드로써 호출하고 this를 obj로 설정, 
// 반환된 arrow function을 func에 할당
var func = obj.basic();

// obj.basic함수의 생명주기는 끝났으나 호출된 시점에 렉시컬 환경을 기억하여 this는 그대로 obj를 가리킨다.
// 이때 func에 할당된 arrow를 호출하면 본인의 상위 객체인 obj를 가리키고 있다.
func(); // obj

// 호출하지 않고 basic 함수 자체를 func2에 할당할 경우
var func2 = obj.basic;

// 전역 코드에서 호출한 func2의 this가 전역객체인 window를 가리킨 상태에서 
// 이어서 arrow함수가 호출되어 상위객체인 window를 가리킨다.
func2()();

참고 사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this