자바스크립트의 'this' 키워드 이해하기

 
자바와 C++ 등을 주로 이용하던  개발자에게 자바스크립트의 this는 마치 '미지의 똥' 같은 느낌입니다. 습관대로 쓰다보면 어느새 질퍽하게 밟아버리곤 하죠. 결국 다시 한번 제대로 이해하기로 하고 웹을 너울거리다가 마침 좋은 자료를 발견하여 주요 액기스를 간추려 올려봅니다.

원본: Understanding the “this” keyword in JavaScript

우선 몇 가지 먼저 기억해 둘 사항들입니다:
  1. 자바스크립트에서 코드는 다음 세 가지 영역에서 수행됩니다: 
    • global 영역 
    • function 영역 
    • eval 영역
  2. this 키워드는 다음 두 가지 조건에 의해 값이 결정됩니다. 
    • 어떤 영역에서 수행되었는가 
    • 호출자가 누구인가 
  3. global 객체에 대해 이해해야 합니다: 
    • 자바스크립트가 구동 될 때에는 언제나 global 객체가 존재합니다. 브라우저에서는 window 객체가 그 역할을 하고 있고, node.js에서는 그냥 global object로 불리는 놈이 하나 있습니다.

자, 이제 this 키워드를 파악하기 위한 4가지 규칙을 살펴봅니다:
 
  1. 기본적으로 this는 global 객체이다.
    다음 3가지 케이스가 아닌 경우 언제나 global 객체를 가리킵니다.
  2. function 영역에서의 this는 부모 객체이다. 단, 그 부모의 자식으로서 불렸을 때에만. 
    • 이해가 쉬운 예제: increment 메소드 안의 this는 그 부모 객체인 counter를 가리키죠.
      var counter = {
        val: 0,
        increment: function () {
          this.val += 1;
        }
      };
      counter.increment();
      console.log(counter.val); // 1
      counter['increment']();
      console.log(counter.val); // 2
      
      
    • 아리까리한 예제: 하지만, 이 메소드를 counter의 자식으로서가 아니라 직접 호출하면 어떻게 될까요? this는 더 이상 counter가 아니라 global 객체가 됩니다. 
      var inc = counter.increment;
      inc();
      console.log(counter.val); // 2
      console.log(val); // NaN
      
      
  3. new 연산자로 생성된 function 영역의 this는 새로 생성된 객체 그 자신이다. 
    • 이해가 쉬운 예제: 여타의 언어와 비슷한 패턴이라 어렵지 않죠? 
      function F (v) {
        this.val = v;
      }
      var f = new F(“Woohoo!”);
      console.log(f.val); // Woohoo!
      console.log(val); // ReferenceError
      
      
    • 아리까리한 예제: new로 생성하지 않으면 그냥 보통의 함수를 호출하는 것과 다르지 않습니다. 따라서, this는 global 영역입니다. 
      var f = F(“Oops!”);
      console.log(f.val); // undefined
      console.log(val); // Oops!
      
      
  4. call 혹은 apply로 호출 된 함수의 경우 call, apply의 첫번째 인자로 명시 된 객체이다. 
    • 예제:
      var add = function (x, y) {
            this.val = x + y;
          },
          obj = {
            val: 0
          };
      add.apply(obj, [2, 8]);
      console.log(obj.val); // 10
      add.call(obj, 2, 8);
      console.log(obj.val); // 10
      



그 외에, eval 내에서 명시한 this는 조금 머리아픈 구석이 있습니다. 얼마나 최신의 ECMAScript 규약을 따르냐에 따라 브라우저끼리도 서로 다른 동작을 취하기 때문에 이 부분에 대해서는 상세한 참고 자료를 살펴 보실 것을 권장합니다. 원 사이트에서는 “Global eval. What are the options?”라는 문서가 도움이 될거라고 하네요.

제게는 위 문서가 명쾌하게 다가왔는데 여러분은 어떠실지 모르겠습니다.
혹시 제가 잘못 이해하고 있는 부분이 있다면 알려주시기 바랍니다.

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

[출처] http://resoneit.blogspot.kr/2014/01/this.html

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
20 [nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함 file 졸리운_곰 2025.12.12 501
19 [node.js 개발] Apache Reverse Proxy 설정(아파치와 노드 연동) file 졸리운_곰 2024.03.17 300
18 [node.js 개발] PM2로 Node.js 앱 프로세스 배포하기 file 졸리운_곰 2024.03.16 405
17 [node.js 개발] PM2를 활용한 Node.js 무중단 서비스하기 file 졸리운_곰 2024.03.16 517
16 [node.js 응용] Next.js : Next.js14에 Mysql연결하기 졸리운_곰 2024.03.03 379
15 [node.js 응용] Node.js에서 다른 파일의 함수를 "include" 하는 방법 졸리운_곰 2024.02.28 429
14 [node.js 응용] NodeJS 에서 mqtt 사용하기 file 졸리운_곰 2024.02.23 399
13 [node.js 응용] Next.js 기본 개념정리 file 졸리운_곰 2024.02.23 432
12 [node.js 응용] ejs 사용설명서 file 졸리운_곰 2023.11.25 372
11 [node.js 응용] Build a Node.js Proxy Server in Under 10 minutes! file 졸리운_곰 2023.05.07 468
10 [node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기 file 졸리운_곰 2023.04.25 408
9 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 2/2 졸리운_곰 2023.03.31 231
8 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 1/2 file 졸리운_곰 2023.03.31 484
7 [node.js 응용] PM2 - Node.js 프로세스 관리 도구 file 졸리운_곰 2021.12.10 410
6 [node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기 file 졸리운_곰 2021.10.11 485
5 [node.js][typescript] 5분 안에 보는 TypeScript file 졸리운_곰 2021.07.03 428
4 Getting started with RabbitMQ and Node.js file 졸리운_곰 2019.05.09 466
3 [Node.js + RabbitMQ] Node.js + socket.io + RabbitMQ 이용한 실시간 메시지 처리 file 졸리운_곰 2019.05.09 352
2 node.js 서버 장애시 자동 재시작 설정 [forever 사용] 졸리운_곰 2019.01.24 884
1 Express 앱용 프로세스 관리자 졸리운_곰 2018.10.16 604
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED