TIL 230920

자바스크립트의 실행 환경

 

자바스크립트 엔진은 코드가 없어도 실행 환경을 초기화한다. (preventDefault와 연관성이 있나?)

스코프는 코드가 현재 실행되는 환경, 맥락을 의미한다.

this포인터 스코프에 저장된 변수들, 스코프 체인등이 환경에 포함된다.

this포인터의 경우 글로벌 스코프에서는 window를 가리킨다.

 

함수가 실행되면 함수 스코프에 따라 환경이 만들어지고 this,함수 스코프의 변수들, 그리고 스코프 체인이 형성된다.

스코프 체인을 따라 글로벌 환경에 도달한다.

 

객체의 메서드의 경우 메서드 환경의 this는 해당 객체를 가리킨다. 하지만 this가 가리키는 것은 환경에 따라 변할 수 있다.

 

 

 

 

실행컨텍스트 

 

실행컨텍스트는 자바스크립트 코드가 실행되는 환경

코드에서 참조하는 변수,객체(함수 포함), this 등에 대한 레퍼런스가 있다.

실행컨텍스트는 전역에서 시작해 함수가 호출될 때 스택에 쌓인다.

 

자바스크립트가 실행될 때 전역 실행 컨텍스트가 생성

함수가 실행될 떄 함수 실행 컨텍스트 생성

 

 

 

 

함수가 호출되는 상황

함수호출-함수의직접호출 this는 window를 가리킨다

메서드호출-객체의메서드호출 

생성자호출-생성자함수호출 

간접호출-call,apply 

콜백호출- 콜백함수(특정동작이후불려지는,함수의인자로보내지는 함수) 

전역컨텍스트
const name = "elice";
console.log(this); // window {...}


일반함수호출(일반함수의this는 새롭게 생성된 실행 컨ㄷ텍스트를 가리킴)
(화살표함수의this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킴{정해지면 바뀌지 않아setTimeout떄 유용})
function myFunc() {
  const name = "elice";
  console.log(this);
}
myFunc(); // 일반 함수 호출시 window {...}


생성자함수호출
function myFunc(name) {
  this.name = name;
  this.getName = function () {
    console.log("getName this:", this);
    return this.name;
  };
  console.log("myFunc this:", this);
  // return this; 생략 가능.
}
const o = new myFunc("james"); // myFunc this: myFunc {...}
o.getName() // myFunc this: myFunc {...}


객체에서 사용되는 this
const o = {
  name: "elice",
  myFunc: function () {
    console.log(this);
  },
};
o.myFunc(); // {name: 'elice', myFunc: ƒ}
객체 안 함수의 내부 함수의 This는
동적바인딩으로 인해 전역 객체를 가리킴.
const o = {
  name: "elice",
  myFunc: function () {
    return function () { console.log(this) }
  },
};

o.myFunc()(); // window {...}

 

일급객체

 

함수는 일급 객체(다른 변수처럼 대상을 다룰 수 있는 것)

자바스크립트에서 함수는 변수처럼 핸들링

 

 

클로저

 

함수와 함수가 사용하는 변수들을 저장하는 공간

자바스크립트 클로저는 함수의 일급 객체 성질을 이용

함수가 생성될 떄 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장

 

 

function createCard() {
   let title= "";
   let content= "";
      function changeTitle(text) {
      title= text
      }
       function changeContent(text) {
       content= text
       }
        function print() {
        console.log("TITLE -", title);
        console.log("CONTENT -", content);
        } 
  return { changeTitle, changeContent, print};
}

createCard 내에 있는 변수들은 외부에서 접근X
chnageTitle,changeContent 함수를 통해 수정 가능
const myCard = createCard()와 같은 형태로 인스턴스를 만들어서 사용가능
->실수방지 탄탄한코드 협업시 오류 감소