웹
-
[JS Flow] 03. This Binding웹/JS핵심개념 JS Flow 2021. 1. 20. 19:49
When?? 실행 컨텍스트가 활성화될 때 (함수를 호출할 때) binding된다! How case 'this' is bound to 전역공간에서 호출 시 전역객체 (window / global) 함수 호출 시 전역객체 (window / global) - 함수는 전역객체의 메서드라고 생각하면 편하다, 함수 내부에 선언된 함수도 전역객체에 bind됨 메서드 호출 시 메서드 호출 주체 (a.b() -> 객체 a가 메서드 호출 주체) - 근데 메서드 내부에 선언된 함수는 전역객체에 bind됨;; callback함수 호출 시 기본적으로는 함수 내부와 동일하다. 전역객체가 bind됨. 하지만 제어권을 가진 함수(like addEventListener())가 따로 bind되는 this를 명시(구현)한 경우 해당 스펙..
-
[JS Flow] 02. 실행컨텍스트 (Execution Context)웹/JS핵심개념 JS Flow 2021. 1. 20. 00:12
실행 컨텍스트란? 함수를 실행할 때 필요한 환경정보 함수를 실행할 때 필요한 환경정보 객체 Call Stack? 실행 컨텍스트를 관리하는 자료구조 현재 어떤 함수가 동작 중인지 다음에 어떤 함수가 호출될 것인지를 제어한다. 실행 컨텍스트가 스택 방식으로 쌓인다! 실행 컨텍스트 객체의 구조 VariableEnvironment: 초기의 정보를 담고있음 LexicalEnvironment: 이후 변경사항을 추적 (VariableEnvironment와 구조가 같다) ThisBinding LexicalEnvironment의 구조 environmentRecord 객체 현재 컨텍스트의 식별자 정보를 갖는 객체, Hoisting(끌어올리기) 현상이 나타남. 해당 함수 내부의 함수선언과 변수 선언부를 객체 프로퍼티로 저장..
-
[JS Flow] 01. 데이터 타입웹/JS핵심개념 JS Flow 2021. 1. 18. 19:17
JS에는 두 가지 데이터 타입이 있다. Primitive Type string number boolean null undefined symbol Reference Type Object (Array, function, regExp, Set, weakSet, Map, weakMap) 이 둘을 왜 구분하는가? 메모리에 값을 저장하는 방식의 차이이다. Primitive Type 위와 같이, 메모리 공간이 컴퓨터에 있다고 가정하자. let a; a = 'hi' 위 코드를 js엔진이 읽어 실행하면 let a; // 메모리의 5001번 주소에 이름이 a가 된다. a = 'hi' // 메모리의 8001번 주소에 값 'hi'가 저장이 되고, 이름 a를 갖고있는 5001번 주소에..
-
call, apply, bind웹/Javascript 2019. 8. 3. 00:08
call, apply, bind 이 세 메서드는 유사한 역할을 합니다. 이 셋은 '객체에 속하지 않은' 함수를 '객체에 속하는' 상태로 만들어줄 수 있습니다. 1. 일반적인 사용 const func = function() { this.job = 'developer'; }; 객체에 속하지 않은 함수 func가 있습니다. 객체에 속하지 않았기 때문에, 함수의 this는 특정한 객체에 job이라는 프로퍼티를 설정해주지 않습니다. const onwah = { name: 'onwah' } call, apply, bind의 효과를 체험하기 위해 객체 하나를 만들어줍니다. func.call(onwah); console.log(onwah.job); 함수를 호출할 때, 그 뒤에 call, bind, apply를 사용합니..