- 함수가 호출될 때마다 각각의 컨텍스트가 생성됩니다.
위 예제 코드에서 bar 함수가 먼저 호출 되었습니다.bar_함수_컨텍스트가 생성됩니다.
1 | 'bar_함수_컨텍스트': { |
변수객체의 variable에 ‘object’가 들어간 것과 scopeChain에 bar 변수객체가 추가된 것을 볼 수 있습니다.
동일한 방식으로 foo 함수 컨텍스트도 생성됩니다.
1 | 'foo_함수_컨텍스트': { |
context
this란 무엇일까?
“그래서, this가 뭔가요?”
“this는 해당함수를 어떤 방식으로 호출하느냐에 따라 결정 됩니다. blur blur blur…”
“그래서, this가 뭔가요?”
면접에서 this에 대해 한참을 설명하고 나서 들었던 질문입니다. 저는 this를 단순히 객체를 가리키는 것 이라고만 생각하고 있었습니다. 면접 후, this에 대해 좀더 자세히 공부하였고, 머릿속에 있던 자바스크립트의 개념들과 이것(여기서의 이것은?)을 연결하여 이해 할 수 있었습니다. 아래의 내용들은 제가 this에 대해서 공부하면서 함께 공부했던 내용들을 정리해놓은 것입니다. 주로 ZeroCho 님의 블로그를 보고 공부하였습니다.
Hexo Icarus Theme 커스터 마이징
Hexo는 블로그 프레임워크이며, 다양한 테마를 제공합니다. 그 테마 중 현재 사용 중인 Icarus라는 테마를 어떻게 커스터 마이징 하였는지 정리하고자 합니다. Icarus 테마는 다양한 위젯을 제공하며, 이 위젯을 켜고 끌 수 있습니다. themes/icarus/_config.yml 파일에서 커스터마이징을 할 수 있습니다.
화면 분할 (위젯 설정)
1 | # Widget name |
현재 이 블로그처럼 article 공간을 좀더 크게 활용하고 싶다면 위젯을 한쪽으로 몰아 배치하면, 자동으로 article 부분의 공간이 넓어집니다.
post 내용을 일정 부분 숨기기
READ MORE을 표시하려면 자신이 작성한 post에 <!-- more --> 을 넣어주면 됩니다. 이 태그가 들어간 글의 앞부분은 Home 페이지에 노출이 됩니다.
thumbnail 넣기
자신이 작성한 post에 thumbnail:{이미지 주소}를 넣어 설정 가능 합니다.
저는 깔끔하고 차분한 분위기 블로그를 위해 thumbnail을 숨겨놓았는 데, 어떻게 해야 할지는 현재도 고민 중입니다.
객체를 생성자 함수처럼 사용하기, Object.create(obj)
1 | Object.create(obj); |
obj을 프로토타입으로 가질 객체를 생성하시오
return 값은, 명시된 객체를 프로토 타입으로 가지고, 명시된 속성들을 가지는 새로운 객체
this 를 원하는 객체와 연결하기, call, apply, arguments
1 | function.call(object); |
의미: function이라는 함수가 실행될 때 그 안의 this가 object를 가리키도록 해
DOM, Document Object Model 이란?
HTML을 작성할 때에는 HTML 콘텐츠를 다른 HTML 콘텐츠 내에 캡슐화하여 문서를 작성한다.
1 | <html> |
이를 통해 Tree로 표현 가능한 계층 구조가 만들어진다. 브라우저는 HTML 문서를 로딩할 때, 이 계층구조 (Tree)를 해석하여 마크업이 어떻게 캡슐화 되었는 지를 보여주는 노드 개체(객체) 트리를 생성한다.
Vanilla Coding Bootcamp Prep 과정 후기
2주 뒤면, 8주 동안의 “바닐라 코딩 프렙” 과정이 모두 끝나게 된다. 수업들을 통해 배우고 느꼈던 부분들에 대해 정리해 보고자 한다.
Vaild braces - 괄호 짝찾기
Prototype
자바스크립트의 Prototype 이란, 어떠한 객체가 만들어지기 위한 그 객체의 모태(원형)를 말한다. 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장 되었다.
Prototype은 크게 두가지 특징을 가지고 있다.
- 생성자 (constructor) 와 쌍을 이룬다.
- Instance 와 연결되어 있다. (Dunder proto와 prototype chain)
첫번째, 생성자 (constructor) 와 쌍을 이룬다.
마치 “부부”처럼, 생성자가 있으면 Prototype은 반드시 존재한다. 생성자에는 아내인 Prototype에 대한 정보를 “기본적”으로 가지고 있다. 그 정보(prototype의 reference)를 prototype 이라는 속성에 저장 한다. 반대로 아내 prototype도 남편의 정보(constructor의 reference)를 constructor라는 속성에 저장하고 있다.
아래 이미지에서 파란색 줄은 Object라는 생성자의 prototype 속성에 저장된 정보를, 노란색 줄은 생성자 아내(prototype)의 constructor 속성에 저장된 정보를 보여준다.
각각의 속성의 값들은 그 자체로 아내(prototype)와 남편(constructor)을 가리킨다.
this keyword
this가 객체를 가리킨다 하지만, 어떤 객체를 가리키는지는 this를 사용하는 해당 함수를 “어떤 방식으로 호출하느냐” 에 따라 결정된다.