this

javascript를 사용하면서 정말 많이 사용되는 중요한 개면인 this를 아작내보자!!!

이번에 공부할 내용은 this 입니다.

 

보통 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미하죠.

 

근데... 자바스크립트에서의 this는 보다 자유롭고 복잡합니다.

 

자바스크립트의 this는 어디서든 사용할 수 있다는 점이 좀 다르죠.

 

상황에 따라 this가 바라보는 대상이 달라지는데, 이러한 이유로 this의 대상을 파악하기 힘들어질 수 있습니다.

 

이를 좀 더 원할하게 파악할 수 있도록 정확한 작동 방식을 파악해보시죠.

 

 

일단, 함수 호출과 메서드 호출에 대한 차이를 분명히 하시는게 좋습니다.

 

프로그래밍 언어에서 함수와 메서드를 구분은 독립성에 있습니다.

 

함수는 그 자체로 독립적인 기능을 수행하고, 메서드는 자신을 호출한 객체에 관한 동작을 수행합니다.

 

즉, 함수란 var temp = function() {} 을 의미합니다.

var temp = function() {
	console.log(this); // window 전역객체
}

 

그리고, 메서드란 var temp2 = {a: 1, b: 2, sum: function() {return a+b}} 를 의미한다고 볼 수 있습니다.

var temp2 = {
	a: 1, 
    b: 2, 
    sum: function() {
    	console.log(this); // {a:1, b:2, sum:function() {...}}
    	return a+b;
    }
}

 

무슨 차이인지 감이 잡히시나요? 

 

함수로서의 호출은 temp() 이고, 메소드로써의 temp2.sum() 입니다.

 

맞습니다! 메소드로서의 호출은 앞에 객체명이 있고, 이게 차이점이라고 할 수 있습니다.

 

이 차이점을 생각하신다면, this가 가르키는 대상을 파악하기 조금 더 수월해집니다.

 

 

 

이제 다양한 상황별 this가 가르키는 대상을 파악해보시죠 !!!

 

전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가르킵니다.

 

브라우져 환경에서는 window 객체를 나타내고, Node.js 환경에서는 global 객체를 가르킵니다.

 

 

메서드 내부에서의 this

메서드로서 호출된 경우, this는 호출한 객체에 대한 정보가 담깁니다.

 

즉, temp2.sum() 과 같은 점 표기법의 경우 점(.) 앞에 명시된 객체가 곧 this가 가르키는 대상이 되는 겁니다.

 

 

함수 내부에서의 this

함수로서 호출된 경우, 메소드와 다르게 함수 앞에 명시된 객체가 없습니다.

 

이러면 this 역시 명시된 대상이 없기 때문에 자동으로 전역 객체를 가르키게 됩니다.

 

 

 

대표적으로 this를 가르키는 대상은 위 세가지입니다.

 

함수로서의 호출인지 메서드로서의 호출인지만 파악하신다면 어려움이 없으실 겁니다.

 

다만, 명시적으로 this를 바인딩하는 방법이 존재하기 때문에 더욱 복잡해집니다.

 

이 역시 최대한 간단하게 파악해보죠!!!

 

 

CALL 메서드

Function.prototype.call(thisAgr, ...argArray);

call 메서드의 첫 번째 인자로 임의의 객체를 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수입니다.

 

이를 통해서 임의의 객체를 this로 지정할 수 있습니다.

 

var data = {x:10, y:20};
var func = function(a,b,c) {
    console.log(this, a, b, c);
}
func(); // Window
func.call(data, 1, 2, 3); // {x: 10, y: 20} 1 2 3

신기합니다. 근데 아직 어디에 쓰는지 잘 모르겠습니다... ㅎㅎ

 

 

APPLY 메서드

Function.prototype.apply(thisArg, ?argArray);

apply는 call 메서드와 기능적으로 동일합니다.

 

다만, 첫 번째 임의의 객체를 바인딩하고, 이후 인자들에 배열로 받는 차이가 있습니다.

 

var data = {x:10, y:20};
var func = function(a,b,c) {
    console.log(this, a, b, c);
}
func(); // Window
func.apply(data, [1, 2, 3]); // {x: 10, y: 20} 1 2 3

이 역시 아직 어디에 쓸런지 모르겠습니다... ㅎㅂㅎ

 

 

BIND 메서드

Function.prototype.bind(thisArg, ?argArray);

bind 메서드는 ES5에서 추가된 기능입니다.

 

call과 기능은 비슷하지만, 즉시 호출하지 않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 합니다.

 

var data = {x:10, y:20};
var func = function(a,b,c) {
    console.log(this, a, b, c);
}
var funcBind = func.bind(data);
funcBind(1,2,3); // {x: 10, y: 20} 1 2 3

음.. 뭔가 자주 사용될 것 같은데, 아직 입문자로 역시 어디에 쓰일지 잘 모르겠습니다.

 

이 친구들은 나중에 코딩하다가 보면 반가울 듯 합니다.

 

 

예외, 화살표 함수(Arrow Function)

ES6에 새롭게 도입된 화살표 함수는 특이합니다.

 

실행 컨텍스트 생성 시 this를 바인딩하는 과정이 제외됐다고 합니다.

 

즉, 이 화살표 함수는 내부에는 this가 없으며, 접근하면 스코프체인상 가장 가까운 this에 접근하게 됩니다.

 

var obj = {
    outer: function() {
        console.log(this);     // {outer: ƒ}
        var inner = () => {
            console.log(this); // {outer: ƒ}
        }    
        inner();
    }
}

 

이런식으로 화살표 함수를 쓰면, 메서드로써의 호출이나 call/apply/bind 방식을 적용할 필요가 없어 보입니다.

 

화살표 함수에 이런 원리가... 당연한 듯, 당연하지 않을 듯 새롭습니다...!!

 

 

 

 

 

[출처] '코어 자바스크립트 - 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍', 정재남 지음