[JS] this
this
this 키워드
- this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referenceing variable)이야.
- 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경 할 수 있어야 해.
이때, 자신이 속한 객체를 가리키는 식별자를 참조할 때 자기 참조 변수로 this를 사용해.
<예시 1 - 바람직한 경우>
객체 리터럴에서 this를 사용하는 예제
//객체 리터럴
const circle = {
radius: 5,
getDiameter() {
//this는 메서드를 호출한 *객체를 가리켜.
// this => circle (radius를 가진 circle이란 객체)
return 2 * this.radius;
}
};
console.log(circle.getDismeter()); // 10
생성자 함수에서 this를 사용하는 예제
//생성자 함수
function Circle(radius) {
//this는 생성자 함수가 생성할 인스턴스를 가리켜.
this.radius = radius;
}
Circle.prototype.getDiameter = function() {
//this는 생성자 함수가 생성할 인스턴스를 가리켜.
return 2 * this.radius;
};
//인스턴스 생성
const circle = new Circle(5);
console.log(circle.getDiameter()); // 10
*객체 : 이름 (name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합.
< 예시 2 - 바람직하지 않은 경우>
const circle = {
redius: 5,
getDiameter(){
return 2 * circle.radius; // (*)
}
}(*) 객체 리터럴 방식으로 생성한 객체의 경우,
메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있어.
하지만 이런 경우는 바람직하지 않아.
함수를 선언하는 시점에는, 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없어.
인스턴스를 생성하기 전의 생성자 함수는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요한데,
그게 this라는 특수한 식별자야.
- 자바스크립트 엔진에 의해 암묵적으로 생성돼.
- 코드 어디서든 참조가 가능해.
- 함수 호출 시에 arguments 객체와 this가 암묵적으로 함수 내부에 전달되서 지역변수처럼 사용 가능해.
- this 바인딩은 함수 호출 방식에 의해 동적으로 결정이 돼.
this 가 동작하는 원리
- this가 가리키는 값, 즉, this의 바인딩은 함수 호출 방식에 따라 this의 바인딩 값이 동적으로 결정돼.
1. 일반 함수 호출에서 this는 전역 객체를 가리켜
2. 객체의 메소드로 호출된 함수에서 this는 해당 객체를 가리키고.
3. 생성자 함수에서 this는 생성된 객체를 가리켜.
4. call() 또는 apply()메소드를 사용해서 명시적으로 this를 지정할 수 있어.
this의 용법
- 객체의 메소드에서 this를 사용해서 해당 객체의 속성에 접근하거나 수정할 수 있어.
- call() 또는 apply() 메소드를 사용해서 함수 내에서 this를 지정해서
특정 객체의 속성에 접근하거나 수정할 수 있어.
this를 사용하는 차이점
- 함수를 호출하는 방법에 따라 this가 참조하는 값이 달라진다는 거야. 그리고
함수를 호출하는 방법에 따라 this가 참조하는 값이 달라진다는 거야. 그리고 이러한 동적인 특성 때문에 this의 값이 예상과 다르게 결정될 수 있어. 그래서 this를 사용할 때는 주의가 필요해.
특히, 콜백 함수나 중첩 함수에서 this를 사용할 때는 주의해야해.
이런 경우엔 this를 변수에 저장하여 사용하거나 bind() 메소드를 사용하여 this를 지정할 수 있어.
-참고자료-