본문 바로가기

WEB/HTML CSS JS

[JS] 코어자바스크립트 ch3. this

코어자바스크립트 ch3 this 를 읽고 대충 정리한 글
ch3 후반부에 this 바인딩 부분은 나중에 추가할 예정...

 

상황에 따라 this 가 어떤 객체를 가리키는지가 다르다.

전역공간에서 this

  • 전역 객체

method 호출 시 method 내부에서의 this

  • 해당 method를 호출한 주체

함수 호출 시 함수 내부에서의 this

  • 전역 객체
  • (함수 내부에서 this가 전역 객체를 바라보는게 자바스크립트 설계오류라고함. 변수 선언을 통해 우회하는 방법도 있긴 있음.)

콜백 함수 호출 시 그 함수 내부에서의 this

  • 콜백 함수도 함수이므로 기본적으로는 전역객체를 바라보긴 하는데,
  • 콜백 함수를 호출하는 함수가 무엇이냐에 따라 다르다.
    • 예를 들어 addEventListener 함수는 내부적으로 this 가 event target 에 연결되어 있다.

생성자 함수 내부에서의 this

  • 자바스크립트는 함수에 생성자로서의 역할을 부여했다. new 명령어와 함께 함수를 호출하면 그 함수는 생성자로서 동작한다. 그리고 어떤 함수가 생성자 함수로서 호출된 경우 내부의 this 는 곧 새로 만들 구체적인 인스턴스 자신이 된다.
  • let user = new User("Jack"); 이렇게 함수를 생성자로서 호출하면 아래의 과정이 동작한다.
function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

'WEB > HTML CSS JS' 카테고리의 다른 글

Web 공부 리소스  (6) 2021.07.10
[JS] 코어자바스크립트 ch6. 프로토타입  (0) 2021.07.04
[JS] 화살표함수  (0) 2021.07.02
[JS] 함수 선언문과 함수 표현식  (0) 2021.05.28
[JS] 얕은 복사 깊은 복사  (0) 2021.05.14