Constructor Pattern_JavaScript Design Patterns 1

Preface

Before starting, let's pay attention to the name of this pattern: Constructor pattern, this one is not among GoF's 23 design patterns, the most similar name on the surface should be Builder pattern. But Builder's actual meaning is not the same as introduced in the book:

Builder Pattern: Used to encapsulate the construction process of composite structures (tree structures), similar to Iterator Pattern, both hide the internal implementation of composite structures, only provide a set of interfaces for creating composite structures

(Excerpted from [Ayqy: Design Patterns Summary](/articles/设计模式总结（《head-first 设计模式》学习总结）/))

So, Constructor should refer to a design pattern proposed to make up for JavaScript not providing class-based inheritance, then there's nothing mysterious about it

I. Constructor Pattern

From the examples in the book, Constructor Pattern is used to implement property sharing. The so-called "Constructor Pattern" is actually just a basic common sense: define private properties in the constructor, define public properties on the prototype object, code as follows:

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

    // Private properties
    var attr = 1;
    function fun() {
        // ...
    }
}
// Public properties (defining function properties on prototype object is for functions to be shared among instances, reducing memory usage)
Fun.prototype.fun = function() {
    // ...
}
console.log(new Fun(1).fun === new Fun(2).fun); // true

Doing this does have certain advantages (reducing memory usage), but there are big problems (such as prototype reference properties being shared among instances), the author didn't continue to expand, just gave a one-sentence common sense labeled as "design pattern" and ended hastily.

About JavaScript inheritance, the author has made detailed explanations before, won't elaborate here, please see Ayqy: Re-understanding 6 Inheritance Methods of JS

II. Best Inheritance Method

Reorganize JavaScript inheritance methods, look directly at code, code speaks for itself:

/* Parent class */
function Super(arg) {
    this.arg = arg;

    // Private properties
    var attr = 1;
    function fun() {
        // ...
    }
}

// Public properties (defining function properties on prototype object is for functions to be shared among instances, reducing memory consumption)
Super.prototype.fun = function() {
    // ...
}
/* Child class */
function Sub(arg, newArg) {
    // Inherit parent class instance properties
    Super.call(this, arg);

    // Initialize child class instance properties
    this.newArg = newArg;
    // ...
}
// Disadvantage: Cannot pass parameters to parent class constructor
// Sub.prototype = new Super();

function F() {} // Empty function, borrowed to give birth (beget)
F.prototype = Super.prototype;
var proto = new F();    // Get "pure" child
Sub.prototype = proto;  // Inherit parent class prototype properties

// test
var sub = new Sub(1, 2);
// Output parent class properties
console.log(sub.arg);   // 1
console.log(new Sub(3, 4).fun === new Sub(5, 6).fun);   // true

The above implementation still has a small flaw, missing the line proto.constructor = Sub;, causing sub.constructor to point to Super, actually we hope it points to Sub, just add the missing line

III. Some Nonsense

Was stumped by JS inheritance in an interview 3 months ago, afterwards re-understood 6 inheritance methods, now 3 months have passed, impression is very deep (directly wrote the above code, although there's a small flaw..). This shows, spending time to understand something is very useful, otherwise now would definitely be intimidated by the big hat of "Constructor Pattern"

Reference Materials:

• "JavaScript Design Patterns"

• Ayqy: Re-understanding 6 Inheritance Methods of JS