[js]함수와 this, scope

함수와 메소드 차이는?

- 메소드는 클래스 내부에 정의한 함수

- 독립적으로 존재하는 함수이냐 클래스 내부에 종속되어 있느냐로 구분

- 함수 ⊃ 메소드

 

 

일반함수와 화살표 함수 차이는?

- function foo () { .. } : 일반함수

- const fa = () = { .. } : 화살표함수 // 즉시 실행이 필요한 경우 사용한다 react에서 event를 jsx에 달때 많이 사용하지..

 

 

모든 함수는 실행될때마다 함수 내부에 this라는 객체가 추가된다 

 

 

일반함수의 this

 

- 일반함수 실행시에는, this는 전역객체(window)를 가리킨다

- 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.

- 생성자(new) 실행 시에는 새롭게 만들어진 객체를 가리킨다 

 

그리고 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다

 

 

화살표함수의 this

- 화살표함수는 생성자함수로 못만든다

(당연. 임시적으로 바로바로 쓰기위한용의 함수니 - prototype프로퍼티를 가지고있지않다.)

- 언제나 상위 스코프의 this를 가리킨다(lexical this)

- 화살표 함수는 call, apply, bind 메소드를 이용해서 this를 변경할 수 없다.

 

fun1.speak(); //바이

fun2.speak(); //하이라는데..?

 

 

 

 

 

 

 

 

 

 

---

 

전역변수와 지역변수의 관계에서 스코프 체인(scope chain)이란 개념이 나옴

내부함수에서 내부함수를 포함하는 외부 함수의 변수로는 접근이 가능하지만 반대는 불가

내부에 없으면 가장 가까운 외부로 가서 찾게됨

 

 

렉시컬 스코핑(lexical scoping)

스코프는 함수를 호출할 때가 아닌, 선언할때 생긴다.

 

log 를 선언할때의 name은 전역함수를 가르키므(참조)로 zero가 찍힌다!

 

함수를 처음 선언하는 순간(이것이 렉시컬환경), 함수 내부의 변수는 자기 스코프로부터 가장 가까운곳(상위범위에서)

을 계속 참조하게됨

때문에 변수가 섞일 우려가 있음. 그래서 전역변수를 최소한으로 사용하고, 약간 내부화? 해서 사용을 많이한다

함수를 변수에 담아놓고, 발휘되는 순간으로 return 되게 처리함

 

newScope.y(); 하면 local이라고 alert뜸

공개하고싶은 변수 y  와 보호하고싶은 변수 x는 비공개하는 방법을 취하는것임 (x는 리턴에 포함되지않는다)

 

another()로 변수를 한번 거치는 대신 바로 집어넣은(IIFE즉시호출함수표현식, 모듈패턴) 도 기억해버리자

이런식으로 라이브러리를 많이 만든다고 한다

 

 

 

---

 

 

처음 코드를 실행하는 순간(브라우저가 스크립트를 로딩해서 실행) 전역 컨텍스트가 생긴다

함수를 하나씩 호출할때마다 함수 컨텍스트가 하나씩 생긴다

 

컨텍스트의 원칙 네가지:

1. 함수 호출시마다 컨텍스트가 생긴다

2. 컨텍스트 생성시 안에 변수객체(arguments, variable), scope chain, this 가 생성됨

3.  컨텍스트 생성후 함수가 실행되는데, 변수들은 변수객체안에서 값을 찾고, 없으면 스코프 체인을 따라 올라가서 

상위 스코프 안에서 찾는다

4. 함수실행이 마무리되면 해당 컨텍스트는 사라진다(클로저 제외), 전역 컨텍스트는 페이지가 종료되면 사라짐

 

 

this.는 기본적으로 전역 window를 가르킴

화살표 함수는 this를 가장 가까운 곳으로 정적으로 잡음(선언과 동시에 실행되니까)

스코프 : 함수가 선언되면 무조건 스코프가 생성된다.
컨텍스트 : 함수가 속해있는 객체가 무엇인지를 의미한다. this
  (만약 함수가 글로벌 스코프에서 선언되었다면, 이 때의 컨텍스트는 global(window)이다.)



겁나게  헷갈리네 ㅠㅠㅠㅠㅠㅠㅠㅠ 
함수가 생성될때마다 함수스코프가 생기고(var는 함수스코프를 따르고, let,const는 블록스코프도 따른다)

 

---

연습::

1)

2)

 

 

 

참고: 제로초짱

https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0