this의 정의 : this는 자신이 속한 객체 또는 미래에 생성될 인스턴스 객체를 가리키는 자기 참조 변수.
이때 this는 함수호출방식에 따라서 this가 참조하는 객체가 달라진다. 이를 동적 바인딩이라 한다.
다만 한가지 화살표 함수는 자신의 바로 윗단계인 상위 스코프를 참조하는 정적 바인딩을 가진다.
참고로 전역에서 this는 전역객체가 바인딩된다.
본격적으로 this의 동작 방식에 대해서 들어가보자. 결국 자바스크립트의 this동작 방식은 함수 호출 방식에 따라 결정된다.
1. 함수 호출 방식에 의해 동적으로 결정되는 this의 바인딩
2.1 : 일반함수에서의 this
2.2 : 객체의 메소드를 호출할때 this
2.3 : 생성자 함수의 this
각각의 this는 어느 객체에 바인딩 될까?
1.1 : 일반 함수에서의 this는 전역 객체가 바인딩된다.
다만 this의 정의를 생각했을때 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서는 의미가 없다. 또한 strict mode에서는 일반 함수 내부의 this는 undefined이 바인딩된다.
중요한점은 메서드 내에서 정의한 중첩 함수도 일반 함수로써 호출이되면 중첩 함수의 내부에는 전역 객체가 바인딩 된다. 중첩 함수가 외부 함수를 참조하려면 어떻게 해야할까?
이를 해결 할 수 있는 방법은 두가지가 있다.
첫 번째로 that 키워드를 사용하는것이다. 외부 함수에서 that 변수를 만들어서 외부함수의 this를 할당 해놓는것이다. 이를 중첩 함수에서 사용한다.
두 번째로 화살표 함수를 사용하는것.
1.2 : 객체의 메서드를 호출할 경우 this는 해당 메서드를 호출한 객체를 가리킨다.
A객체와 B객체를 만들고 A객체에 메소드를 정의했다고 가정해보자. 이때 B객체에서 A객체의 메소드를 호출했다고 해보자. 이때 this는 어느 객체에 바인딩 될까? 정답은 B객체다. this에 바인딩될 객체는 호출 시점에서 결정되기 때문이다.
비록 메서드가 A객체에서 정의가 되었더라도 B객체에서 호출된다면 그 메소드의 this는 호출한 객체에 바인딩된다.
1.3 : 생성자 함수 내부의 this는 생성자 함수가 미래에 생성할 인스턴스에 바인딩 된다.
2. 함수의 프로토타입 메서드를 사용하여 명시적 바인딩 가능
함수의 프로토타입 메서드인 apply, call, bind 메서드를 사용하여 명시적 바인딩이 가능하다.
apply,call 메서드는 첫번쨰 인수에 this에 명시적으로 바인딩할 객체, 두번째 인수에는 필요한 값의 목록을 통해 함수를 호출한다.
두 메서드는 인수를 전달하는 방식만 다를뿐 기능은 같다.
apply 메서드는 배열로 인수로 전달하고, call 메서드는 쉼표로 구분한 리스트 형식으로 전달한다.
bind 메서드는 this를 명시적으로 바인딩하여 새로운 함수를 반환한다.
이 새롭게 반환 된 함수는 호출될때마다 동일한 this의 값을 유지한다.
bind 메서드를 사용하여 외부함수의 this와 콜백함수의 this가 불일치하는 문제를 해결 할 수 있다.
외부함수의 내부this를 콜백함수에 bind를 통해 외부함수의 내부 this를 전달하면 동일한 this를 바인딩 할 수 있다는것!
설명해보자 !
- this의 정의
- 동적 바인딩과 정적 바인딩
- 함수호출방식에 따라 달라지는 동적 바인딩은 크게 세가지로 설명 할 수 있다.
- 함수의 프로토타입의 메서드를 사용해 명시적 바인딩을 사용 할 수 있다.
