Javascript inner function with colon

问题

I wonder what is the inner function like? I know that you can write following

var obj = {
       test: 'something'
}

But in this code, the innerfunction does not refer to a variable, but to a function. Is there anyother way to write / call the inner function?

function outer(){

    var a = "Outerfunction";
    console.log(a)

    innerFct: function InnerFct()    {                                              
            var c = "Inner";
            console.log(c)
    }innerFct();
}
window.outer();

thank you

回答1:

There are a couple of different things going on here.

In this code:

var obj = {
    test: 'something'
}

you are using "literal object notation" to create -- well, an object with one property test and that property has a value of something

In your second case, you are creating a code block (yes, it is fun that both objects and code blocks use the same syntax {...} to define them.

Inside of a code block, the innerFct: becomes a label. Labels are used with some control flow statements to jump around. Forget about them, you really are better off not using them.

function outer(){
    var a = "Outerfunction";
    console.log(a)

    function innerFct()    {                                              
        var c = "Inner";
        console.log(c)
    }
    innerFct();
}
outer();

or even

function outer(){
    var a = "Outerfunction";
    console.log(a)

    var innerFct = function ()    {                                              
        var c = "Inner";
        console.log(c)
    }
    innerFct();
}
outer();

回答2:

You are confusing functions with objects.

When using an object, the colon is used to show key-value pairs.

var object = {
  innerFct: function(){
    console.log('rawr');
  },
  someVariable: 7
}

object.innerFct(); //logs rawr
object.someVariable = 4; //just changed from 7 to 4

Using a colon how you have it in your example is incorrect syntax. Also when you are creating a function within an object like that, you don't name the function again because you are already assigning it to a name on the object.

Then you can edit the function anytime by doing something like this:

object.innerFct = function(){
  //new code
}

Doing object.innerFct() will call the function.

回答3:

Other answers have sufficiently covered the object syntax and calling the function in scope. As I mentioned in the comment, you can just do this:

function outer(){
    (function () {
        var c = "inner";
        console.log(c)
    })();
}
window.outer();

And it logs inner just fine.

Edit: Private/hidden variables like innerFct in the original code sample can be captured in closures as well.

outer = function() {
    var innerFct = function () { console.log("inner"); }
    // innerFct is captured in the closure of the following functions
    // so it is defined within the scope of those functions, when they are called
    // even though it isn't defined before or after they complete
    window.wrapper = function() { innerFct(); }
    return function() { innerFct(); }
}
outer();

// each of these next three lines logs "inner"
window.wrapper();   // assigned to global variable
outer()();          // calling the returned function
var innerFctBackFromTheDead = outer(); // saving the returned function
innerFctBackFromTheDead();

There is also the object constructor/prototype syntax.

function Outer() {
    this.inner = function() {
        this.c = "inner";
        console.log(this.c);
    }
}

var out = new Outer();
out.c;       // undefined
out.inner(); // logs "inner"
out.c;       // "inner"

More information on the new keyword and prototypes: http://pivotallabs.com/javascript-constructors-prototypes-and-the-new-keyword/

来源：https://stackoverflow.com/questions/15128088/javascript-inner-function-with-colon

标签

javascript

function

colon