생성자 패턴_JavaScript 디자인 패턴 1

서두에

시작하기 전에 이 패턴의 이름에 주목해 봅시다: Constructor(생성자) 패턴. GoF 의 23 개 디자인 패턴에는 이것이 없고, 이름의 字面上으로 가장 비슷한 것은 Builder(빌더) 패턴입니다. 그러나 Builder 의 실제 의미는 书中에서 소개하고 있는 것과 다릅니다:

빌더 패턴 (Builder): 조합 구조 (트리 구조) 의 구축 프로세스를 캡슐화하는 데 사용되며, 이터레이터 패턴과 유사하게, 조합 구조의 내부 구현을 은폐하고, 조합 구조를 생성하기 위한 한 세트의 인터페이스만 제공합니다

([黯羽轻扬：디자인 패턴总结](/articles/디자인 패턴总结（《head-first 디자인 패턴》학습总结）/) 에서 인용)

따라서, Constructor 는 JavaScript 가 class 에 기반한 상속을 제공하지 않는 것을 보완하기 위해 제안된 디자인 패턴을 가리키는はず입니다. 그렇다면 신비로운 것은 없습니다

一.Constructor(생성자) 패턴

书中的 예시에서 보면, 생성자 패턴은 속성의 공유를 실현하는 데 사용됩니다. 소위「생성자 패턴」은 실제로는 기본적인 상식에 불과합니다: 프라이빗 속성을 생성자 함수 내에서 정의하고, 퍼블릭 속성을 프로토타입 객체 위에서 정의합니다. 코드는 다음과 같습니다:

function Fun(arg) {
    this.arg = arg;

    // 프라이빗 속성
    var attr = 1;
    function fun() {
        // ...
    }
}
// 퍼블릭 속성 (프로토타입 객체 위에서 함수 속성을 정의하는 것은 함수가 각 인스턴스 간에 공유될 수 있어, 메모리 점유를 감소시키기 위함)
Fun.prototype.fun = function() {
    // ...
}
console.log(new Fun(1).fun === new Fun(2).fun); // true

이렇게 하는 것은 확실히 일정의 장점 (메모리 점유 감소) 이 있지만, 큰 문제 (예를 들어 프로��타입 참조 속성이 인스턴스 간에 공유됨) 가 존재합니다. 저자는 계속 전개하지 않고, 단순히 一句话의 상식에「디자인 패턴」이라는 라벨을 붙이고匆匆히 종료했습니다.

JavaScript 의 상속 에 대해서는, 필자는 이전에 상세한 설명을 했습니다. 여기서는 반복하지 않습니다. 黯羽轻扬：JS 의 6 종류의 상속 방식을重新理解 참조

二.最佳 상속 방식

JavaScript 의 상속 방식을重新梳理하고, 직접 코드를 봅니다. 코드 자신이 말합니다:

/* 부모 클래스 */
function Super(arg) {
    this.arg = arg;

    // 프라이빗 속성
    var attr = 1;
    function fun() {
        // ...
    }
}

// 퍼블릭 속성 (프로토타입 객체 위에서 함수 속성을 정의하는 것은 함수가 각 인스턴스 간에 공유될 수 있어, 메모리 소모를 감소시키기 위함)
Super.prototype.fun = function() {
    // ...
}
/* 자식 클래스 */
function Sub(arg, newArg) {
    // 부모 클래스 인스턴스 속성 상속
    Super.call(this, arg);

    // 자식 클래스 인스턴스 속성 초기화
    this.newArg = newArg;
    // ...
}
// 단점: 부모 클래스 생성자에 파라미터를 전달할 수 없음
// Sub.prototype = new Super();

function F() {} // 빈 함수, 빌려서 아이를 낳음 (beget)
F.prototype = Super.prototype;
var proto = new F();    // 「순결한」아이를 얻음
Sub.prototype = proto;  // 부모 클래스 프로토타입 속성 상속

// test
var sub = new Sub(1, 2);
// 부모 클래스 속성 출력
console.log(sub.arg);   // 1
console.log(new Sub(3, 4).fun === new Sub(5, 6).fun);   // true

위 의 구현 에는 아직 일점 의 하자 가 존재 하며, proto.constructor = Sub; 의 이 한 줄 이 빠져 있습니다. 이로 인해sub.constructor 는 Super 를 가리키고, 실제로는 Sub 를 가리키는 것을 희망합니다. 빠져 있는 그 줄 을 붙이면 됩니다

三.조금 의 쓸데없는 말

3 개월 전 의 면접 에서 JS 의 상속 을 묻혀 막혔습니다. 그 후 6 종류의 상속 방식을重新理解하고, 현재 3 개월 이 경과했으며, 인상 은 매우深刻합니다 (위 의 코드 를 직접 썼습니다. 일점 의 하자는 존재하지만。。). 이로 인해, 시간 을 들여 하나 의 것 을 이해 하는 것 은 매우 유용 함 을 알 수 있습니다.否则 현재 반드시「Constructor(생성자) 패턴」의 큰 모자 에 唬 당했을 것입니다

참고 자료:

《JavaScript 디자인 패턴》
黯羽轻扬：JS 의 6 종류의 상속 방식을重新理解

서두에

一.Constructor(생성자) 패턴

二.最佳 상속 방식

三.조금 의 쓸데없는 말

참고 자료:

댓글

댓글 작성