Dependency Injection via JavaScript Function Properties

A well-known but not very popular method of dependency injection. An attempt to implement this method in popular DI npm packages. Another DI.

A few words about OOP and DI

. . ES js .

. 2006 , — PERL. . OO , , PERL , 1, 2, .

2 , , , . , . . , .

JavaScript, , . , , .

TypeScript , , - ( ). .

, JS , . JQuery UI Widget Factory. , - , . ES6 classes ES5 . ES6 DI.

(dependency injection) . , , . , DI, .

DI . , — . , (/ , , , , ...). / . , “”, - . — ! DI.

DI — .

— , . Javascript . . , .

.

App ,

Storage — ( singleton/service),

Date, ( ).

- . (transient) “new”.

- (singleton) “one”.

class App {

    /** @type { function( int ):IDate } */
    newDate;

    /** @type { function(): IStorage } */
    oneStorage;

    construct( newDate, oneStorage ) {
        this.newDate = newDate;
        this.oneStorage = oneStorage;
    }

    main() {
        const oDate1 = this.newDate( 0 );
        const oDate2 = this.newDate( 1000 );
        const oStorage = this.oneStorage();
        oStorage.insert( oDate1.format() + ' - ' + oDate2.format() );
    }
}

, . (lazy). , ( inversify: to, toSelf, toConstantValue, toDynamicValue, toConstructor, toFactory, toFunction, toAutoFactory, toProvider, toService), DI . , .

DI . DI , , . DI .

dependency injection

, , , . dependency injection. :

1. , . .
2. , / . , , .
3. , . , , , , / IDE.

DI. , DI , .

DI . , . , , DI .

, , , , , . , - , - , . . — “-” )

dependency injection javascript/typescript

, “di” npm. ~1400. . npm dependents.

Gitcompare

Codesandbox

https://github.com/inversify/InversifyJS

, , , . )). , . )

https://github.com/typestack/typedi

, , . , , App Date, . , ?

https://github.com/thlorenz/proxyquire

, . . DI, .

https://github.com/jeffijoe/awilix

, “Symbol(Symbol.toPrimitive)”, , - Proxy, Date . .

https://github.com/aurelia/dependency-injection

. Aurelia.

https://github.com/stampit-org/stampit

. . - .

https://github.com/microsoft/tsyringe

Microsoft, . , .

https://github.com/boblauer/mock-require

proxyquire.

https://github.com/mgechev/injection-js

Angular 4. , , useFactory .

https://github.com/young-steveo/bottlejs

. .instanceFactory, .

https://github.com/jaredhanson/electrolyte

. ES6 .

https://github.com/zhang740/power-di

. React. . - . , .

https://github.com/jpex-js/vue-inject

vue ES6 . . ES6 classes, provide inject DI. .

https://github.com/zazoomauro/node-dependency-injection

YAML/JS/JSON . . php symfony , setParameter, , .

https://github.com/justmoon/constitute

, , DI .

https://github.com/owja/ioc

inversify, . , : , , . , .

https://github.com/kraut-dps/di-box

, .

, , DI , , .

“”, :

class Service {
    work () {
        console.log('work');
    }
}

class App {
    oneService;
    main () {
        this.oneService().work();
    }
}

//  es6 ,   DI
class AppBox {
    Service;
    App;

    _oService;

    newApp () {
        const oApp = new this.App();

        //   
        oApp.oneService = this.oneService.bind(this);

        return oApp;
    }

    oneService () {
        if (!this._oService) {
            this._oService = new this.Service();
        }
        return this._oService;
    }
}

const oBox = new AppBox();
oBox.Service = Service;
oBox.App = App;
const oApp = oBox.newApp();
oApp.main();

Box , , .

(.one()), bind(this), . :

import {Box} from "di-box";

class Service {
    work() {
        console.log( 'work' );
    }
}

class App {
    oneService;
    main() {
        this.oneService().work();
    }
}

class AppBox extends Box {
    App;
    Service;

    newService() {
        return new this.Service();
    }

    oneService() {
        return this.one( this.newService );
    }

    newApp() {
        const oApp = new this.App();
        oApp.oneService = this.oneService;
        return oApp;
    }
}

const oBox = new AppBox();
oBox.Service = Service;
oBox.App = App;
const oApp = oBox.newApp();
oApp.main();

codesandbox

:

const oBox = new AppBox();
//  oBox.Service = Service;
oBox.App = App;
const oApp = oBox.newApp(); //   :  Service is undefined
oApp.main();

...

DI . , , . , .

:

constructor( arg1, arg2, arg3 ) {}

// 

constructor( { arg1key: arg1, arg2key: arg2, arg3key: arg3 } ) {}

, . ?

1. - .
2. .

ES . , - . DI .

. undefined. . .

:

class A {
    _arg1;
    _arg2;

    constructor( arg1, arg2 = null ) {
        this._arg1 = arg1;
        this._arg2 = arg2;
    }
}
const instance = new A( 1, 2 );

// 

class A {
    arg1; //  ,   
    arg2 = null; //    null !== undefined
}
const instance = new A();
instance.arg1 = 1;
instance.arg2 = 2;

dependency injection , . di-box.

typescript constructor( public arg1: type, public arg2: type ) Box:

new AppBox( { bNeedSelfCheck: false, sNeedCheckPrefix: null } );

codesandbox.

So with di-box we get the opportunity to write in OOP style, with minimal, but sufficient additional code that implements DI. On the one hand, there is prototypal "magic" in the implementation, but on the other hand, it is only at the meta level, and the components themselves can be pure and know nothing about the environment.

I would be glad to discuss it, maybe I missed some other libraries. Or maybe you know how best to implement my example in some of the DI implementations. Write in the comments.