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

공부목적으로 다른 블로그의 글을 그대로 따라치면서 작성되었습니다. 저작권 문제 시, 비공개 처리하겠습니다

실행 컨텍스트(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는 무엇인가?

 

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

Execution Context | PoiemaWeb