그동안 공부를 해오면서 정말 헷갈렸던 부분이 한개 있다. 바로 this이다.
사실 프로젝트를 진행하는데 있어서 리액트의 함수형 컴포넌트에서는 사용할 일이 많이 없기에 그동안 신경을 안쓰고있던 부분이었어서 이번기회에 공부해보려 한다.
this
this 는 자바스크립트의 자기참조변수이다.
정확히 무엇을 참조하느냐, this가 속한 객체와 this가 생성할 인스턴스를 참조한다.
따라서 this를 어디서 호출하냐에 따라서 this가 가리키는 값이 달라진다. 조금 전문적인 문장으로 thisbinding값이 달라진다 라고한다.
자바스크립트에서 this가 사용되는곳은 물론 여러가지가 있겠지만 그중 대표적으로 사용되는 곳을 살펴보자
전역
먼저 전역에서 this가 사용될 때이다.
지난 포스팅에서 언급했던 것처럼, 자바스크립트의 전역객체는 바로 ‘window’ 객체이다. 따라서 전역에서 사용된 this는 자연스럽게 window 객체를 가리킨다.
console.log(this)
console.log(window)
// 동일한 값을 가진다메서드
이번엔 메서드 내부에서의 this를 살펴보자.
그런데 함수라고 하지얺고 메서드라고 명시한 이유가 있다.
메서드? 함수?
먼저 함수와 메서드의 차이점은 독립적으로 기능수행이 가능한가? 라고볼 수 있다.
함수의 경우 독립적으로 수행이 가능하지만, 메서드의 경우 메서드를 호출한 객체에게 의존성을 가지고 기능을 수행한다.
그런데 위에서 명시했듯이, 자바스크립트의 전역객체는 window / global 이다. 따라서 전역에 선언된 일반 함수도 결국 전역객체의 메서드 인것이다.
다시 본론으로 돌아와서 메서드 내부에서의 this는 현재 함수를 실행하고 있는 객체를 가리킨다.
일반 함수
일반 함수의 예를 들어보자
console.log(this);
// Window {0: global, 1: global, …}
function sample(){
return console.log(this);
}
sample();
// Window {0: global, 1: global, …}놀랍게도 전역객체를 참조한 this 와 동일한 window 값이 출력된다.
자, 위의 내용을 다시 한번 돌이켜보자.
전역에 선언된 일반 함수도 결국 전역객체의 메서드이다.
일반함수를 호출하고있는 객체는 바로 전역객체인 window이다. 그런데 메서드 내부에서의 this는 함수를 실행하고 있는 객체를 가리키므로 전역객체인 window를 가리키게 된다.
그럼 이제 우리가 알고있는 객체안의 메서드로써 사용되는 this의 예시를 보자.
객체안의 메서드
const normal_obj = {
name : "augusstt",
printName(){
console.log(this.name);
}
};
normal_obj.printName();
// augusstt메서드안의 this는 메서드를 실행하고 있는 객체를 가리킨다. 예시 코드에서 printName 메서드를 실행하고 있는 객체는 normal_obj이다.
즉, normal_obj의 name 프로퍼티를 참조하게 되는 것이다.
생성자 함수
이번에는 생성자 함수의 this이다.
기본적으로 자바스크립트의 생성자함수는 객체를 생성한다.
let Sample = function(name, age){
this.name = name;
this.age = age;
}
let test = new Sample("augusstt", 20);
console.log(test);
console.log(test.name);
console.log(test.age);
// Sample {name: 'augusstt', age: 20}
// augusstt
// 20일반함수나 메서드와는 다르게 동작한다.
여기서의 this는 생성자 함수가 생성할 인스턴스를 가리키게 된다.
간단한 생성자 함수의 동작과정은 아래와 같다.
- 빈 객체를 생성한 후 this와 바인딩한다.
- this를 통하여 프로퍼티가 생성된다.
- 생성된 객체를 반환한다.
그런데 만약 생성자함수를 호출할때 new 키워드를 사용하지 않으면 어떻게 될까?
let Sample = function(name, age){
this.name = name;
this.age = age;
}
let test = Sample("augusstt", 20);
console.log(test);
console.log(test.name);
console.log(test.age);
// undefined
// Uncaught TypeError : Cannot read properties of undefined (reading 'name', 'age')이전과 다르게 undefined가 출력되었고 에러가 발생하였다.
new 키워드없이 생성자 함수를 호출할 경우, 일반 함수를 호출한 것으로 간주되어 this는 생성자 함수처럼 생성할 인스턴스가 아닌 전역객체와 바인딩된다. 이후, 생성된 객체를 반환하지 않아 반환값은 undefined가 출력되는 것이고, undefined에는 name과 age프로퍼티가 없기 때문에 에러가 발생하는 것이다.
