如何调用在另一个函数中声明的子函数

Question

Function b is declared inside function a. So, i am trying to call function b outside function a. It is not getting called.

var a = function() {
  alert("a");
  var b = function() {
    alert("b");
  }
}

Output:- function b called Alert box with message b

Answer 1

You'd need to return b and use that. This will involve calling the function a to begin with, but then you'd have a function which you could call repeatedly to alert b :

 var a = function() { alert("a"); var b = function() { alert("b"); } return b; } var messageB = a(); messageB(); messageB(); 

Answer 2

Try to declare 'b' variable outside 'a' function:

var b;
var a = function() {
    alert("a");
    b = function() {
        alert("b");
    };
};

That way, you can access b from outside of a as it is declared outside of it. Before a was called the first time, it will be undefined though, so you can't call b before a . Additionally if you call a twice, the previous b will be overriden., as shown here:

  var b;

  var a = function(name) {
    b = function() { alert(name); };
  };

  a("first version");
  b(); // first version
  a("second version");
  b(); // second version

If you don't need any inner variables from a inside b , there is no reason to nest the functions though, in that case you should just have two independent functions:

  var a = function() { alert("a"); };
  var b = function() { alert("b"); };

Answer 3

First return that function and call it,

 var a = function() { alert("a"); var b = function() { alert("b"); } return b; } var b = a(); b(); 

Answer 4

As mentioned you can simply return function b. Functions in Javascript can be passed around like this, it's a very nice feature of a garbage collected language.

But you can go even better, what if you wanted to expose more than one function.

You can just return an object with methods attached.

 function A() { let value = 0; return { inc: () => ++ value, dec: () => -- value, show: () => console.log(value) } } const a1 = A(); a1.inc(); a1.inc(); a1.show(); const b1 = A(); b1.inc(); b1.dec(); b1.dec(); b1.show(); 

Now the above looks very similar to what's called a class but it's not. One disadvantage to this is if you wanted to create thousands of instances, a class would be better as that can put it's methods on the prototype. But saying that, as has been found using React Hooks it's not really that bad then.

One big advantage of the above, is you don't have to get into the muddy world of this context of instances.

For completeness here is a class version.

 class A { value = 0; inc() { ++ this.value; } dec() { -- this.value; } show() { console.log(this.value) } }; const a1 = new A(); a1.inc(); a1.inc(); a1.show(); const b1 = new A(); b1.inc(); b1.dec(); b1.dec(); b1.show(); 

It was also said a simple solution is to make a and b both global, but the more you avoid the global the better, so if a and b have some common intent, using closures or even a class would be better.

Answer 5

or if you would need object approch

`var a = function() {
  print("a");
  this.b = function() {
    print("b");
  }
  return this
}
a().b()`

Answer 6

All the other answer's are great enough, but just in case you may like this approach of directly calling inner function without returning that function.

You can simply wrap your inner function ie b in your case, as a self invoking function like this,

var a = function() {
  alert("a");
  var b = (function() {
    alert("b");
  })()
}

Ref