Constructor pattern by Douglas Crockford

Recently I watched a one of a talks by Douglas Crockford (his talks fascinate me, but always leave me confused). He gave an example of a constructor, but I don’t quite understand how would I use it in practice:

function constructor(spec) {
  var that = other_constructor(spec),
    method = function () {
      //spec , member, method

  that.method = method;
  return that;      

Maybe some one could give me a simple working example based on this pattern?

This is Douglas Crockford original source as it appears in his slides:

function constructor(spec) {
  let {member} = spec,
      {other} = other_constructor(spec),
      method = function () {
        // member, other, method, spec
  return Object.freeze({

The following example is a more concrete version of Douglas Crockford’s Object creation pattern 2014.

Douglas Crockford makes heavy use of ECMAScript 6 features like destructuring etc.!!

Start the code in node.js with following options (enable ES6):

node --harmony --harmony_destructuring demo.js


// Douglas Crockford 2014 Object Creation
(function() {
  'use strict';

  function adress(spec) {

    let {
      street, city
    } = spec,
    logAdress = function() {
      console.log('Adress:', street, city);
    return Object.freeze({

  function person(spec) {

    let {
    } = spec, {
    } = adress(spec),
      logPerson = function() {
        // member, other, method, spec
        console.log('Name: ', preName, name);
    return Object.freeze({

  let myPerson = person({
    preName: 'Mike',
    name: 'Douglas',
    street: 'Newstreet',
    city: 'London'


According to Douglas Crockford’s talk, he avoids the use of:

  • new
  • Object.create
  • this !!!

Watch the original Crockford video:

A good explanation for the Crockford Douglas Object Creation Pattern 2014 is this blog:

This is an example of using another constructor inside a factory function to return an object. In this case, other_constructor is the constructor function, which is creating an object of the type other_constructor (ideally in practice this would be capitalized). That object is stored in that. In this factory function, method is a defined function which is added to that to extend the object’s functionality in some way.

Read More:   d3.js & nvd3.js -- How to set y-axis range

The difference between constructor and factory functions is that a factory function is just a normal function that returns an object, whereas a constructor function has this pointing to the new object, and usually has to be called with the new keyword preceding it.

A typical constructor function:

function Dog(breed, height, name){
  this.breed = breed;
  this.animalType = "dog";
  this.height = height; = name;
  // calling `return` isn't necessary here

And it’s usage:

var lab = new Dog("labrador", 100, "Sugar"); // `new` is necessary (usually)
console.log(lab.animalType); // prints out "dog"
console.log(lab.height); // prints out 100

A typical factory function:

function createDog(breed, height, name){
  var dog = {
    breed: breed,
    height: height,
    animalType: "dog",
    name: name
  return dog; 
  // `return` is necessary here, because `this` refers to the 
  // outer scope `this`, not the new object

And its usage:

var lab = createDog("labrador", 100, "Sugar"); // notice no need for `new`
console.log(lab.animalType); // prints out "dog"
console.log(lab.height); // prints out 100

A good explanation of the difference between them and the different use cases of each is at Eric Elliot’s blog

Vanilla JavaScript examples of Douglas Crockford’s new constructor pattern with explanations:

var fauna = (function (){
  privitizeNewVariables=function (specs) {
    if (!specs.is_private) {
      var members = Object.assign({}, specs);
      members.is_private = true;
      return members;
    return specs;
  newAnimal=function (specs) {
    var members = privitizeNewVariables(specs);
    members.inheritance_type_list = ['Animal'];
    whenInDanger = function () {
        console.log('When in danger ', members.common_name);
      }catch (e){
        console.log('Error - whenInDanger() has no movesBy()');
    var isA = function(object_type){
      if (members.inheritance_type_list.indexOf(object_type)>-1) {
        console.log(members.common_name, 'is a', object_type);
        console.log(members.common_name, 'is not a', object_type);
    return Object.freeze({
      whenInDanger: whenInDanger,
      isA: isA
  newSnake=function (specs){
    var members = privitizeNewVariables(specs);
    members.movesBy = function () {
      console.log('Moves By: slithering');
    colorScheme = function () {
      console.log('Color scheme :', members.color_scheme);
    aPrivateFunction = function (){
      console.log('I only exist inside a Snake object');
    var an_animal = newAnimal(members);
    return Object.freeze({
      whenInDanger: an_animal.whenInDanger,
      isA: an_animal.isA,
      movesBy: members.movesBy,
      colorScheme: colorScheme
  return {
    newSnake: newSnake
var animal_specs = {common_name: 'Alf the animal'};
var an_animal = fauna.newAnimal(animal_specs);
animal_specs.common_name = "does not change Alf's common_name";
var snake_specs = {common_name: 'Snorky the snake',
var a_snake = fauna.newSnake(snake_specs);

function Car(model, year, miles, price) {

  this.model = model;
  this.year = year;
  this.miles = miles;
  this.price = price;

  this.toString = function() {
    return this.model + " has done " + this.miles + " miles and cost $" + this.price;

// We can create new instances of the car
var civic = new Car("Toyota Prius", 2015, 1500, 12000);
var mondeo = new Car("Ford Focus", 2010, 5000, 3000);

// these objects

Read more about Constructor Pattern

Read More:   Google Plus button code warns: "Unsafe JavaScript attempt to access frame" in Chrome

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts