Calling a Function defined inside another function in Javascript - Stack Overflow

admin管理员组

文章数量:1134247

I am calling a function on button click like this:

<input type="button" onclick="outer();" value="ACTION">​

function outer() { 
    alert("hi");       
}

It works fine and I get an alert:

Now when I do like this:

function outer() { 
    function inner() {
        alert("hi");
    }
}

Why don't I get an alert?

Though inner function has a scope available in outer function.

I am calling a function on button click like this:

<input type="button" onclick="outer();" value="ACTION">​

function outer() { 
    alert("hi");       
}

It works fine and I get an alert:

Now when I do like this:

function outer() { 
    function inner() {
        alert("hi");
    }
}

Why don't I get an alert?

Though inner function has a scope available in outer function.

• javascript
• function
• scope

Share Improve this question Follow edited Oct 11, 2017 at 6:22 ROMANIA_engineer 56.6k3030 gold badges208208 silver badges205205 bronze badges asked Nov 4, 2012 at 12:22 MikeMike 3,4081111 gold badges4646 silver badges8080 bronze badges 1

• 2 Where do you try to call inner? – Bergi Commented Nov 4, 2012 at 12:47

Add a comment  | 

12 Answers 12

Sorted by: Reset to default 80

You could make it into a module and expose your inner function by returning it in an Object.

function outer() { 
    function inner() {
        console.log("hi");
    }
    return {
        inner: inner
    };
}
var foo = outer();
foo.inner();

The scoping is correct as you've noted. However, you are not calling the inner function anywhere.

You can do either:

function outer() { 

    // when you define it this way, the inner function will be accessible only from 
    // inside the outer function

    function inner() {
        alert("hi");
    }
    inner(); // call it
}

Or

function outer() { 
    this.inner = function() {
        alert("hi");
    }
}

<input type="button" onclick="(new outer()).inner();" value="ACTION">​

You are not calling the function inner, just defining it.

function outer() { 
    function inner() {
        alert("hi");
    }

    inner(); //Call the inner function

}

You can also try this.Here you are returning the function "inside" and invoking with the second set of parenthesis.

function outer() {
  return (function inside(){
    console.log("Inside inside function");
  });
}
outer()();

Or

function outer2() {
    let inside = function inside(){
      console.log("Inside inside");
    };
    return inside;
  }
outer2()();

Again, not a direct answer to the question, but was led here by a web search. Ended up exposing the inner function without using return, etc. by simply assigning it to a global variable.

var fname;

function outer() {
    function inner() {
        console.log("hi");
    }
    fname = inner;
}

Now just

fname();

you can also just use return:

   function outer() { 
    function inner() {
        alert("hi");
    }
return inner();

}
outer();

function parent() {
    this.child1 = function child1(string){
        console.log(string);
    }
    this.child2 = function child2(string){
        console.log(string);
    }
}

new parent().child1("hello world child1");
new parent().child2("hello world child2");

Output:

"hello world child1"

"hello world child2"

If you want to call the "inner" function with the "outer" function, you can do this:

function outer() { 
     function inner() {
          alert("hi");
     }
     return { inner };
}

And on "onclick" event you call the function like this:

<input type="button" onclick="outer().inner();" value="ACTION">​

function outer() { 

    function inner() {
        alert("hi");
    }
    inner();
}

you should try this

In JavaScript

If using ES6
static functions can be used in a class

If using ES5
After several days of usage, below is what I came up with,
it is minimal & also has a lot of conveniences:

function MathFunctions() {
    let thefo = {}; // the functions object

    thefo.sum = sum = (a, b) => {
        return a + b;
    };
    thefo.avg = avg = (a, b) => {            // name is repeated 2 times - minor inconvenience
        return sum(a, b) / 2;                // calls sum, another function without using 'this'
    };

    return thefo;                            // no need to go down & export here always for each new function - major convenience
}

// Usage
console.log(MathFunctions().sum(1, 2));
console.log(MathFunctions().avg(1, 2));
// OR
const mf = MathFunctions();
console.log(mf.sum(1, 2));
console.log(mf.avg(1, 2));

Try This Solution

const greet = (greeting) => {
    return function (name) {
        console.log(`${greeting} ${name}`);
    };
};

greet('Hi !')('JAHID');

You can write like this

function outer() { 
function inner() {
    alert("hi");
}
return {inner}
}

https://medium.com/@mikkanthrope/dot-notation-to-access-nested-functions-in-javascript-fab346c65d9a This page provides in depth explanation

Now you can call it like this

outer().inner();

本文标签： Calling a Function defined inside another function in JavascriptStack Overflow