[Javascript] this 함수, 메서드 차이 (1)

함수와 메서드는 미리 정의한 동작을 수행하는 코드 뭉치

함수와 메서드의 차이는 어떤 함수를 함수로서 호출하는지 메서드로서 호출하는지에 차이가 있고 그때에 this값이 다르다.

따라서 둘을 차이는 독립성에 나타난다.

함수는 그 자체로 독립적인 기능을 수행, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행

메서드는 객체의 프로퍼티에 할당된 함수라고 말하고 (50%) + 객체의 메서드로서 호출할 경우에만 메서드로 동작(50%) = 객체의 프로퍼티로 할당된 함수가 객체의 메서드로서 호출할경우를 메서드라고 한다 (100%)

예시코드

var func = function(x){
	console.log(this, x); 
};
func(1);  // window{...} 1

var obj = {
	method: func
};

obj.method(2); // {method: f} 2

func(1) 로 호출시 함수로써 호출하게 되어 this는 window 객체를 갖고 매개변수 x 는 1 이 출력된다.

반면 obj 객체에 method의 프로퍼티로 func를 넣어주고 obj.method(2)로 호출할 경우 메서드로서 호출하게 되고

this는 해당 객체에 관하여(obj) this값을 갖게 되는 것이다. 따라서 {method:f} 와 2 를 출력한다.

이 함수와 메서드를 구분하는 방법은 당연하게 점(.)이 있는지의 여부를 통해 쉽게 알수있고 .뿐만아니라 대괄호([])도 메서드 호출에 해당한다.

메서드로서 호출 - 점표기법, 대괄호 표기법 

var obj = {
	method : function(x){ console.log(this, x);}
};
obj.method(1); // { method : f} 1
obj['method'](2); // { method : f} 2

위의 설명한 것처럼 this에는 호출한 주체에 대한 정보가 담기는데 메서드로서 호출하는 경우 호출 주체는 바로 함수명(프로퍼티명, key) 앞의 객체이다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this가 되는 것이다.

메서드 내부에서의 this

var obj = {
	methodA: function(){ console.log(this);},
    inner: {
    	methodB: function(){ console.log(this); }
};
obj.methodA();  // {methodA: f, inner: {...}}  (===obj)
obj['methodA'](); // {methodA: f, inner: {...}}  (===obj)

obj.inner.methodB(); // {methodB: f}  (===obj.inner)
obj.inner['methodB'](); // {methodB: f}  (===obj.inner)
obj['inner'].methodB(); // {methodB: f}  (===obj.inner)
obj['inner']['methodB'](); // {methodB: f}  (===obj.inner)

이렇게 점(.)앞, 혹은 대괄호([])앞의 객체에 따라 this값이 달라진다.