Javascript_ this(1)

Javascript_ this

javascript에서 this는 다른 언어에서와 다르게 어디서든 사용할 수 있음. 함수와 객체(메서드)의 구분이 느슨하지만 this를 통해 구분할 수 있음.

this는 기본적으로 함수를 호출할 때 결정됨

전역 공간에서의 this

console.log(this)  //window {...}           

전역공간에서 this를 호출하면 window객체를 뜻함.
자바스크립트 전역공간에서 변수를 선언하면 window객체에 (nodejs환경에선 global) 해당 변수를 할당함.


메서드 내부에서의 this

함수를 실행하기 위해선 함수로서 호출하는 경우와 메서드로서 호출하는 경우가 있음. 둘의 유일한 차이는 독립성이 있음. 말그대로 함수는 그 자체로 독립적인 기능을 수행하고, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행함. 이를 this로 구별 가능

let func = function(x) {
 console.log(this, x);
}
func(1);  // window {...} 
 
let obj = {
 method : func
 };

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

메서드에서 this를 호출하면 해당 메서드가 나옴.
그리고 객체를 호출하는것이기 때문에 obj['method']처럼 해도 가능함.


함수로서 호출할 때 함수 내부에서의 this

어떤 함수를 함수로서 호출할 경우 this가 지정되지 않음. this는 호출한 주체에 대한 정보가 담겨야 함. 하지만 함수로 호출하는 것은 객체를 명시하지 않고 직접 실행한 것이기 때문에 알 수 없음.

let obj = {
 outer : function() {
 	console.log(this); // 1
 	let innerFunc = function(){
 		console.log(this); // 2, 3
 	}
 	innerfunc()
 	let obj2 = {
 		innerMethod : innerFunc
 	};
 	obj.innerMethod();
 }
};
obj1.outer()

1번 console.log는 obj1.outer 함수가 호출될때 outer앞에 . 이 있기 때문에 메서드로서 호출된 것이라서 obj1 호출.
2번 console.log는 innerfunc()에 의해서 호출되는데 . 이 없기 때문에 함수로서 호출된것이라서 window 호출.
3번 console.log는 obj.innerMethod()에 의해 호출되는데 . 이 있기 때문에 메서드로서 호출된것이라서 obj2호출


전역객체를 바인딩하지 않고 주변 환경의 this를 그대로 상속받아 사용하는 방법

ES5이전 문법

let obj = {
 outer : function() {
 	console.log(this); // 1
 	let innerFunc = function(){
 		console.log(this); // 2
 	}
 	innerfunc()
 	let self = this; // 추가!
 	let innerFunc2 = function() {
 		console.log(self); // 3
 	}
};
obj1.outer()

//1은 obj, //2는 window // 3은 obj


ES6 에서 this가 전역객체를 바라보는 문제를 해결하기 위해서 나온 Arrow function

사실 진짜 해결하려고 만든건지는 모르겠지만 해결이 됨.

let obj = {
 outer: function(){
 	console.log(this);
 	let innerFunc = () => {
 		console.log(this);
 	};
 	innerFunc();
 }
};
obj.outer()

이렇게 화살표 함수로 사용하게되면 console.log 둘다 {outer: f}를 바라보게됨.