this?

JavaScript에서 함수의 this는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다).

this의 4가지 규칙

기본적 바인딩 : 일반 함수 호출에서 this는 전역 객체를 가리킨다.
암시적 바인딩
명시적 바인딩
new 바인딩

1. 기본적 바인딩
   일반 함수 호출에서 this는 전역 객체를 가리킵니다.
   엄격 모드에서 일반 함수 실행 방식을 쓰면 window 객체를 가리키지 않고, this는 undefined가 되어 error를 출력합니다.

엄격모드 : 런타임시 js 코드에 대하여 엄격한 pasing 및 error handling을 자발적으로 실행하도록 적용함으로써 일반적인 코딩실수나 안전하지 않는 동작을 포착합니다.

2. 암시적 바인딩
   함수가 객체의 프로퍼티 값이면 메소드로서 호출됩니다.
   메소드 내부의 this는 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩됩니다.

var obj1 = {
	name: 'LEE',
	sayName: function () {
    	console.log(this.name)
    }
}

var obj2 = {
	name: 'KIM'
}

obj2.sayName = obj1.sayName;

obj1.sayName() //LEE
obj2.sayName() //KIM

3. 명시적 바인딩
   call, apply, bind 메소드를 사용하여 명시적으로 this를 지정 합니다.

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

var obj = {name :  'hahaha'}
test.call(obj); //{name: 'hahaha'}

4. new 바인딩
   기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다.
   생성자 함수를 new없이 호출한 경우, 함수 Person 내부의 this는 전역 객체를 가르키므로 전역변수에 바인딩됩니다.

this 용법

객체의 메소드에서 this를 사용하여 해당 객체의속성에 접근하거나 수정할 수 있습니다.
또한 call(),apply 메소드를 사용하여 함수 내에서 this를 지정하여 특정 객체의 속성에 접근하거나 수정 할 수 있습니다.

This를 사용하는 큰 차이점?

this를 사용하는 가장 큰 차이점은 함수를 호출하는 방법에 따라 this가 참조하는 값이 달라진다는 것 입니다.
그리고 이러한 동적인 특성 때문에 this의 값이 예상과 다르게 결정될 수 있습니다. 따라서 this를 사용할 때는 주의가 필요합니다.
특히 콜백 함수나 중첩 함수에서 this를 사용할때 주의가 필요합니다. this를 변수에 저장하여 사용하거나 bind()메소드를 사용해서 this를 지정할 수 있습니다.

---

참고자료

MDN
young0_0