this에 대한 개념이 부족해서 다시 정리해보는 블로깅

excution context

this를 살펴보기 전에, 전역영역에

var num=1;
function foo(){
	return num;
}

이렇게 생성했다고 가정하면 메모리 테이블이 저장되는데 이를 excution context라고 부릅니다.

excution context를 살펴보면 아래와 같습니다.

어떤 함수가 호출되면, 실행컨텍스트 excution context가 만들어집니다.

• call stack에 불린 순서대로 push 되고
  함수를 벗어나면 call stack에서 pop
• 실행 컨텍스트는 함수단위로 생성되고 블락에서는 생성 X
• 실행 컨텍스에 담긴 것으로는 scope내 변수 및 함수, 전달인자, 호출된 근원(caller), this이지만 this와 실행컨텍스트를 동일시하고 불리는 경우도 많음

+) 실행시! 실행컨텍스트가 생성된다는 사실이 중요하다!

function a(){
 let YouAreIn = 'A scope';
 b();
}

function b(){
 let YouAreIn = 'B scope';
 c();
}

function c(){
 let YouAreIn = 'C scope';
 debugger;
}

a();

위 코드는 A, B, C, Global 총 네개의 실행 컨텍스트를 가집니다.

this

모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자입니다. execution context의 구성요소 중 하나로, 함수가 실행되는 동안 이용할 수 있습니다.

5 patterns of Binding 'this'

JavaScript에서의 this는 다른 언어들과 조금 다른 부분이 있으니 혼동해서는 안됩니다.

1. Global: window
2. Function 호출: window
3. Method 호출: 부모 object
4. Construction mode(new 연산자로 생성된 function 영역의 this): 새로 생성된 객체
5. .call or .apply 호출의 첫번째 인자로 명시 된 객체

Global & Funtion 호출

this === window

this
// Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
var test = "Global Varible"
this.test // "Global Varible"
function foo(){
    console.log(this === window)
}

foo(); //true

위의 코드 처럼 전역의 this는 window이고, console.log로 확인해 보았을 때 function 역시 this가 window인 것을 확인할 수 있습니다.

Method 호출

this === 부모 Object

Method는 객체에 담긴 함수입니다.

Method를 호출했을 때 this는 직계부모 입니다.

let obj={
    foo:function(){console.log(this)}
}
obj.foo(); // {foo: ƒ} -> obj



let obj2={
    hi:{
        fn:function(){console.log(this)}
    }
}
obj2.hi.fn() // {fn: ƒ} -> hi

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

실행되는 시점에서 부모가 누군지 판단하기 때문에 obj2.method()를 실행 시켰을 때 this가 실행되는 시점에 부모가 obj2니까 this는 obj2이다.

++) function의 this가 window인 이유를 연관지어 생각할 수 있습니다.
Method와 동일하게 funtion도 부모를 this로 갖는데, function의 부모가 window일 뿐 입니다.

Construction mode(new 연산자로 생성된 function 영역의 this): 새로 생성된 객체

this === 새로 생성된 객체

다른 언어에 비해 js가 this가 갖는 값이 어려운데 이번에는 익숙한 this 입니다! ㅎㅎ

function Notebook(brand,price){
  this.brand = brand;
  this.price = price;
}

let macbook = new Notebook('apple',280)

이라는 코드가 있을때 constructor함수의 this는 macbook입니다.

.call or .apply 호출의 첫번째 인자로 명시 된 객체

call, apply 뒤의 첫번째 인자로 명시된 것이 ths를 의미합니다.

function bar(){
    console.log(this);
}
var objtest = {hello:'world'}

라는 코드가 있을 때 this를 지정해줄 수 있습니다.

bar.call(objtest) //{hello: "world"}
bar.apply(objtest) //{hello: "world"}