웹/Javascript Pattern(7)
-
디자인 패턴 - 싱글톤(Singleton) 패턴
설명 싱글톤 패턴은 특정 클래스의 인스턴스를 오직 하나만 유지 동일한 클래스를 사용하여 새로운 객체를 생성하면, 두번째 부터는 처음 만들어진 객체를 얻게 된다. 자바스크립트에서 싱글톤 패턴 자바스크립트에는 클래스가 없고 오직 객체만 있다. 새로우 객체를 만들면 실제로는 이 객체는 다른 어떤 객체와도 같지 않기 때문에 이미 싱글톤이다. var obj = { myprop : 'my value' } var obj2 = { myprop : 'my value' } obj === obj2; // false obj == obj2; // false new 연산자를 사용한 싱글톤 패턴 구현 var uni = new Universe(); var uni2 = new Universe(); uni === uni2; // tru..
2020.03.02 -
코드 재사용 패턴(새로운 방식의 상속) - 프로퍼티 복사를 통한 상속 패턴
코드 재사용 패턴(새로운 방식의 상속) - 프로퍼티 복사를 통한 상속 패턴 function extend(parent, child) { var i; child = child || {}; for(i in parent) { if(parent.hasOwnProperty(i)){ child[i] = parent[i]; } } return child; } var parent = { name : "Parent" }; var kid = extend(parent); kid.name; // Parent 설명 부모의 멤버들에 대해 루프를 돌면서 자식에 복사 두번째 매개변수는 생략 가능 인자가 생략되면 상속을 통해 기존 객체의 기능이 확장되는 대신, 새로운 객체가 생성 및 반환 얕은 복사(shallow copy) ※ 깊은 복..
2020.03.02 -
코드 재사용 패턴(새로운 방식의 상속) - 프로토타입을 활용한 상속
코드 재사용 패턴(새로운 방식의 상속) - 프로토타입을 활용한 상속 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"; } // 프로토..
2020.03.02 -
코드 재사용 패턴(클래스 방식의 상속) - 프로토타입 공유
코드 재사용 패턴(클래스 방식의 상속) - 프로토타입 공유 function inherit(C, P) { C.prototype = P.prototype; } 구조 설명 원칙적으로 재사용할 멤버는 this가 아니라 프로토타입에 추가되어야 한다. 상속되어야 하는 모든 것들도 프로토타입 안에 존재해야한다. 부모의 프로토타입을 똑같이 자식의 프로토타입으로 지정하여 처리. 프로토타입 공유 패턴 장단점 모든 객체가 동일한 프로토타입을 공유하게 되어 프로토타입 체인 검색이 간단. 상속 체인의 하단 어딘가에 있는 자식이나 손자가 프로토타입을 수정할 경우, 모든 부모와 손자뻘의 객체에 영향 출처 : JavaScript Patterns
2020.03.02 -
코드 재사용 패턴(클래스 방식의 상속) - 생성자 빌려쓰기
코드 재사용 패턴(클래스 방식의 상속) - 생성자 빌려쓰기 function Child(a, c, b, d){ Parent.apply(this, arguments); } 설명 부모 생성자 함수의 this에 자신 객체를 바인딩한 다음, 자식 생성자가 받은 인자들을 넘겨준다. 부모 생성자 함수 내부의 this에 추가된 프로퍼티만 상속 프로토타입에 추가된 멤버는 상속되지 않는다. ※ 기본패턴과의 차이점 기본패턴의 경우 자식 객체가 상속된 멤버의 참조를 물려받은 받지만, 생성자 빌려쓰기 패턴을 사용하면 자식 객체는 상속된 멤버의 복사본을 받게 된다. // 부모 생성자 function Article() { this.tags = ['js', 'css']; } var article = new Article(); // ..
2020.03.02 -
코드 재사용 패턴(클래스 방식의 상속) - 기본패턴
코드 재사용 패턴(클래스 방식의 상속) - 기본패턴 요구사항 클래스 방식의 상속을 구현할 때의 목표는 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()..
2020.03.02