JavaScript

this / 실행 컨텍스트

Hun-bot 2022. 6. 9. 00:48
728x90
반응형

this

  • this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다.
  • this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
  • this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.
  • this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.
  • 전역에서 this는 -> window(전역 객체)를 가리킨다.
  • 일반 함수 내부에서 this는 -> window를 가리킨다.
  • 메서드 내부에서 thos는 메서드를 호출한 객체를 가리킨다.
메서드 내부에서의 this
==> {name: "Lee", getName: f}
const person = {
  name: 'Lee',
  getName() {
    console.log(this);  
    return this.name;
  }
};

생성자 함수 내부에서의 this
==> Person {name: "Lee"}
function Person(name) {
  this.name = name;
  console.log(this); 
}

Person.prototype.getName=function(){
	return this.name
}

const me =new Person('steve')

me.getName() //steve

Person.prototype.name='Not Steve'

Person.prototype.getName() // Not Steve

 

함수 호출 방식

#일반 함수 호출

기본적으로 this에는 전역 객체가 바인딩 된다.

#메서드 호출

메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한

객체가 바인딩된다. (위에 예시 참조<메서드 호출한 객체에 바인딩>) 

#생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다.

new연산자와 함께 생성자 함수를 호출하지 않으면 일반 함수로 동작한다.

 

#Function.prototype.apply/call/bind 메서드에 의한 간접 호출

apply,call,bind메서드는 Function.prototype의 메서드다. 즉, 이들 메서드는 모든 함수가 상속받아 사용할 수 있다.

func.apply(thisArg, [argsArray])

thisArg
옵션. func 를 호출하는데 제공될 this 의 값

argsArray
옵션. func 이 호출되어야 하는 인수를 지정하는 유사 배열 객체, 함수에 제공된 인수가 없을 경우 null 또는 undefined
function getBinding(){
	return this;
}


const thisArg={a:1},

log(getBinding()) // window

getBinding.apply(thisArg) // {a:1}
getBinding.call(thisArg) // {a:1}

배열 붙이기에 apply가 사용된다.

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

apply와 call 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우다.

bind는 새로운 바인딩한 함수를 만든다. 아래 예제에서는 person객체의 this값을 binding 해줘서 아래 일반 함수로 선언 할때도 사용가능하게 했다.

const Person={
	name='Lee',
    foo(callback){
    setTimeout(callback.bind(this),100)
    }
}

person.foo(function() { 
	console.log(`hi ${this.name}`) //hi Lee

 

실행 컨텍스트

실행 컨텍스트(execution context) - 자바스크립트 동작 원리를 담고 있는 핵심 개념이다.

스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유,클로저의 동작 방식

그리고 태스크 큐(Task queue)와 함께 동작하는 Event Handler와 비동기 처리의 동작방식을 이해할 수 있다.

 

 

소스코드의 타입

소스코드의 타입 설명
전역코드 전역에 존재하는 소스코드 -> 
전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 함
전역에 정의된 함수,클래스등 내부 코드는 포함 X
var로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하여 연결한다. 이를 위해 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.
함수코드 함수 내부에 존재하는 소스코드
함수 내부에 중첩된 함수,클래스등 내부코드는 포함 X
지역 스코프를 생성 -> 지역 변수,매개변수,arguments 객체 관리
함수 코드 평가 시 함수 실행 컨텍스트가 생성된다.
eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행하는 소스코드
strict mode에서 자신만의 독자적인 스코프를 생성한다.
eval 코드 평가 시 eval 실행 컨텍스트가 생성된다.
모듈 코드 모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등 내부 코드는 포함 X
모듈별로 독립적인 모듈 스코프가 생성된다.
모듈 코드 평가 시 모듈 실행 컨텍스트가 생성된다.

소스코드의 평가와 실행

자바스크립트 엔진은 "소스코드의 평가" / "소스코드의 실행" 과정으로 나누어 처리한다.

 

#소스코드의 평가

  • 실행 컨텍스트 생성
  • 변수,함수등의 선언문 실행
  • 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.

#소스코드 실행

  • 선언문을 제외한 소스코드가 순차적으로 실행된다.(Runtime)
  • 실행에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득
  • 변수 값의 변경등 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록
간단한 예시
var x;
x=1;

소스코드 평가
▷ var x 실행 -> 식별자 x를 실행 컨텍스트가 관리하는 스코프에 등록 undefined로 초기화

소스코드 실행
▷ var x 실행 완료 -> x =1 실행 -> x의 변수에 값을 할당 하기 위해 먼저 x변수가 선언되었는지 확인
-> 등록 O -> 값을 할당하고 할당 결과를 실행 컨텍스트에 등록하여 관리

실행컨텍스트의 역할

전역 변수 선언
const x=1;
const y=2;


함수 정의
function foo(z){
    const x=10;
    const y=20;
    
    메서드 호출
    console.log(z+x+y) //60
}

함수 호출
foo(30)

메서드 호출
console.log(x+y) //3
  • 전역 코드 평가
    - 전역 코드 평가 과정 -> 선언문만 먼저 실행 -> 생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록
    var 키워드로 선언시 (전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 됨)
  • 전역 코드 실행
    -평가 과정이 끝나면 런타임이 시작되어 코드가 순차적으로 실행
    -전역 변수에 값이 할당(x=1, y=2)되고 함수가 호출
    -함수가 호출되면 전역코드의 실행을 중단하고 코드 실행 순서를 변경하여 함수 내부로 진입 foo(30)
  • 함수 코드 평가
    -함수 내부로 진입하면 내부의 '문'들을 실행하기 전에 함수 코드 평가 과정을 거치며 준비한다.
    -매개변수(z)와 지역 변수 선언문(const ~)이 먼저 실행되고 실행 컨텍스트가 관리하는 지역스코프에 등록
    -arguments객체가 생성되어 지역 스코프에 등록, this 바인딩 결정
  • 함수 코드 실행
    -평가 과정이 끝나면 런타임이 시작되어 코드가 순차적으로 실행
    -매개변수와 지역 변수에 값이 할당(x=10,y=20) 되고 log에서 메서드가 호출된다.
    -console 식별자는 스코프 체인을 통해 검색한다.

※실행 컨텍스트가 필요한 이유

-선언에 의해 생성된 모든 식별자를 스코프를 구분하여 등록하고 상태 변화를 지속적으로 관리할 수 있어야 한다.

-스코프는 중첩 관계에 의해 스코프 체인을 형성해야 한다. 스코프 체인을 통해 상위 스코프로 이동해 검색할 수 있어야 함.

-현재 실행 중인 코드의 실행 순서를 변경할 수 있어야 한다. 다시 되돌아 가는것도 가능해야 한다.

자바스크립트의 핵심 동작 원리 구성

실행 컨텍스트 스택

const x=1;

function foo(){
	const y=2;
    
    function bar(){
	const z=3;
    console.log(x+y+z);
    }
    bar();
}

foo()

 

실행 컨텍스트 스택

1.전역 코드의 평가와 실행

-전역 코드를 평가하여 전역 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸쉬

-이때 x,foo()는 전역 실행 컨텍스트에 등록

-이후 전역 코드가 실행 -> 전역 변수 x에 값이 할당 , 전역 함수 foo 호출

 

2. foo 함수 코드의 평가와 실행

- foo 함수가 호출되며 전역 코드 실행 중단 -> 제어권이 foo 함수 내부로 이동

- foo 함수 내부의 함수 코드 평가 -> foo 함수 실행 컨텍스트 생성 -> 스택에 푸쉬

- 지역변수 y와 중첩함수 bar가 foo함수 실행 컨텍스트에 등록

- 이후 foo함수 실행 -> y값 할당 ,bar()

 

3. bar 함수 코드의 평가와 실행

- foo 함수 중단 -> bar 함수 내부 (제어권)

- 동일한 진행

- bar 함수의 지역변수 z가 bar 실행 컨텍스트에 등록

- bar 함수 실행 -> z값 할당 -> log() 후 bar함수 종료

 

4. foo 함수코드로 복귀

- bar -> (제어권) foo

- bar함수 실행 컨텍스트를 스택에서 pop

- foo() 종료

 

5. 전역 코드로 복귀

- foo() 종료 -> (제어권) 전역 코드

- 더이상 실행할 전역코드 X -> 스택에서 pop

<Runnung execution context : 실행 컨텍스트 최상위에 있는 실행 컨텍스트>

 

실행 컨텍스트의 렉시컬 환경

렉시컬 환경(Lexical Environment)은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는

자료구조로 실행 컨텍스트를 구성하는 컴포넌트다.

#렉시컬 환경 : 스코프와 식별자 관리 

const x=1;

function foo(){
 const y=2;
 onsole.log(x+y);
}

위 코드의 렉시컬 환경과 스코프 체인은 아래와 같이 표현된다

렉시컬 환경은 스코프와 식별자를 관리한다(저장소 역할) -> 키와 값을 갖는 객체 형태에 스코프(전역,함수,블록)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다.

 

실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다.

실행 초기에 두개의 컴포넌트에서 하나의 렉시컬 환경이 나오는데 이후 상황에 따라 추가 될 수있고, 컴포넌트끼리 내용이 달라지는 경우도 있다

렉시컬 환경 구성

1. 환경레코드
- 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소다.

 

2. 외부 렉시컬 환경에 대한참조

의미 => 상위 스코프를 가리키고 이때 상위 스코프는 외부 렉시컬 환경 (상위 코드의 렉시컬 환경) 스코프 체인 -> (단방향)

var x=1;
const y=2;

function foo(a){
 var x=3;
 const y=4;
 
 function bar(b){
  const z=5;
  console.log(a+b+x+y+z);
  }
bar(10)
}
foo(20); //42

이 코드를 예시로 들어보겠다

[최종본]

1. 전역 실행 컨텍스트 생성

먼저 비어있는 스택에 전역 실행 컨텍스트를 생성해서 push 한다

 

2.전역 렉시컬 환경 생성

전역 실행 컨텍스트에 Global Lexical Environment를 생성후 바인딩 해준다

2- 1 전역 환경 레코드 구성 , 객체 환경 레코드 구성 (Binding Obejct)

Binging Object는 '전역 객체' -> 전역 코드 평가 과정중 var로 선언한 전역변수와 함수 선언문으로 정의된 전역 함수 foo는 window에 바인딩 된다 var의 변수 x는 암묵적으로 undefined가 바인딩 된다

3. 위에 그림을 보면 const 인 y는 Declarative Environment Record에 따로 저장된걸 확인 할 수 있고 (let도 마찬가지)

선언적 환경 레코드에 들어가 있는 것이다

-> 이 2개의 키워드는 전역 객체의 프로퍼티로 참조할 수 없어서 "일시적 사각지대"에 빠지게 된다.

 

4.this 바인딩

전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩 된다.

내부 슬롯에 바인딩 되어 있는 객체 반환

 

5.외부 렉시컬 환경에 대한 참조 결정

 

6. 전역 코드 실행

var x=1; (할당) const y=2; (할당) 그리고 foo 함수 호출

변수 할당문 또는 함수 호출문을 실행하려면 먼저 이름이 선언된 식별자인지 확인해야하고 어디 어느 스코프에 있는 식별자인지 확인하고 결정해야한다. 이를 "식별자 결정" 이라고 한다.

 

7.foo() 코드 평가 , 실행

제어권이 foo() 내부로 이동하므로 함수 코드를 평가하기 시작한다.

순서는 다음과 같고 한번 읽어보길 바란다 -> 아래 과정이 위에 그림처럼 머리속으로 그려지면 넘어가면 된다.

  1. 함수 실행 컨텍스트 생성
  2. 함수 렉시컬 환경 생성
    2-1.함수 환경 레코드 생성
    2-2 this 바인딩
    2-3 외부 렉시컬 환경에 대한 참조 결정

*함수를 어디에 정의했는지에 따라서 상위 스코프 결정 

나머지 할당되는 과정은 같으므로 생략하겠다 (식별자 결정)

8.bar()코드 평가 , 실행

9.bar() 종료 , foo() 종료

10. 전역 코드 실행 종료

 

위 과정을 잘 익혀먹어야 클로저를 무사히 넘길 수 있으니 꼼꼼히 보자

 

[출처]

https://hong-p.github.io/javascript/javascript-deepdive-ch23/

728x90
반응형
저작자표시 (새창열림)