JavaScript this에 대해서

요약:

JavaScript에서 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. this는 함수 호출 방식에 따라 바인딩되는 객체가 달라진다.

자바스크립트에서는 함수 호출 방식에 따라 동적으로 결정되는 객체가 this에 바인딩된다.

1. 함수 호출

• 전역 객체는 모든 객체의 최상위 객체를 의미하며, 클라이언트 측에서는 window, 서버 측에서는 global 객체를 의미한다.
• 전역 영역에 선언한 함수는 전역 변수의 메소드로 동작한다. 이때 this는 전역 객체에 바인딩된다.
• 내부 함수, 메소드, 콜백 함수에서도 this는 전역 객체에 바인딩된다.
• 더글라스 크락포드는 이를 “설계 단계의 결함”으로 설명하며, 메소드가 내부 함수를 사용하여 자신의 작업을 직접 돕게 할 수 없다는 것을 의미한다.
• 일반적으로 내부 함수(특히 콜백 함수)의 this가 전역 객체를 참조하는 것을 회피하기 위해 다음과 같은 방법을 사용한다.

var _this = this
function callback() {
  console.log(_this.value)
}

또한, JavaScript는 apply, call, bind 메소드를 사용하여 명시적으로 this를 바인딩하는 방법을 제공한다.

2. 메소드 호출

• 메소드는 해당 메소드를 호출한 객체에 대해 this가 바인딩된다.

3. 생성자 함수 호출

• new 연산자와 함께 생성자 함수를 호출하는 경우, this 바인딩이 일반 함수나 메소드 호출 때와는 다르게 동작한다.

빈 객체 생성 및 this 바인딩:

생성자 함수의 코드 실행 전에 빈 객체가 생성되고, 이후 생성자 함수 내에서 사용되는 this는 이 빈 객체를 가리킨다. 생성된 빈 객체는 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다. this를 통한 프로퍼티 생성:

빈 객체에 this를 사용하여 동적으로 프로퍼티와 메소드를 생성할 수 있다. 이때 this는 생성 중인 빈 객체를 가리킨다. 생성된 객체 반환:

반환문이 없는 경우, this에 바인딩된 새로 생성된 객체가 반환된다 (빈 객체). 반환문으로 this가 아닌 다른 객체를 명시적으로 반환할 수도 있다. 일반적으로 생성자 함수는 반환문을 명시적으로 사용하지 않는다. 참고: 객체 리터럴과 생성자 함수의 차이는 프로토타입 객체에 있다. 객체 리터럴의 프로토타입 객체는 Object.prototype이고, 생성자 함수의 프로토타입 객체는 생성자 함수의 prototype이다.

다음 포스팅에서는 apply, call, bind 호출에 대해 자세히 알아보겠다.

출처: https://poiemaweb.com/js-this