이 영역을 누르면 첫 페이지로 이동
나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

페이지 맨 위로 올라가기

나눔코딩

11. 기술면접 - 자바스크립트 - this

  • 2021.10.25 09:33
  • ∞. 기술 면접/8. 자바스크립트
공부목적으로 다른 블로그의 글을 그대로 따라치면서 작성되었습니다. 저작권 문제 시, 비공개 처리하겠습니다

실행 컨텍스트(Execution Context) 

실행컨텍스는 scope, hosting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다

ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의한다

좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 이해 필요한 환경이라고 말할 수 있다

여기서 말하는 실행 가능한 코드는 아래와 같다

- 전역 코드 : 전역 영역에 존재하는 코드
- Eval 코드 : eval 함수로 실행되는 코드
- 함수 코드 : 함수 내에 존재하는 코드

일반적으로 실행 가능한 코드는 전역 코드와 함수 내 코드이다

자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고 있어야 한다.

실행에 필요한 여러가지 정보란 아래와 같은 것들이 있다

- 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티(속성)
- 함수 선언
- 변수의 유효범위(Scope)
- this

이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의
형태로 관리한다

 

실행 컨텍스트의 3가지 객체

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이지만 물리적으로는 객체의 형태를
가지며 아래의 3가지 프로퍼티를 소유한다

https://poiemaweb.com/js-execution-context

 

Variable Object (VO / 변수객체)

실행 컨텍스트가 생성되면 자바스크립트 엔진은 실행에 필요한 여러 정보들을 담을 객체를 생성한다
이를 VO 라고 한다. VO 는 코드가 실행 될 때, 엔진에 의해 참조되며 코드에서 접근할 수 없다

VO 는 아래의 정보를 담는 객체이다
- 변수
- 매개변수(parameter)와 인수 정보(arguments)
- 함수 선언(함수 표현식은 제외)

function statement() {} // O
var expression = function() {} // X

VO는 실행 컨텍스트의 프로퍼티이기 때문에 값을 갖는 데 이 값은 다른 객체를 가리킨다

 

나머지 2개는 참고에서 직접 참고바랍니다

 

 this 

this 는 현재 실행컨텍스트의 위치에 따라 다르게 출력됩니다

this; // window

ㄴ 실행 컨텍스트가 가장 위에서 실행했기 때문


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

a(); // window

ㄴ 가장위에서 함수를 호출 때, 역시 window 이다


var obj = {
  a: function() {
    console.log(this);
  }
}

obj.a(); // obj

객체 속성에 함수가 있는 것을 메소드라고 부르는 데, 이런 메소드의 경우에는 호출 할 때, this 를 내부적으로 바꿔주어
호출하면 객체가 리턴됩니다


var obj = {
  a: function() {
    console.log(this);
  }
}

var a2 = obj.a;

a2() // window

obj.a 는 메소를 바로 호출한 게 아닌, 메소드를 가져온거기 때문에 a2는 obj 객체의 메소드가 아닌 함수가 된다

아래에 코드와 동일하다고 보면 된다

var a2 = function() {
  console.log(this);
}

a2() // window

var a = {
    post: function() {
        console.log(this);
    },
    get: () => {
        console.log(this);
    }
}

a.post() // a
a.get() // window

람다의 경우에는 예외적으로 해당 객체가 아닌 상위 실행 컨텍스트 객체를 반환한다

 

생성자 함수의 this
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function() {
  console.log(this.name, this.age);
}

Person('test', 25);
console.log(window.name, window.age); // test 25

var hero = new Person('Hero', 33); // Person {name: "Hero", age: 33}
hero.sayHi(); // Hero 33

 

참고

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

 

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

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

www.zerocho.com

 

https://poiemaweb.com/js-execution-context

 

Execution Context | PoiemaWeb

Execution Context(실행 컨텍스트)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버

poiemaweb.com

 

 

저작자표시 (새창열림)

'∞. 기술 면접 > 8. 자바스크립트' 카테고리의 다른 글

10. 기술면접 - 자바스크립트 - 클로저 (Closure)  (0) 2021.10.22
09. 기술면접 - 자바스크립트 - 호이스팅 (Hoisting)  (0) 2021.10.22
08. 기술면접 - 자바스크립트 - 전개 구문 (Spread Operator)  (0) 2021.10.22
07. 기술면접 - 자바스크립트 - 구조 분해 할당 (Destructuring)  (0) 2021.10.22
02. 기술면접 - 자바스크립트 - 함수 선언식과 함수 표현식  (0) 2021.10.22

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • 10. 기술면접 - 자바스크립트 - 클로저 (Closure)

    10. 기술면접 - 자바스크립트 - 클로저 (Closure)

    2021.10.22
  • 09. 기술면접 - 자바스크립트 - 호이스팅 (Hoisting)

    09. 기술면접 - 자바스크립트 - 호이스팅 (Hoisting)

    2021.10.22
  • 08. 기술면접 - 자바스크립트 - 전개 구문 (Spread Operator)

    08. 기술면접 - 자바스크립트 - 전개 구문 (Spread Operator)

    2021.10.22
  • 07. 기술면접 - 자바스크립트 - 구조 분해 할당 (Destructuring)

    07. 기술면접 - 자바스크립트 - 구조 분해 할당 (Destructuring)

    2021.10.22
다른 글 더 둘러보기

정보

나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

  • 나눔코딩의 첫 페이지로 이동

검색

메뉴

  • 홈
  • 태그
  • 방명록

카테고리

  • 분류 전체보기 (316)
    • ∞. 읽은 거리 (3)
    • ∞. 기술 면접 (61)
      • 1. 자료구조 (0)
      • 2. 네트워크 (9)
      • 3. 운영체제 (11)
      • 4. 데이터베이스 (13)
      • 5. 디자인 패턴 (0)
      • 6. 알고리즘 (0)
      • 7. 자바 (15)
      • 8. 자바스크립트 (7)
      • 9. 스프링 (5)
      • 10. 시큐리티 (1)
      • 11. 기타 (0)
      • 12. Vue (0)
    • ∞. 웹개발 유용한 사이트 (14)
    • ∞. 트러블 슈팅 + TIL (7)
    • 00. 출발 (9)
    • 01. 엑셀 (9)
      • 기초 (4)
      • 컴활 1급 (4)
      • VBA (0)
    • 02. 엑세스 (9)
      • 기초 (5)
      • 컴활 1급 (4)
    • 04. Oracle (1)
      • 기초 (1)
    • 03. JAVA (8)
      • 기초 (7)
      • 객체지향 프로그래밍 (0)
    • 05. HTML (13)
      • 기초 (1)
      • css (10)
      • sass (0)
      • less (0)
    • 06. Javascript (16)
      • 기초 (13)
      • ES6 모듈 (2)
      • Canvas (0)
    • 07. JSP (0)
      • 기초 (0)
    • 08. jQuery (0)
      • 기초 (0)
    • 09. BootStrap (1)
      • 기초 (0)
      • v4 - Layout (1)
    • 10. Spring (30)
      • 기초 (3)
      • 실험 (4)
      • MVC (1)
      • BOOT (6)
      • Security (10)
      • Lib (Library) (2)
      • 벤치마킹 (0)
      • JUnit5 (2)
      • DevTools (0)
      • Socket (1)
      • Batch (0)
      • Mobile (0)
      • WebFlux (0)
      • Cloud (0)
      • Thymleaf (0)
      • Actuator (0)
      • 성능 테스트 (1)
    • 11. JetBrains (34)
      • 기초 (1)
      • IntelliJ IDEA (33)
      • WebStorm (0)
      • Pycham (0)
    • 12. API (0)
      • 기초 (0)
      • 네이버 API (0)
      • 카카오 API (0)
      • 구글 API (0)
      • 인스타그램 API (0)
    • 13. AutoHotkey (1)
    • 14. Python (8)
      • 기초 (3)
      • Selenium (2)
      • Beautiful Soup (0)
      • openpyxl (1)
      • Pyqt5 (0)
      • Deep learning (open CV) (0)
      • Geocoder (0)
      • Anaconda (0)
      • DeepLearning (0)
      • Jupyter Nootbook (0)
    • 14.5. R (0)
    • 15. JMeter (0)
      • 다운로드 (0)
    • 16. Vue JS (23)
      • 기초 (3)
      • Vue 2 (15)
      • Vue 3 (5)
      • Vuetify 2.5.8 (0)
    • 17. Git (12)
      • 기초 (8)
      • ItelliJ IDEA (4)
      • SourceTree (0)
    • 18. AWS (5)
      • 기초 (2)
      • Jira (3)
    • 19. Naver Cloud Platform (0)
    • 20. Google Cloud Platform (0)
      • 기초 (0)
      • stt & tts (0)
    • 21. Kotlin (0)
    • 22. Android (0)
      • 기초 (0)
      • Java (0)
      • Kotlin (0)
      • Flutter FrameWork (0)
    • 23. Clean Code [JAVA] (1)
    • 24. BuildTool (1)
      • Maven (1)
      • Gradle (0)
    • 25. 자료 구조와 알고리즘 (18)
      • JAVA (1)
      • Java Script (1)
      • 프로그래머스 (0)
      • 백준 알고리즘 (0)
      • 나의 알고리즘 (14)
      • Brilliant 공부 (0)
    • 26. React (1)
      • 기초 (0)
      • 강의 정리 (1)
    • 27. PostMan (0)
      • 기초 (0)
    • 28. 프로그래머스 (9)
    • 29. Leet Code (0)
    • 30. MySQL (3)
      • 기초 (2)
      • 문제 (1)
    • 73. GraphQL (0)
    • 74. Nuxt JS (0)
    • 75. Electron (0)
    • 76. UX & UI Design Tool (0)
      • 기초 (0)
      • Axure (0)
      • Sketch (0)
      • Figma (0)
    • 77. MarkDown (1)
      • 기초 (1)
    • 78. Tomcat (1)
      • 메모 (1)
    • 79. Element JS (0)
    • 80. Parallax JS (0)
      • 기초 (0)
    • 81. Player JS (0)
      • 기초 (0)
    • 82. Smart Maker (0)
    • 83. Vim (0)
      • 기초 (0)
    • 84. Linux (0)
      • 기초 (0)
      • Centos 7 (0)
      • Ubuntu (0)
    • 85. Node JS (2)
      • 기초 (1)
      • WebRTC (0)
      • NVM (1)
    • 86. Propeller JS (0)
    • 87. FullPage JS (0)
      • 기초 (0)
    • 88. 아두이노 (0)
    • 89. Tensorflow (0)
    • 90. 웹 패킷 분석 (0)
    • 91. 크롬 개발자도구 (0)
    • 92. 디자인 패턴 (7)
      • 생성(Creational) (3)
      • 구조(Structral) (1)
      • 행위(Behavioral) (2)
      • SOLID 패턴 (0)
    • 95. Linux Shell Script (0)
    • 96. 구글 애널리스틱 (0)
    • 97. ffmpeg (0)
    • 98. ShareX (1)
    • 자료실 (0)
    • 기타 (2)

최근 글

인기 글

댓글

공지사항

아카이브

태그

  • 엑셀 표시형식
  • 엑셀 분석작업
  • 깁
  • 엑셀 기타작업
  • 엑셀 가운데맞춤
  • 엑셀 글씨
  • 엑셀 기본작업
  • 졵

나의 외부 링크

  • 비전공자 개발자
  • 자바 디자인 패턴
  • 자바 디자인 패턴
  • 스프링 블로그
  • 해킹보안 & 웹 관련
  • ERD 생성
  • 전문 기술 블로그
  • Servlet에 대한 개념없이 스프링을 했네요?
  • 스프링 FitlerChainList
  • 알고리즘 파워 블로그

정보

THE HEYDAZE의 나눔코딩

나눔코딩

THE HEYDAZE

블로그 구독하기

  • 구독하기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © THE HEYDAZE. Designed by Fraccino.

티스토리툴바