Dependency injection is a software design pattern that implements inversion of control (IoC) for resolving dependencies.

In simple words, dependency injection means giving an object its instance variables when needed.

function launchRocket() {
  console.log('Launching rocket at ' + new Date);
}

function BigRedButton() {
}

BigRedButton.prototype.openLid = function() {
  this._open = true;
};

BigRedButton.prototype.closeLid = function() {
  this._open = false;
};

BigRedButton.prototype.push = function() {
  if (this._open) {
    launchRocket();
  }
};

function spaceProgram() {
  var button = new BigRedButton();
  button.openLid();
  button.push();
  button.closeLid();
}

function launchRocket() {
  console.log('Launching rocket at ' + new Date);
}



function BigRedButton() {
}

BigRedButton.prototype.openLid = function() {
  this._open = true;
};

BigRedButton.prototype.closeLid = function() {
  this._open = false;
};

BigRedButton.prototype.push = function() {
  if (this._open) {
    launchRocket();
  }
};



function spaceProgram() {
  var button = new BigRedButton();
  button.openLid();
  button.push();
  button.closeLid();
}

function BigRedButton(buttonAction) {
  this.action = buttonAction;
}

BigRedButton.prototype.openLid = function() {
  this._open = true;
};

BigRedButton.prototype.closeLid = function() {
  this._.open = false;
};

BigRedButton.prototype.push = function() {
  if (this._open) {
    this.action();
  }
};

function spaceProgram() {
  var button = new BigRedButton(launchRocket);
  button.openLid();
  button.push();
  button.closeLid();
}

function spaceProgram(button) {
  button.openLid();
  button.push();
  button.closeLid();
}

var injector = createInjector();
injector.constant('button', new BigRedButton(launchRocket));
injector.invoke(spaceProgram);

function spaceProgram(button) {
  button.openLid();
  button.push();
  button.closeLid();
}

"I need it!"

function createInjector() {
  var cache = {};
 
  function constant(name, value) {
    cache[name] = value;
  }
 
  function invoke(fn) {
 
  }
 
  return {
    constant: constant,
    invoke: invoke
  };
}

How can we figure out fn's expected dependencies ?

 spaceProgram
   .toString()
   .match(/^function\s*[^\(]*\(([^\)]*)\)/)[1]
   .split(','); // => ['button']

^function

\s*

[^\(]*

\(

( 

[^\)]* 

) 

\)

The source code always begins with the text 'function'

It is followed by (optionally) some white space

Then there is (optionally) the function's name, which we define as a succession of

characters other than the opening parenthesis.

Then comes the argument list, which starts with an opening parenthesis.

The argument list is captured into a capturing group, because it is the part we're

interested in.

What we capture is a succession of characters other than the closing parenthesis.

Then we close the capturing group.

Finally we match the closing parenthesis.

What the Func?!

function createInjector() {
  var cache = {};
 
  function constant(name, value) {
    cache[name] = value;
  }
 
  function invoke(fn) {
    var argsString = fn.toString()
            .match(/^function\s*[^\(]*\(([^\)]*)\)/)[1];

    var argNames = argsString.split(',').map(function(argName) {
      return argName.replace(/\s*/g, '');
    });

    var args = argNames.map(function(argName) {
      return cache[argName];
    });
    return fn.apply(null, args);
  }
 
  return {
    constant: constant,
    invoke: invoke
  };
}

Instead of giving the injector the constant value directly, let's give it a function that returns that value!

injector.factory('button', function(buttonAction) {
  return new BigRedButton(buttonAction);
});
injector.constant('buttonAction', launchRocket);

function createInjector() {
  var instanceCache = {}; //*
  var providerCache = {}; //*

  function constant(name, value) {
    instanceCache[name] = value; //*
  }
 
  function factory(name, factoryFn) {
    providerCache[name] = factoryFn; //*
  }
 
  function invoke(fn) {
    var argsString = fn.toString()
      .match(/^function\s*[^\(]*\(([^\)]*)\)/)[1];
    var argNames = argsString.split(',').map(function(argName) {
      return argName.replace(/\s*/g, '');
    });
    var args = argNames.map(function(argName) {







      return instanceCache[name]; //*
    });
    return fn.apply(null, args);
  }
 
  return {
    constant: constant,
    factory: factory,
    invoke: invoke
  };
}

function createInjector() {
  var instanceCache = {}; 
  var providerCache = {};

  function constant(name, value) {
    instanceCache[name] = value;
  }
 
  function factory(name, factoryFn) {
    providerCache[name] = factoryFn;
  }
 
  function invoke(fn) {
    var argsString = fn.toString()
      .match(/^function\s*[^\(]*\(([^\)]*)\)/)[1];
    var argNames = argsString.split(',').map(function(argName) {
      return argName.replace(/\s*/g, '');
    });
    var args = argNames.map(function(argName) {
      if (instanceCache.hasOwnProperty(argName)) {
        return instanceCache[argName];
      } else if (providerCache.hasOwnProperty(argName)) {
        var provider = providerCache[argName];



      }
    });
    return fn.apply(null, args);
  }
 
  return {
    constant: constant,
    factory: factory,
    invoke: invoke
  };
}

function createInjector() {
  var instanceCache = {}; 
  var providerCache = {};

  function constant(name, value) {
    instanceCache[name] = value;
  }
 
  function factory(name, factoryFn) {
    providerCache[name] = factoryFn;
  }
 
  function invoke(fn) {
    var argsString = fn.toString()
      .match(/^function\s*[^\(]*\(([^\)]*)\)/)[1];
    var argNames = argsString.split(',').map(function(argName) {
      return argName.replace(/\s*/g, '');
    });
    var args = argNames.map(function(argName) {
      if (instanceCache.hasOwnProperty(argName)) {
        return instanceCache[argName];
      } else if (providerCache.hasOwnProperty(argName)) {
        var provider = providerCache[argName];
        var instance = invoke(provider);

        return instance;
      }
    });
    return fn.apply(null, args);
  }
 
  return {
    constant: constant,
    factory: factory,
    invoke: invoke
  };
}

function createInjector() {
  var instanceCache = {}; 
  var providerCache = {};

  function constant(name, value) {
    instanceCache[name] = value;
  }
 
  function factory(name, factoryFn) {
    providerCache[name] = factoryFn;
  }
 
  function invoke(fn) {
    var argsString = fn.toString()
      .match(/^function\s*[^\(]*\(([^\)]*)\)/)[1];
    var argNames = argsString.split(',').map(function(argName) {
      return argName.replace(/\s*/g, '');
    });
    var args = argNames.map(function(argName) {
      if (instanceCache.hasOwnProperty(argName)) {
        return instanceCache[argName];
      } else if (providerCache.hasOwnProperty(argName)) {
        var provider = providerCache[argName];
        var instance = invoke(provider);
        instanceCache[argName] = instance;
        return instance;
      }
    });
    return fn.apply(null, args);
  }
 
  return {
    constant: constant,
    factory: factory,
    invoke: invoke
  };
}

A service takes a constructor function instead of a plain old function.

In addition to invoking that function with dependency injection, it also sets up a new object with the function's prototype chain.

injector.service('button', BigRedButton);

function createInjector() {
  var instanceCache = {}; 
  var providerCache = {};

  function constant(name, value) {
    instanceCache[name] = value;
  }
 
  function factory(name, factoryFn) {
    providerCache[name] = factoryFn;
  }
 
  function service(name, Constructor) {
    factory(name, function() {
      var instance = Object.create(Constructor.prototype);


    });
  }

  function invoke(fn) {
    //...
    return fn.apply(null, args);
  }
 
  return {
    constant: constant,
    factory: factory,
    service: service,
    invoke: invoke
  };
}

function createInjector() {
  var instanceCache = {}; 
  var providerCache = {};

  function constant(name, value) {
    instanceCache[name] = value;
  }
 
  function factory(name, factoryFn) {
    providerCache[name] = factoryFn;
  }
 
  function service(name, Constructor) {
    factory(name, function() {
      var instance = Object.create(Constructor.prototype);
      invoke(Constructor, instance);
      return instance;
    });
  }

  function invoke(fn, self) { // *
    //...
    return fn.apply(self, args); // *
  }
 
  return {
    constant: constant,
    factory: factory,
    service: service,
    invoke: invoke
  };
}

What we need to do

• Construct a new object with the prototype chain of the given constructor
• Invoke the given constructor with dependency injection