실행 컨텍스트 /콜 스택(call stack)/ this / call메서드 /apply메서드

실행 컨텍스트

• 실행 컨텍스트
  실행할 코드에 제공할 환경정보 들을 모아놓은 객체
• 자바스크립트가 실행 컨텍스트가 활성화 되는 시점에 하는일

• 선언된 변수를 위로 끌어올림(호이스팅)
• 외부 환경 정보를 구성
• this값을 설정함

• 그 객체안에 존재하는 3가지

• VariableEnvironment > VE

1. 현재 컨텍스트 내의 식별자 정보(record)를 갖고 있다.

식별자정보:let a =3 의 경우 let a 까지가 식별자 정보

2.외부 환경 정보(outer)를 갖고 있다.
3.선언 시점 LE의 snapshot

• LexicalEnvironment >LE

1.VE 와 동일하지만, 변경사항을 실시간으로 반영한다.
2.최초 실행시 VE === LE 완전히 같다.
하지만 시간이 지날수록 LE :업데이트한다.
3.실행 컨텍스트르 생성할때 VE에 정보를 먼저 담은 다음, 이를 복사하여 LE를 만들고 이후에는 주로 LE를 활용한다

• ThisBindings

1.this 가 function 안에서 어떤 기능을 할지를 결정해 주는 역할
2.실행 컨텍스트 안에 있다.

 

• 요약

• VE : 스냅샷 유지
• LE : 스냅샷 유지하지 않음 , 실시간으로 변경사항을 계속해서 반영

---

 

콜 스택 call stack

• stack 과 queue

• stack
  Last In , First Out > LIFO :마지막에 들어간게 처음으로 나옴 === 막다른길
• queue
  First In ,First Out > FIFO : 처음으로 들어간게 처음으로 나옴 === 빨대

• call stack

stack의 방식을 따르는 호출방식 이라볼 수 있다.

1.함수 호출이 일어날때마다 그 함수의 실행 정보를 쌓아두는 "스택" 이다. 이걸 push 라고한다.

2.함수가 실행을 마치고 반환되면 해당 함수의 실행 정보가 콜 스택에서 제거된다 이걸 pop 이라고한다.

3.너무 많은 함수가 호출되어 콜 스택의 크기를 초과하게 되면 메모리 부족으로 "스택 오버플로우" 오류가 발생할 수 있다.

 

• call stack 의 실행순서 예시

콜스택 === 요리

1.물을 끓여야 함.

2.물이 끓을 동안 야채를 다져야함

3.야채가 다져지면 프라이팬에 볶아야함

이 각 단계를 함수 라고 생각해볼 수 있다.
1단계: 물을 끓이기 위해, 콜 스택에 "물을 끓여야 한다"는 작업이 추가됨
2단계: 물이 끓는 동안, 야채를 다지기 위해 콜 스택에 "야채를 다져야 한다"는 작업이 추가됨
3단계: 야채를 다진 후, "프라이팬에 볶아야 한다"는 작업이 콜 스택에 추가됨

이제 요리가 끝나면, 마지막으로 한 일부터 차례로 콜 스택에서 지우기 시작함
1. "프라이팬에 볶기" 작업을 완료하면 콜 스택에서 이 작업이 지워진다.
2. 그 다음 "야채 다지기" 작업이 끝났으니 이 작업도 콜 스택에서 지워진다.
3. 마지막으로 물을 끓였던 작업도 끝났으니 콜 스택에서 지워짐.

 

---

this

 

• this

1.실행 컨텍스트가 생성될때 결정된다.
이 말은 this를 bind한다 =>this를 묶는다 라고 볼수있다.
2.함수를 호출할때 결정된다.

 

• 전역환경

• 전역환경 = 런타임 = 코드가 돌아가는 환경

• 환경2가지

• 노드 환경에서의 this === global(객체)
• 브라우저 환경에서의 this === window(객체)

• 메서드와 함수의 차이

• 메서드 : 자신을 호출한 대상 객체에 대한 동작을 수행한다.
• 함수 :  함수는 그 자체로 독립적인 기능을 수행한다.

---

call메서드

• call 이란?

함수 호출시 this 값을 명시적으로 지정할 수 있게 해주는 메서드이다.
call은 객체를 첫번째 인수로 전달하여 해당 객체가 함수내의 this로 사용되게한다.
나머지 인수들은 호출하려는 함수에 전달된다

 

• 예시

function test(name,age){//베이스코드
this.name =name;
this.age =age;
}
//call 메소드 사용 예시코드

function test2(name,age,job){
test.call(this,name,age)
         //name과 age도 this로 호출됨
         this.job =job
}

---

apply메서드

 

• apply 란? 

기본적으로 call과 같다.
함수 호출시 this 값을 명시적으로 지정할 수 있게 해주는 메서드이다.
하지만 apply는 인수를 배열 또는 배열과 유사한 객체로 전달 해야한다.

• 예시

function 함수명(test1,test2,...){
//함수로직
}
함수명.apply(this,[test1,test2])