JavaScript variable scope - proper use

Question

I read this style guide for angular from johnpapa. There is a snippet:

/*
 * recommend
 * Using function declarations
 * and bindable members up top.
 */
function Avengers(dataservice, logger) {
    var vm = this;
    vm.avengers = [];
    vm.getAvengers = getAvengers;
    vm.title = 'Avengers';

    activate();

    function activate() {
        return getAvengers().then(function() {
            logger.info('Activated Avengers View');
        });
    }

    function getAvengers() {
        return dataservice.getAvengers().then(function(data) {
            vm.avengers = data;
            return vm.avengers;
        });
    }
}

So my question is in functions activate() and getAvengers() , they both reference variable ( dataservice ) and function ( getAvengers() ) outside of their scope. Is this proper use? Should I bind these 2 in the variable vm instead, eg:

vm.getAvengers = getAvengers; 
vm.dataservice = dataservice;
...
function activate() {
    return vm.getAvengers().then(....);
}

function getAvengers() {
    return vm.dataservice.getAvengers().then(.....);
}

Answer 1

Specifically for your case

Would say if you are meaning to use this within angular app would recommend not exposing the service, exposing it through this object does not add value and might down the road, when a less experienced developer modifies your code, might result in wonky access to shared dependencies.

If you want access to the dataservice objects functionality across multiple entities then register it as an angular service, and inject it to the different entities that need it.

In General

Both of the ways you are describing are perfectly correct use, but as is usually the case the answer which to use is "it depends."

Why you would use one for another would be if you wanted to expose the variable externally (ie if you wanted to let others access that object through the returned object, expecting others to dynamically change the service on your object)

So in this example you should ask yourself a few question

1. Do I want to expose this object through another object or do I want to let angular DI pass this along to the other controllers that need this functionality
2. Do I want to allow external entities to modify this object
3. Does exposing this service through my object make the use of the perceived use of this object more confusing?

But again for you should not expose it through your object ( through your variable vm , which is bound to the return object this , in this case ) 您不应通过对象公开它（在这种情况下，通过变量vm ，该变量绑定到返回对象this ）

Answer 2

The vm is a acronym for a view model (a object representation of your view) it is meant to be used within your view to bind elements, ui events to it. The dataservice and the logger seems to nothing to do with the view at all, they are just services used within a controller. If you assign them to the vm then you probably create a tightly coupling between your view and services thus it seems like a not a very good idea to me. You can think about the VM as a interface (glue) between your view and controller.

Here is a picture of the interactions between view model, controller, view and services.