자바스크립트를 공부하고 있는데 아직 this를 잘 이해하지 못하고 있는것 같아서 정리해보고자 한다.

this란?

this는 객체를 의미한다. this는 호출하는 방식에 따라서 값이 결정되는데, this의 디폴트 값은 전역객체로써 window의 값을 가지고 있다.

console.log(widnow === this) //true

호출하는 방식에 따라 값이 변하는 this 바인딩

1. 함수 호출에서의 this

2. 객체 메서드에서의 this

3. bind()를 이용한 this

4. 생성자 함수 호출에서의 this

5. 화살표 함수에서의 this

1. 함수 호출에서의 this

function functionThis(){
  console.log(this)
}

functionThis() // window 객체 호출

함수 내부에 있는 this의 경우에도 전역객체 window를 가르킨다.

function functionThis(){
  console.log(this)
  
  function functionThis2(){
    
  	console.log(this)
    
  }
  
  functionThis2()
}

functionThis() 
// window 객체 호출, 
// functionThis2의 this의 결과값도 window 객체를 호출함

함수안에 있는 this의 값은 window객체이다.

2. 객체 메서드에서의 this

const obj = {
  name : "kim",
  function : function(){
  console.log(this)
  }
}
obj.function() // obj 자기 자신을 가르킴

객체 메서드에서의 this의 경우 함수를 호출한 객체가 this가 된다. 위의 경우 obj에서 호출한 function이라는 함수는 obj에서 호출 하였기 때문에 이경우 this는 obj라는 객체를 가르키게 되는 것이다.

const obj = {
  name : "kim",
  function : function(){
  	console.log(this)
  },
  obj2 : {
  	name : "lim",
    function : function(){
    console.log(this)
    }
  }
}
obj.obj2.function() // {name : "lim", ....} obj2를 가르킴

이럴 경우에는 실질적으로 함수를 호출한 객체는 obj2가 되므로 obj2의 객체가 호출 된다.

function functionThis(){
  console.log(this)
}

const obj = {
  name : "kim",
  functionThis
  }

obj.functionThis() // obj 자기 자신을 가르킴
functionThis() // window를 가르킴

이 경우에도 obj를 가르키게 된다. functionThis를 호출한 객체가 obj라면 호출한 객체가 obj이기 때문에 obj를 가르킨다.

3. bind()를 이용한 this

bind를 이용하여 this를 바인딩할 수 있다.

function functionThis(){
  console.log(this)
}

const binding = functionThis.bind({name : "kim"})

binding() // {name : "kim"}

위와 같이 functionThis를 바인딩을 하면 bind메서드를 통해 설정한 객체가 바인딩 되어진다.

function functionThis(){
  console.log(this)
}

const binding = functionThis.bind({name : "kim"})
const moreBinding = binding.bind({name : "lim"})

binding() // {name : "kim"}
moreBinding() // {name : "kim"}

bind는 한번밖에 할 수 없다. 위와 같이 한번더 바인딩을 하게된다면 이는 적용되지 않는다.

const obj = {
  name : "kim",
  function : function(){
  	console.log(this)
  }.bind({name : "lim"})
}

obj.function() // {name : "lim"}

이런식으로 활용이 가능하다.

4. 생성자 함수 호출

function newFunction(name, age){
  this.name = name
  this.age = age
  console.log(this)
}

const kim = new newFunction("kim", 20)

const lim = new newFunction("lim", 20)

console.log(kim) //{name : "kim" age : 20}
console.log(lim) //{name : "lim" age : 20}

생성자 함수 호출에서의 this는 new를 사용하여 새로운 생성자 함수를 만들 때 새로만든 생성자 함수의 객체를 가르킨다.

5. 화살표 함수에서의 this

화살표함수에서의 this는 일반적인 함수선언식의 this와는 다르다.
함수선언식의 this에서는 함수가 호출 될때 호출하는 객체를 참조하였지만, 화살표함수에서의 this는 상위 스코프를 참조하게 된다.

const obj = {
  name : "kim",
  age : 20,
  arrowFunction : ()=>{
    console.log(this)
  },
  function :function(){
    console.log(this)
  }
  
}

obj.arrowFunction() // 상위 스코프인 window객체 호출
obj.function() // obj 객체 호출

const obj = {
  name: "kim",
  outerFunc: function() {
    function innerFunc ()  {
      console.log(this);
    };
    
    innerFunc();
  }
};

const obj2 = {
  name: "kim",
  outerFunc: function() {
    const innerFunc =()=>  {
      console.log(this);
    };
    
    innerFunc();
  }
};

obj.outerFunc(); // 객체 메서드가 아닌 일반 함수로 호출되었으므로 window 객체를 가르킴
obj2.outerFunc(); // 상위 스코프인 obj2 객체를 가르킨다.

위의 예제를 보면 알 수 있듯이, obj 객체에서는 함수표현식으로 호출을 하였기때문에 호출한 객체가 없기 때문에 window객체가 출력되고,
obj2 객체에서는 화살표함수로 호출을 하였기 때문에 상위스코프롤 참조하여 obj2를 가르키게 된다.