전체 글72 JS33 - 16.new, 생성자, instanceof, 인스턴스 new 생성자 함수 (Constructor function)을 호출하는 방법이다. 이름은 대문자로 시작한다. new 신규작성 시, 새로운 빈 오브젝트를 생성한다. 새로 생성된 오브젝트에 this를 바인딩한다. 새로 생성된 오브젝트에 생성자 함수의 prototype object를 가리키는 proto라는 속성을 추가한다. 생성된 오브젝트가 함수로부터 반환될 수 있도록 함수의 마지막에 return this를 추가한다. (function에서 object를 반환) function Student(name, age) { this.name = name; this.age = age; } var second = new Student('Jeff', 50); second.__proto__ === Student.prototyp.. 2021. 6. 3. JS33 - 15.this, call, apply, bind call,apply,bind: 함수 호출을 제어하는데 사용된다. call()/apply()를 사용하여 함수를 즉시 호출할 수 있다. bind()는 나중에 실행될 때 원래의 함수를 호출하는 올바른 컨텍스트(“this“)를 갖는 바인딩 함수를 반환한다. 그래서 bind()는 함수가 특정 이벤트에서 나중에 호출되어야 할 경우에 유용하게 사용할 수 있다. this 함수가 생성될 때 this 키워드가 함께 생성되고, 함수가 작동하는 object와 연결된다. this 키워드의 값은 함수 그 자체와는 아무 관련이 없다. 함수가 호출되는 방식이 this값을 결정한다. // define a function var myFunction = function () { console.log(this); }; // call it .. 2021. 6. 3. JS33 - 14.팩토리와 클래스 Javascript의 클래스란? JavaScript는 프로토타입 기반 언어이며, JavaScript의 모든 객체에는 [[Prototype]]이라는 숨겨진 내부 속성이 있어 객체 특성 및 메서드를 확장하는 데 사용할 수 있습니다. 자바스크립트에는 클래스라는 개념이 없다. 대신 프로토타입(Prototype)이라는 것이 존재한다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이다. 클래스가 없으니 기본적으로 상속기능도 없다. 그래서 보통 프로토타입을 기반으로 상속을 흉내내도록 구현해 사용한다. 참고로 최근의 ECMA6 표준에서는 Class 문법이 추가되었다. 하지만 문법이 추가되었다는 것이지, 자바스크립트가 클래스 기반으로 바뀌었다는 것은 아니다. 클래스를 통해 객체를 보다 간결하게 작성할 수 있으며, .. 2021. 6. 3. JS33 - 13.DOM과 Layout DOM(Document Object Model) 문서 객체 모델 프로그래밍 언어가 웹 사이트의 내용, 구조 및 스타일을 조작 할 수있게 해주는 인터페이스입니다. JavaScript는 인터넷 브라우저에서 DOM에 연결하는 클라이언트 측 스크립팅 언어입니다. XML이나 HTML 문서에 접근하기 위한 인터페이스 웹 문서는 텍스트 파일로 만들어져있어서, 브라우저가 이해할 수 있는 구조로 메모리에 올리려면 가공이 필요하다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재한다. 이렇게 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. DOM은 자바스.. 2021. 6. 3. 브라우저 렌더링의 Reflow와 Repaint, 그리고 렌더링 최적화 렌더링 최적화 Reflow, Repaint 줄이기 브라우저 렌더링에서 웹 성능 최적화를 어떻게 할 수 있을까요? 이를 알려면 Reflow와 Repaint에 대해 먼저 짚고 넘어가야 합니다. Reflow (Layout) 렌더링 과정을 거친 뒤에 최종적으로 페이지가 그려진다고 해서 렌더링 과정이 다 끝난것이 아닙니다. 어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 됩니다. 이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 됩니다. 이러한 과정을 Reflow라고 합니다. // reflow 발생 예제 function reflow() { document.getE.. 2021. 6. 3. JS33 - 12.비트 연산자, 형식화 배열, 버퍼(배열) 컴퓨터는 모든 데이터를 이진 형식 (0,1)로 저장한다. 그 후 UTF-8과 같은 인코딩을 사용하여 저장된 비트조합을 문자,숫자, 혹은 다른 기호로 맵핑한다. 비트 수준에서 변수와 상호 작용하는 방법입니다. 비트는 일반적으로 부동 소수점 및 정수로 변환되므로 정보를 쉽게 소화 할 수 있습니다. 우리가 속도와 효율성을 중요시한다면 비트를 직접 처리하고 그 변환을 floats / int로 건너 뛰는 것이 유용 할 것입니다. 비트는 자바 스크립트의 변수보다 빠르지만 번역 수준을 건너 뛰는 것보다 복잡합니다. JS 이진 변환 Number(113).toString(2) // 1110001 // 직접 입력할 수도 있다. // function parseInt parseInt(1111, 2) //15 // 0b 0b1.. 2021. 6. 3. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
