Programming/Javascript

자바스크립트의 this

Bam_t 2021. 11. 12. 21:11
728x90

예전에 this를 간단히만 다뤘습니다. 그때는 포스트 성격상 this가 클래스, 프로토타입 개념부터 이용되기 때문에 간단하게 소개했었습니다. 하지만 자바스크립트의 다른언어의 this와 달리 특이하게 사용되고 있으며 자바스크립트의 굉장히 독특한 문법중 하나입니다. 그래서 다시 한 번 this를 알아보려고 합니다.

내용이 별거 없어보이지만 처음 접한다면 보이는 것보다 어렵고 복잡한 키워드이기 때문에 급하신 분들은 주먹구구식으로 하이라이팅된 부분만을 외우시면 됩니다. 물론 코딩에서 외우는 것은 당연히 비추천이기에 나중에 이해가 반드시 수반되어야합니다.

1. this의 단독 사용

우선 this를 따로 혼자서 호출한 경우입니다. 아무것도 없는 상태에서 this만을 호출하면 window를 가리킵니다. 

const x = this;

console.log(x);	//window

이 결과로 알 수 있는 것은 this를 단독으로 쓰게 되는 경우에 'this는 글로벌 객체를 가리킨다'입니다. strict(엄격 모드)모드라면 window가 아닌 undefined를 나타내게 됩니다.

 

 

2. 함수 내부의 this

두번째 케이스는 함수 내부에서 this를 호출할 경우입니다. 이때 함수 내부에서 따로 this 값을 호출로 설정하지 않았으므로 window를 가리키게 됩니다.

const func = () => {
  return this;	//window
};

이번에도 역시 함수 내부에서 this만을 사용하면 마찬가지로 글로벌 객체를 가리키게 된다라는 것을 알 수 있었습니다. 또한 strict 모드에서는 undefined를 가리킵니다.

만약 함수 내부에서 this를 쓰는데 이 this가 글로벌 객체를 가리키는 것을 방지하고 싶다면, 애로우 함수를 이용해서 함수를 선언하면 해결이됩니다. 애로우 함수는 전역으로 실행되더라도, 해당 애로우 함수 바로 바깥의 함수나 클래스의 this를 이용할 수 있게 해줍니다.

 

 

3. 객체 메소드 내부의 this

여태까지 본 두 경우는 모두 window를 가리키는걸로보아 this는 기본적으로 글로벌 객체를 가리킵니다. 그렇다면 우리는 글로벌 객체가 아닌 경우들만 모아서 알아본다면 더욱 외워두기, 알아두기 쉽겠죠?

this가 글로벌 객체외에 다른 것을 가리키는 첫 번째 경우입니다. 객체 메소드 내부에서 this입니다.

const obj = {
  x: 100,
  printX: function() {
    return this.x;
  },
};

obj.printX(); //100

메소드 내부의 this는 해당 메소드를 호출한 객체를 가리킨다는 것을 알 수 있습니다.

 

추가적으로 객체 내부에 동일한 이름의 속성을 추가하고 같은 함수를 넣으면 this는 가장 최근의 객체를 호출합니다. 즉, this가 obj.innerObj의 메소드 printX()를 호출했고, this는 이 메소드가 호출된 객체를 가리키고 있음을 알 수 있습니다.

obj.innerObj = {
  x: 404,
  printX: function() {
    return this.x;
  }
};

obj.innerObj.printX();

 

 

 

4. 생성자 내부의 this

this를 생성자 내부에서 쓰는 경우입니다. 이 경우가 제일 먼저, 많이 접하는 this이기도 하겠네요. 아래서 소개하는 예제는 프로토타입 객체 형식입니다.

function Student(name, id) {
  this.name = name;
  this.id = id;
}

let student01 = new Student('무지', 101);

console.log(student01.name);	//'무지'
console.log(student01.id);	//101

 

이렇게 생성자 내의 this는 생성한 인스턴스 객체를 가리킵니다.

그런데 생성자 함수도 엄연히 함수의 일종입니다. 그래서 new를 통해 객체 호출을 하지 않으면 이때 this는 window를 가리키게 됩니다.

마찬가지로 ES6이후 추가된 class 명령을 통해 클래스 선언을 한다면 new키워드를 빼먹는 것을 방지합니다. 또한 constructor 생성자 함수 내에서 this도 new를 붙였을 때 처럼 생성된 인스턴스 객체를 가리키게 됩니다.

 

 

5. 이벤트 리스너의 this

this를 이벤트 헨들러에서 사용할 경우, 이벤트의 대상이 되는 DOM 요소를 가리키게 됩니다.

document.body.addEventListdocument.body.addEventListener('click', function () {
  console.log(this);	//<body>
});

 

 

6. bind() / call() / apply() 메소드를 통한 this의 명시적 바인딩

this를 명시적 바인딩 한다는 것은 간단히 this가 가리키는 것을 지정해준다는 것입니다.

let sayYaho = {z: '야호'};

function whatIsThis() {
  console.log(this);
};

whatIsThis();	//window
whatIsThis.bind(sayYaho).call();	//sayYaho 객체
whatIsThis.call(sayYaho);	//sayYaho 객체
whatIsThis.apply(sayYaho);	//sayYaho 객체

이렇게 명시적으로 bind(), call(), apply()로 this를 바인딩하면 this가 인수로 전달된 객체를 가리킨다는 것을 알 수 있습니다.

참조

https://bamtory29.tistory.com/entry/Javascript-this?category=924733 

 

[Javascript] this

클래스 생성자 이야기하다가 등장한 this 키워드. 이 키워드는 사용위치에 따라 참조되는 공간이 다르다고 언급했습니다. 그래서 this키워드에 대해 조금 더 알아보고 넘어갈까합니다. this가 사용

bamtory29.tistory.com

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

 

this - JavaScript | MDN

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.

developer.mozilla.org

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

 

(JavaScript) 자바스크립트의 this는 무엇인가?

안녕하세요. 이번 시간에는 자바스크립트 this에 대해 알아보겠습니다. 사실 이미 실행 컨텍스트 강좌 에 다 설명해둔 것이긴 한데요. 그 강좌는 실행 컨텍스트(전체적인 흐름)에 더 집중해서 쓰

www.zerocho.com

https://nykim.work/71

 

[JS] 자바스크립트에서의 this

this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 th

nykim.work

728x90