Language/JS Flow (6) 썸네일형 리스트형 [JS Flow] prototype 자바스크립트가 어려운 이유는.. 8할이 프로토타입 때문이라고.... 자바의 클래스 역할을 하는 프로토타입..! 최대한 이해해서 정리했다. 생성자 constructor의 프로퍼티는 prototype, 생성자 instance의 프로퍼티는 __proto__ 생성자가 인스턴스를 만들면, 생성자의 프로퍼티인 프로토타입이 __proto__에 참조를 전달한다. 그런데 인스턴트뒤의 __proto__는 생략이 가능하다. 그래서 프로토타입이 인스턴스를 바라보고 있는것처럼 보인다. 인스턴스가 프로토타입의 메소드를 마치 자신의 것처럼 갖다쓸수 있다는것.. 예를 들어보자. Array라는 생성자로 만든 인스턴스 [1,2,3] 이 있다. Array에는 프로토타입 말고도 여러가지 프로퍼티를 가지고 있다. 이중에서 prototype만.. [JS Flow] 클로저(closure) 클로저란 ? '함수'와 '그 함수가 선언될 당시의 lexical environment'의 조합 (lexical environment : 선언당시의 환경에 대한 정보를 담는 객체) 이게 무슨 말이람??? 예시를 들어보자. 다음과 같은 코드가 있다. 처음엔 전역에서 변수를 수집한다. outer함수가 실행되면서 변수를 수집한다. outer함수가 종료되었고, outer2변수에 inner함수가 담긴다. 👉빗금이 쳐있는 이유? outer2가 inner함수를 호출할거니까 inner함수가 참조하고 있는 a를 kill 할 수 없는것임. outer2를 실행하면 inner가 참조하고 있던 a의 값이 바뀐다. outer2함수가 종료되고 2를 출력한다. 다시 outer2를 실행하면 inner가 참조하고 있던 a의 값이 바뀐다... [JS Flow] this this 호출하는 방식 ✔ 전역공간에서 : window / global ✔ 함수 내부에서 : window / global ✔ 메소드 호출시 : 메소드 호출 주체 (메소드명 앞) ✔ callback에서 : 기본적으로는 함수내부에서와 동일 ✔ 생성자 함수에서 : 인스턴스 요약하자면 이렇다. 세부적인 내용을 살펴보자. 전역공간에서, 함수 내부에서 전역공간에서, 함수 내부에서 호출되는 this는 같다. 자바스크립트의 버그?라고 볼 수 있다구함.. 함수는 전역객체의 메소드다! 라고 생각하자. 메소드 호출시 메소드명 b앞에 있는 a가 this이다. 다음과 같은 로그가 출력된다. 메소드명은 c니까 a.b가 this이다. 다음과 같은 로그가 출력된다. 메소드 안에 내부함수가 있을때, 그 안에서 this가 문제될 수가 .. [JS Flow] callback함수 callback 함수 특징 ✔ 다른 함수(A)의 매개변수로 콜백함수(B)를 전달하면, A가 B의 제어권을 갖게된다. ✔ A에 미리 정해진 방식에 따라 B를 호출한다. ✔ 미리 정해진 방식이란 this에 무엇을 바인딩 할지, 매개변수에는 어떤 값들을 지정할지, 어떤 타이밍에 콜백을 호출할지 등이다. 여러 함수들의 정의 📌setInterval 정의 setInterval( callback, millisecond ) 코드 📌forEach 정의 arr.forEach( callback [, thisArg] ) []는 생략 가능하다는 표시다. 코드 📌addEventListener 정의 addEventListener( type, callback [, option] ) 코드 [JS Flow] 실행 컨텍스트 (hoisting, scope chain) Execution Context 란? ✔ 실행에 필요한 코드 흐름상의 배경이 되는 조건/환경 ✔ 동일한 조건/환경을 지니는 코드뭉치를 실행할 때 필요한 조건/환경정보 ✔ 함수 or 전역공간 👉 함수를 실행할 때 필요한 환경정보를 담은 객체 라고 대략적인 설명이 가능하다. 여기서, 가장 중요한 개념은 Lexical Environment인데 ✔ environmentRecord ✔ outerEnvironmentReference 로 나뉘고, 각각 hoisting과 scope chain으로도 말할 수 있다. environmentRecord hoisting : 현재 문맥의 식별자 정보를 실행 컨텍스트의 맨위로 끌어올린다 위의 코드가 hoisting 된다면, 다음과 같다. 끌어올려진 정보 전체가 environment.. [JS Flow] 데이터 타입 데이터 타입의 종류 Primitive Type(기본타입) : number, string, boolean, null, undefined Reference Type(참조타입) : object 👉 array, function, regexp 두가지 타입을 구분을 하는 이유! 어떤 차이가 있을까? 기본타입으로 변수를 선언, 값을 변경하는 메모리 그림이다. 참조하는 메모리 주소값을 바꾼다. 다음은 참조타입이다. obj이름이 가리키고 있는 값의 주소는 변경되지 않았다. 다음은 참조타입에서 중첩 객체이다. arr의 값이 바뀌면서 배열에 할당되어 있던 메모리들은 Garbage Collectiong을 당한다💥 이전 1 다음
