코드 재사용 패턴(새로운 방식의 상속) - 프로토타입을 활용한 상속 function object(o) { function F() {}; F.prototype = o; return new F(); } // 상속해줄 객체 var parent = { name : "Parent" } // 새로운 객체 var child = object(parent); alert(child.name); // Parent 구조 설명 object라는 함수를 통해 객체 생성 프로토타입을 활용한 상속 패턴의 프로토타입 체인(__proto__ 링크를 통해 parent의 모든 기능을 가진다.) 예제) // 부모 생성자 function Person() { // 부모 생성자 자신의 프로퍼티 this.name = "Parent"; } // 프로토..

코드 재사용 패턴(클래스 방식의 상속) - 프로토타입 공유 function inherit(C, P) { C.prototype = P.prototype; } 구조 설명 원칙적으로 재사용할 멤버는 this가 아니라 프로토타입에 추가되어야 한다. 상속되어야 하는 모든 것들도 프로토타입 안에 존재해야한다. 부모의 프로토타입을 똑같이 자식의 프로토타입으로 지정하여 처리. 프로토타입 공유 패턴 장단점 모든 객체가 동일한 프로토타입을 공유하게 되어 프로토타입 체인 검색이 간단. 상속 체인의 하단 어딘가에 있는 자식이나 손자가 프로토타입을 수정할 경우, 모든 부모와 손자뻘의 객체에 영향 출처 : JavaScript Patterns

코드 재사용 패턴(클래스 방식의 상속) - 생성자 빌려쓰기 function Child(a, c, b, d){ Parent.apply(this, arguments); } 설명 부모 생성자 함수의 this에 자신 객체를 바인딩한 다음, 자식 생성자가 받은 인자들을 넘겨준다. 부모 생성자 함수 내부의 this에 추가된 프로퍼티만 상속 프로토타입에 추가된 멤버는 상속되지 않는다. ※ 기본패턴과의 차이점 기본패턴의 경우 자식 객체가 상속된 멤버의 참조를 물려받은 받지만, 생성자 빌려쓰기 패턴을 사용하면 자식 객체는 상속된 멤버의 복사본을 받게 된다. // 부모 생성자 function Article() { this.tags = ['js', 'css']; } var article = new Article(); // ..

코드 재사용 패턴(클래스 방식의 상속) - 기본패턴 요구사항 클래스 방식의 상속을 구현할 때의 목표는 Child()라는 생성자 함수로 생성된 객체들이 다른 생성자 함수인 Parent() 프로퍼티를 가지도록하는 것 // 부모 생성자 function Parent(name) { this.name = name || 'Adam'; } // 생성자의 프로토타입에 기능 추가 Parent.prototype.say = function() { return this.name; } // 자식 생성자 function Child(name) { } // 상속(직접구현) inherit(Child, Parent); 클래스 방식의 상속 패턴 - 기본패턴 function inherit(C, P) { C.prototype = new P()..

Javascript Patterns - 기본 1. 유지보수 가능한 코드 작성 읽기 쉽다 일관적이다 예측 가능하다 한 사람이 작성한 것처럼 보인다. 문서화되어 있다. 2. 전역 변수 최소화 전역변수의 문제점 자바스크립트 애플리케이션이나 웹페이지 내 모든 코드 사이에 공유된다는 점. 모든 전역 변수는 동일한 전역 네임스페이스 안에 존재하기 때문에, 애플리케이션 내의 다른 영역에서 목적이 다른 전역 변수를 동일한 이름으로 정의할 경우 서로 덮어쓰게 된다. /* * result는 선언되지 않은 상태로 사용. * 이 코드는 잘 동작하지만, 이 함수를 호출하고 나면 전역 네임스페이스에 result라는 변수가 남아 문제를 유발 */ function sum(x, y) { result = x + y; return res..

1. 개요 브라우저에서 렌더링의 성능은 중요한 요소 가운데 하나 렌더링 성능을 향상시키면 사용자가 느끼는 체감 속도를 개선할 수 있음 2. 브라우저의 주요 컴포넌트 웹 앱을 구성할 때 자바스크립트의 코드를 작성하는 것과 실행하는 것을 분리하면 안됨 자바스크립트 코드는 환경과 상호작용 1) 사용자 인터페이스 주소 입력 바, 앞/뒤로가기 버튼, 즐겨찾기 메뉴 등. 웹 페이지를 보는 창을 제외한 브라우저 디스플레이의 모든 부분. 2) 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 상호작용을 다름. 3) 렌더링 엔진 웹 페이지의 표시를 책임. 렌더링 엔진은 HTML과 CSS를 파싱하고 화면에 파싱된 내용을 표시. 4) 네트워킹 다양한 플랫폼에서 여러 구현 방식을 사용해 만들어진 XHR 요청과 같은 네트워..