TIL 2021-05-06 (이벤트 루프, 프로토타입, 자바스크립트의 this)

nyongho·2021년 5월 6일
0

오늘 배운 내용

목록 보기
7/40
post-thumbnail

TIL


What I Learn?

1) 이벤트 루프 (Event Loop)

일단 내가 쓰는 자바스크립트는 싱글 스레드 기반 언어이다.

이 말인 즉슨, 하나의 작업이 끝나야만 다음 작업을 할 수 있다는 것이다.

정확히는 하나의 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이게 되고 스택의

맨 위에서부터 아래 순서로 (선입후출) 함수를 처리한다.

이러한 자바스크립트의 한계성을 보완하기 위해 이벤트 루프 (Event Loop) 라는 것을 통해 동시성을 지원한다. (동시에 일어나는 것처럼 보이는 거지 동시에 일어나는 것은 아니다!)

이벤트 루프는 현재 콜 스택에서 실행중인 것이 있는지 확인하고, Event Queue 에 대기중인 작업이 있는지 확인한 뒤 콜 스택이 비어있다면 이동시킨 뒤 실행한다.


2) 프로토타입 (Prototype) ?

이전의 블로그에서도 다뤘던 내용이지만 간단하게 요약해서 다시 한 번 복습하겠다.

자바스크립트는 객체 지향 언어이지만 타 언어들과 다르게 Class 라는 개념이 없었다.

자바스크립트는 이를 대신해 Prototype 이라는 것을 가지고 있어서 이를 통해 Class 와 같은 기능을 수행할 수 있었다.

기본적으로 프로토타입을 사용하는 이유는 다음과 같다.

상속을 구현하여 기존의 코드를 재사용해 불필요한 중복을 제거하기 위함.

프로토타입에 모든 인스턴스에 공통적으로 사용할 메소드를 구현해놓음으로써 코드의 중복을 방지할 수 있다. (이는 메모리를 굉장히 효율적으로 사용할 수 있게 한다.)

프로토타입에 지정한 메소드를 사용할 수 있는 방법은 __proto__ 때문이다.

이를 통해 Prototype 의 내부 슬롯에 접근할 수 있는 것이다.

2-1. 프로토타입 체인(Prototype Chain)이란?

이전에 클로저 (Closure)를 배웠다면 내부 함수에 해당 변수가 없을 시 단계 별로 올라가서 해당 변수 값을 찾아가는 개념인 스코프 체인 을 알 것이다.

이 개념은 프로토타입 체인 에서도 똑같이 적용된다.

해당 객체의 프로퍼티에 접근하려 하는데 없는 경우, __proto__ 접근자 프로퍼티가 가리키는 링크에 따라 자신의 상위 프로퍼티를 순차적으로 검색한다.

마지막으로 찾는곳은 최상위 객체인 Object.prototype 이다.


3) 자바스크립트의 this

3-1. 일반함수의 this 와 화살표 함수의 this 의 차이?

자바스크립트의 내부 함수 는 어디에서 선언 됐던 전역 객체를 가리킴.

일반 함수 this 또한 전역을 가리키며 화살표 함수의 this 는 상위 스코프를 가리킴.

3-2. Call, Apply, Bind 에 대해

일단 Call 과 Apply 메소드의 공통점은 둘 다 주어진 this 값 및 각각 전달 된 인수와 함께 함수를 호출한다는 것이다.

결정적 차이는 Call 은 두 번째 인자로 인수 목록을 받지만 Apply 는 두 번째 인자로 배열 하나를 받는다는 것이다.

// Call

a(b, 1,2,3)

// Apply

a(b, [1,2,3])

Bind 는 함수를 호출하는 것이 아닌, this 가 바인딩 된 새로운 함수를 리턴한다.

3-3. use strict 모드에서의 this

이 경우 일반 함수에서의 this 는 undefined 가 바인딩 된다.

profile
두 줄 소개

0개의 댓글