[D+22] Java Script 심화개념 'this'

 

 

D+22

-  Java Script 심화 개념 'this' -

(this, 'this'를 바인딩하는 5가지 패턴)

 

---

 

 

this

•모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자

 

•execution context(실행 콘텍스트)의 구성 요소 중 하나로, 함수가 실행되는 동안 이용 가능

 

 

---

'this'를 바인딩하는 5가지 패턴

• Global : window

 

• Function 호출 : window

 

• Method 호출 : 부모 object

 

• Construction mode

 

• .call or .apply 호출

 

 

Global & Function 호출

var name = 'Global Variable';
console.log(this.name); // "Global Variable"

function foo() {
	console.log(this.name); // "Global Variable"
}

foo();

여기 함수 foo가 있고, 전역변수로 name이 있는 것을 확인할 수 있다.

 

여기서 foo를 실행하면서 콘솔 로그로 this.name을 실행했을 때와

전역에서 this.name을 찍은 값이 같은 것을 확인할 수 있다.

 

왜냐하면 name은 전역영역인 window에 묶여있는 값이다.

 

때문에 name은 window.name과 같다고 할 수 있다.

 

그렇게 따지게 될 경우 전역영역에 있는 this도 window라고 할 수 있기 때문에 해당 결과가 나오며,

마찬가지로 함수 foo안에 있는 this도 window를 나타내므로 같은 결과가 나온다고 볼 수 있다.

 

콘솔로그를 통한 구체적인 설명

 

콘솔로그에 함수 안에서도 this가 window인지 확인하는 모습

 

var name = 'Global Variable';

function outer() {
	function inner() {
    	console.log(this.name); // "Global Variable"
    }
    
    inner();
}

outer();

이와 같은 경우에도 this는 window를 가리켜 "Global Variable"를 찍어내는 것을 알 수 있다.

 

즉 this는 스코프가 여러 개 묶여있다고 해서 outer나 inner가 되는 것이 아니라 window인 this가 되는 것이다.

 

 

Method 호출 : 부모 object

위에 같은 경우와 다른 경우가 있는데 바로 메소드 호출이다.

 

부모 없이 바로 함수를 실행하는 것이 함수 호출이라 한다면,

메소드 호출은 객체에 담긴 함수, 즉 부모가 있는 것이라고 보면 될 것 같다.

 

이때, 부모가 있는 녀석에서 메소드로 호출할 경우, this는 부모 오브젝트가 된다.

(단, 직계부모만 끄집어낸다)

 

var obj = {
	fn: function(a, b) {
    	return this;
    }
};
var obj2 = {
	method: obj.fn
};

console.log(obj2.method() === obj2); //true
console.log(obj.fn() === obj); //true

위에 식에서 this는 실행컨텍스트이기 때문에 실행되는 시점이 굉장히 중요한 녀석이므로,

실행되는 시점의 부모를 확인하면 true값이 나오는 결과를 확인할 수 있다.

 

 

Construction mode

new 연산자로 생성된 함수 영역의 this를 나타내며 이때의 this는 constructor(생성자)를 나타낸다.

 

 

.call or .apply 호출

명시적으로 넘겨줄때 사용한다고 간략하게 설명할 수 있으며,

.apply는 배열로 값을 넘겨주고, .call은 그냥 단순히 값을 입력하면 넘겨준다는 차이를 가지고 있다.

 

 

---

요약