💚💗 본문 내용은 코어자바스크립트를 참고하였습니다.

---

THIS란 ?

• 함수와 메서드의 구분을 할수있게 해주는 기능이면서
  상황별로 달라지기 때문에 this가 무엇을 가리키고 있는지, this를 원하는 대상을 바라보게 하는 방법을 아는 것이 javascript에서 문제해결을 하는데 꼭 필요하다.
  자바스크립트에서 this는 실행 컨텍스트가 생성될때 결정되는데 실행컨텍스트는 함수를 호출할때 생성되므로 this는 함수가 호출될때 결정된다고 할수있다.

일반적으로 this가 바인딩되는 규칙

---

1. 전역공간에서의 this

• 전역공간에서의 this는 전역객체(window)를 가리킨다.

2. 함수와 메서드에서의 this

• 함수를 호출하는 방법에는 함수로서 호출하는 방법과 메서드로서 호출하는 경우가있다. 둘다 모두 미리 정의한 동작을 수행하는 코드 뭉치로 함수는 그 자체로 독립적인 기능을 수행하지만 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다.

• 일반적으로 함수를 호출했을 경우에는 this가 따로 지정되지 않기 때문에 this는 전역객체를 가리킨다.

• 메서드는 함수앞에 .이 있을경우 나 [] 가 있을경우 this에는 호출한 주체에 대한 정보가 담기게 되므로 앞의 객체가 this 가된다. (메서드 안의 내부함수도 동일)

var thisFunc = function(){
  console.log(this)
}

thisfunc()  // window

var thisMethod = {
  a: thisfunc
}

thisMethod.a() // { a: ƒ thisfunc() } 

3. 콜백함수 호출시 this

• 제어권을 받은 함수에서 콜백함수에 별도로 this를 지정한 경우에는 그 대상을 참조하며 특별히 지정하지 않은 경우에는 전역개체를 참조합니다.

4. 생성자 함수를 통한 객체 생성시 this

• 생성자 함수를 통해 생성된 인스턴스(객체)의 this는 생성된 인스턴스 자신을 가리킵니다.

this를 직접 바인딩하는 방법

1. call, apply 메서드를 사용하는 방법

func.call(thisArg[, arg1[, arg2[, ...]]])
호출주체의 함수를 즉시 실행하며, 이때 첫번재 인자를 this로 바인딩하고 , 이후의 인자들은 함수의 매개변수로 사용
func.apply(thisArg, [argsArray])
call과 같지만 두번째인자를 배열로 받아 함수의 매개변수로 사용
(유사배열객체, 생성자내부함수호출, argument객체 등에 사용해서 배열메서드를 사용할때 사용한다.)

2. bind 메서드를 사용하는 방법

func.bind(thisArg[, arg1[, arg2[, ...]]])
bind() 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다.
바로 실행하는 것이 아니라 원하는 this가 바인딩된 함수를 생성한다.

3. 콜백함수내에서 별도의 인자로 this를 받는경우

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

화살표함수

• 화살표 함수는 this를 바인딩하는 과정이 생략된 함수로 this에 접근하고자하면 스코프체인상 가장 가까운 this에 접근하게 된다.