Function becomes undefined when declaring local va

问题:

I have declared a function in file so that it becomes global:

function speakService() {

    var speakService = {};

    var speak = function(word) {
        console.log(word);
    };

    speakService.speak = speak;

    return speakService;
}

Using AngularJS, I want to add this service as dependency:

angular
    .module('login', ['ngRoute'])
    .factory('speakService', [function() {
        var speakService = speakService();
        return speakService;
    }]);

But as soon as the interpreter hits the line:

var speakService = speakService();

the speakService()-function is undefined. If I change the speakService variable to speakSvc like this it works fine:

var speakSvc = speakService();

Can somebody explain why my global function is undefined when declaring a local variable with the same name?

Regards!

回答1:

The reason why the variable appears to be undefined is hoisting. When you write something like var x = 3 the definition of x is hoisted to the top of the current scope (functional in this case since you are using var). The assignment itself happens when you hit that particular line.

So in your specific case, when you enter the scope of that variable you define it var speakService first, which hides the function speakService from the rest of the scope. Then you try to execute the line speakService = speakService() and since speakService is just an uninitialized variable you get undefined.

回答2:

It's because of javascript's hoisting

function() {
        var speakService = speakService();
        return speakService;
    }

Will be same as

function() {
        var speakService; //Declaration moved to top
        speakService = speakService(); //here speakService is undefined
        return speakService;
    }

回答3:

Like others have said, your issue is hoisting. Just return an object literal and use the IIFE pattern.

var myService = (function speakService() {
    var speak = function(word) {
        console.log(word);
    };
  
    return {
      speak: speak
    };
})();

myService.speak("TEST");