this와 화살표 함수

this

this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
this는 자바스크립트 엔진에 의해 암묵적으로 생성, 함수를 호출하면 this가 암묵적으로 함수 내부로 전달된다.

this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다!!!

함수호출 방식에 따른 this 바인딩

1. 일반 함수 호출

• 일반함수에서는 this에는 전역 객체가 바인딩된다!
• 하지만 일반함수에서 this는 별 의미가 없음
• 어떤 함수라도 일반 함수로 호출된다면 전역 객체에 바인딩된다!!
• strict mode시, undefined에 바인딩됨

2. 메서드 호출

• 메스드를 호출한 객체에 바인딩된다! ("." 앞에 있는 객체를 의미)

3. 생성자 함수 호출

• 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다!

4. Function.prototype.apply / call / bind 메서드에 의한 간접 호출

• 메서드에 첫번째 인수로 전달한 객체에 바인딩된다!
• apply와 call은 함수를 호출하면서 this를 지정할 수 있다.
• bind는 함수를 호출하지 않는다. -> this 바인딩이 교체된 함수를 새롭게 생성해 반환한다!

화살표 함수

콜백 함수를 일반 함수로 호출되면 this가 전역 객체를 가리키게 되는 문제가 있었다. -> 이를 ES6에서 도입된 화살표 함수로 해결할 수 있다.

화살표 함수와 일반 함수의 차이

1. 화살표 함수는 non-constructor이다. -> 생성자 함수로 호출 불가
2. 중복된 매개변수 이름을 선언할 수 없다 -> 일반 함수는 가능 (비엄격 모드에서)

function f(i,i) {return i+i}
f(2,2) // 4

const a = (i,i) => i+i; // SyntaxError

3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 가지고 있지 않다.

• 화살표 함수 내부에서 이를 참조하면 스코프 체인을 통해 상위 스코프의 것을 참조함

this에서의 차이

콜백 함수의 this와 외부 함수의 this가 다르다는 문제점을 화살표 함수 등장 전에는 다음과 같이 해결했다

1. 외부함수에서 this를 다른 변수에 저장한 후, 콜백 함수에 그 변수를 this 대신 사용

...
method(a) {
	const that = this;
    return a.map(function (item) {
      return that.~~~
    })
}

2. Function.prototype.bind 메서드를 사용!

ES6에서는 화살표 함수를 사용하여 콜백 함수의 this와 외부 함수의 this가 다른 문제를 해결할 수 있다!

...
method(a) {
    return a.map((item) => this.~~~
}

화살표 함수가 this 바인딩을 가지지 않기 때문에, 상위 스코프의 this를 참조한다.=> 이를 lexical this라고 한다. 화살표 함수의 this가 함수가 정의된 위치에 의해 결정된다는 의미이다.

메서드를 화살표 함수로 정의하면 안된다!!
-> 이 경우 this가 메서드를 호출한 객체에 바인딩되는 것이 아니라 전역 객체에 바인딩된다!