this, binding, 실행 컨텍스트, lexical scope

.·2022년 6월 30일
0

blog

목록 보기
22/52

[1] this

  • 자바스크립트는 인터프리터 언어이므로 한줄씩 해석이 되는데 현재 실행이 되고있는 환경(실행 컨텍스트)를 가리킵니다.이 떄 this가 가리키는 지점이 실행컨텍스트 입니다.

  • this는 브라우저에서는 window객체를 node에서는 global객체를 java 클래스 내부에서는 본인 클래스를 가리킵니다.(자바와 같은 객체지향에서의 this와 자바스크립트에서의 this는 차이가 존재를 하는 것 같다.)

  • 자바스크립트 함수 내부에서는 일반적으로 window 객체를 가리키는데 함수 내,외부에서 'use strict'를 사용하면 window객체를 가리키지 않는다고 한다.

  • 객체 내부에서의 메소드는 본인 객체를 가리킨다고 한다. 하지만 객체 내부에서 화살표 함수를 사용하게 되면 전역 객체를 가리킨다고 한다. ES2015에서 this를 제공하지 않는 화살표 함수를 만들었다고 한다.

  • arrow function에서는 전역 객체인 window를 가리키는 것이 아닌 부모 객체를 가리킨다고 한다. 이거를 lexical this라고 한다는데 확실하지는 않지만 화살표함수는 일반 함수와 다르게 실행이 되었을 때를 기준으로 컨텍스가 this binding을 한다고 알고 있다.

  • call, apply를 이용해서 실행되는 메소드 내부의 this는 객체를 뜻한다.

[2] this binding

  • binding이란 어떤 것을 연결지어주는데 사용되는 의미이다.

  • this binding은 실행컨텍스트가 생길때 이루어진다.(실행할때가 아니다) , 함수가 호출되는 방식에 따라 다르고 객체 내부인지 아닌지 엄격하게 적용을 하는지 안하는지에 따라서 this가 가리키는 객체가 달라진다.

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

[3] lexical scope

  • 실행할 코드에 제공할 환경 정보를 모아둔 "객체"

  • 일반적으로 함수 호출(실행) 시점이 아닌 선언된 시점에서의 기준으로 스코프를 탐색해서 생성이된다.

  • 렉시컬 환경: 변경사항 실시간 반영

  • 변수 환경: 식별자의 정보, 선언위치, 외부환경 정보, 렉시컬에 포함, 변경x

[4] dynamic scope

실행된 기준으로 사용

[5] scope chain

  • 본인의 범위내의 변수나 함수가 보이지 않는다면 스코프 체인이 가리키는 곳으로 가서 값을 찾는다. 찾다가 찾다가 window까지 가서 찾지 못한다면 에러가 발생한다.

[6] execute Context

  • 실행할 코드에 제 환경정보들을 모아놓은 객체

  • 실행컨텍스트가 횔성화될때 호이스팅, 외부환경정보 구성, 설정이 발생한다

  • 자바스크립트 엔진이 코드를 실행하기 위해서 실행에 필요한 정보를 알고 있을 필요가 있다. 변수의 유효 범위나 this같은 정보를 알고 있어야 한다. 이러한 정보를 보관하는 곳이 실행컨텍스트이다.

  • 실행컨텍스트는 논리적 스택 구조를 가지므로 스택방식으로 작동이 된다. 선입후출 방식

  • 전역공간을 자동으로 컨텍스트로 구성

[7] closure

  • 독립적인 변수를 가리키는 함수, 함수가 만들어진 환경을 기억한다.

  • 클로저는 함수와 함수의 환경을 더해놓은 것이라고 한다.

  • 외부 스코프를 기억하고 있는다.

  • 클로저는 렉시컬 스코프(함수가 선언되었을 때의 환경)를 기억하고 있는 함수라고 생각하면된다. 그래서 불필요한 환경을 기억해서 메모리 적으로 좋지 않을 수는 있다.

  • 아래와 같이 사용하면 클로저가 선언되었을때의 이전 상태값을 기억해서 유용하게 사용을 할 수 있을 것이다. 외부에서 직접 접근을 할 수 없어 좋은 코드이다.

let func1 = (()=>{
    let count = 0;
    return function() {
        return count++;
    }
})

[8] hoisting

  • 실행컨텍스트 실행시 렉시컬 스코프내의 선언이 끌어 올려지는 것
  • var, let, const, function, class 등을 자바스크립트 엔진에 의해서 실행 컨텍스트에 저장이 되게 된다.
  • TDZ(Temporal Dead Zone) : 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ라고 한다.

변수를 등록하는 단계

  • 선언 단계 : 실행 컨텍스트의 변수 객체에 등록하는 단계
  • 초기화 단계 : 실행 컨텍스트에 존재하는 변수 객체의 메모리를 만드는 단계, 할당된 메모리에는 undefined로 초기화 된다.
  • 할당 단계 : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계

  • var, 함수선언식은 먼저 사용을 해도 undefined 나오게 된다.

그러므로 var나 함수선언식을 변수나 함수작성할 때 사용을 하게되면 오류가 발생을 해야 개발자가 인식을 할 수 있는데 에러가 발생하지 않아서 문제가 된다. 그러므로 var를 이용한 변수 사용이나 함수 선언식을 사용하는 것을 피해야 한다.

[참조]

https://poiemaweb.com/js-closure

0개의 댓글