function main()
{
Hello();
}
function Hello()
{
// How do you find out the caller function is 'main'?
}
Is there a way to find out the call stack?
Note that this solution is deprecated and should no longer be used according to MDN documentation
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/caller
function Hello()
{
alert("caller is " + Hello.caller);
}
Note that this feature is non-standard, from Function.caller:
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The following is the old answer from 2008, which is no longer supported in modern Javascript:
function Hello()
{
alert("caller is " + arguments.callee.caller.toString());
}
StackTrace
You can find the entire stack trace using browser specific code. The good thing is someone already made it; here is the project code on GitHub.
But not all the news is good:
It is really slow to get the stack trace so be careful (read this for more).
You will need to define function names for the stack trace to be legible. Because if you have code like this:
var Klass = function kls() {
this.Hello = function() { alert(printStackTrace().join('\n\n')); };
}
new Klass().Hello();
Google Chrome will alert ... kls.Hello ( ... but most browsers will expect a function name just after the keyword function and will treat it as an anonymous function. An not even Chrome will be able to use the Klass name if you don't give the name kls to the function.
And by the way, you can pass to the function printStackTrace the option {guess: true} but I didn't find any real improvement by doing that.
Not all browsers give you the same information. That is, parameters, code column, etc.
Caller Function Name
By the way, if you only want the name of the caller function (in most browsers, but not IE) you can use:
arguments.callee.caller.name
But note that this name will be the one after the function keyword. I found no way (even on Google Chrome) to get more than that without getting the code of the whole function.
Caller Function Code
And summarizing the rest of the best answers (by Pablo Cabrera, nourdine, and Greg Hewgill). The only cross-browser and really safe thing you can use is:
arguments.callee.caller.toString();
Which will show the code of the caller function. Sadly, that is not enough for me, and that is why I give you tips for the StackTrace and the caller function Name (although they are not cross-browser).
I usually use (new Error()).stack in Chrome.
The nice thing is that this also gives you the line numbers where the caller called the function. The downside is that it limits the length of the stack to 10, which is why I came to this page in the first place.
(I'm using this to collect callstacks in a low-level constructor during execution, to view and debug later, so setting a breakpoint isn't of use since it will be hit thousands of times)
I know you mentioned "in Javascript", but if the purpose is debugging, I think it's easier to just use your browser's developer tools. This is how it looks in Chrome:
Just drop the debugger where you want to investigate the stack.
In both ES6 and Strict mode, use the following to get the Caller function
console.log((new Error()).stack.split("\n")[2].trim().split(" ")[1])
Please note that, the above line will throw an exception if there is no caller or no previous stack. Use accordingly.
To get callee (the current function name), use:
console.log((new Error()).stack.split("\n")[1].trim().split(" ")[1])
If you are not going to run it in IE < 11 then console.trace() would suit.
function main() {
Hello();
}
function Hello() {
console.trace()
}
main()
// Hello # VM261:9
// main # VM261:4
You can get the full stacktrace:
arguments.callee.caller
arguments.callee.caller.caller
arguments.callee.caller.caller.caller
Until caller is null.
Note: it cause an infinite loop on recursive functions.
To recap (and make it clearer) ...
this code:
function Hello() {
alert("caller is " + arguments.callee.caller.toString());
}
is equivalent to this:
function Hello() {
alert("caller is " + Hello.caller.toString());
}
Clearly the first bit is more portable, since you can change the name of the function, say from "Hello" to "Ciao", and still get the whole thing to work.
In the latter, in case you decide to refactor the name of the invoked function (Hello), you would have to change all its occurrences :(
I would do this:
function Hello() {
console.trace();
}
You can use Function.Caller to get the calling function. The old method using argument.caller is considered obsolete.
The following code illustrates its use:
function Hello() { return Hello.caller;}
Hello2 = function NamedFunc() { return NamedFunc.caller; };
function main()
{
Hello(); //both return main()
Hello2();
}
Notes about obsolete argument.caller: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller
Be aware Function.caller is non-standard: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/caller
Looks like this is quite a solved question but I recently found out that callee is not allowed in 'strict mode' so for my own use I wrote a class that will get the path from where it is called. It's part of a small helper lib and if you want to use the code standalone change the offset used to return the stack trace of the caller (use 1 instead of 2)
function ScriptPath() {
var scriptPath = '';
try {
//Throw an error to generate a stack trace
throw new Error();
}
catch(e) {
//Split the stack trace into each line
var stackLines = e.stack.split('\n');
var callerIndex = 0;
//Now walk though each line until we find a path reference
for(var i in stackLines){
if(!stackLines[i].match(/http[s]?:\/\//)) continue;
//We skipped all the lines with out an http so we now have a script reference
//This one is the class constructor, the next is the getScriptPath() call
//The one after that is the user code requesting the path info (so offset by 2)
callerIndex = Number(i) + 2;
break;
}
//Now parse the string for each section we want to return
pathParts = stackLines[callerIndex].match(/((http[s]?:\/\/.+\/)([^\/]+\.js)):/);
}
this.fullPath = function() {
return pathParts[1];
};
this.path = function() {
return pathParts[2];
};
this.file = function() {
return pathParts[3];
};
this.fileNoExt = function() {
var parts = this.file().split('.');
parts.length = parts.length != 1 ? parts.length - 1 : 1;
return parts.join('.');
};
}
heystewart's answer and JiarongWu's answer both mentioned that the Error object has access to the stack.
Here's an example:
function main() {
Hello();
}
function Hello() {
try {
throw new Error();
} catch (err) {
let stack = err.stack;
// N.B. stack === "Error\n at Hello ...\n at main ... \n...."
let m = stack.match(/.*?Hello.*?\n(.*?)\n/);
if (m) {
let caller_name = m[1];
console.log("Caller is:", caller_name);
}
}
}
main();
Different browsers shows the stack in different string formats:
Safari : Caller is: main#https://stacksnippets.net/js:14:8
Firefox : Caller is: main#https://stacksnippets.net/js:14:3
Chrome : Caller is: at main (https://stacksnippets.net/js:14:3)
IE Edge : Caller is: at main (https://stacksnippets.net/js:14:3)
IE : Caller is: at main (https://stacksnippets.net/js:14:3)
Most browsers will set the stack with var stack = (new Error()).stack. In Internet Explorer the stack will be undefined - you have to throw a real exception to retrieve the stack.
Conclusion: It's possible to determine "main" is the caller to "Hello" using the stack in the Error object. In fact it will work in cases where the callee / caller approach doesn't work. It will also show you context, i.e. source file and line number. However effort is required to make the solution cross platform.
function Hello() {
alert(Hello.caller);
}
It's safer to use *arguments.callee.caller since arguments.caller is deprecated...
2018 Update
caller is forbidden in strict mode. Here is an alternative using the (non-standard) Error stack.
The following function seems to do the job in Firefox 52 and Chrome 61-71 though its implementation makes a lot of assumptions about the logging format of the two browsers and should be used with caution, given that it throws an exception and possibly executes two regex matchings before being done.
'use strict';
const fnNameMatcher = /([^(]+)#|at ([^(]+) \(/;
function fnName(str) {
const regexResult = fnNameMatcher.exec(str);
return regexResult[1] || regexResult[2];
}
function log(...messages) {
const logLines = (new Error().stack).split('\n');
const callerName = fnName(logLines[1]);
if (callerName !== null) {
if (callerName !== 'log') {
console.log(callerName, 'called log with:', ...messages);
} else {
console.log(fnName(logLines[2]), 'called log with:', ...messages);
}
} else {
console.log(...messages);
}
}
function foo() {
log('hi', 'there');
}
(function main() {
foo();
}());
Try accessing this:
arguments.callee.caller.name
Just console log your error stack. You can then know how are you being called
const hello = () => {
console.log(new Error('I was called').stack)
}
const sello = () => {
hello()
}
sello()
I wanted to add my fiddle here for this:
http://jsfiddle.net/bladnman/EhUm3/
I tested this is chrome, safari and IE (10 and 8). Works fine. There is only 1 function that matters, so if you get scared by the big fiddle, read below.
Note:
There is a fair amount of my own "boilerplate" in this fiddle. You can remove all of that and use split's if you like. It's just an ultra-safe" set of functions I've come to rely on.
There is also a "JSFiddle" template in there that I use for many fiddles to simply quick fiddling.
If you just want the function name and not the code, and want a browser-independent solution, use the following:
var callerFunction = arguments.callee.caller.toString().match(/function ([^\(]+)/)[1];
Note that the above will return an error if there is no caller function as there is no [1] element in the array. To work around, use the below:
var callerFunction = (arguments.callee.caller.toString().match(/function ([^\(]+)/) === null) ? 'Document Object Model': arguments.callee.caller.toString().match(/function ([^\(]+)/)[1], arguments.callee.toString().match(/function ([^\(]+)/)[1]);
Here, everything but the functionname is stripped from caller.toString(), with RegExp.
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Show the callers name</title><!-- This validates as html5! -->
<script>
main();
function main() { Hello(); }
function Hello(){
var name = Hello.caller.toString().replace(/\s\([^#]+$|^[^\s]+\s/g,'');
name = name.replace(/\s/g,'');
if ( typeof window[name] !== 'function' )
alert ("sorry, the type of "+name+" is "+ typeof window[name]);
else
alert ("The name of the "+typeof window[name]+" that called is "+name);
}
</script>
Just want to let you know that on PhoneGap/Android the name doesnt seem to be working. But arguments.callee.caller.toString() will do the trick.
here is a function to get full stacktrace:
function stacktrace() {
var f = stacktrace;
var stack = 'Stack trace:';
while (f) {
stack += '\n' + f.name;
f = f.caller;
}
return stack;
}
Note you can't use Function.caller in Node.js, use caller-id package instead. For example:
var callerId = require('caller-id');
function foo() {
bar();
}
function bar() {
var caller = callerId.getData();
/*
caller = {
typeName: 'Object',
functionName: 'foo',
filePath: '/path/of/this/file.js',
lineNumber: 5,
topLevelFlag: true,
nativeFlag: false,
evalFlag: false
}
*/
}
Works great for me, and you can chose how much you want to go back in the functions:
function getCaller(functionBack= 0) {
const back = functionBack * 2;
const stack = new Error().stack.split('at ');
const stackIndex = stack[3 + back].includes('C:') ? (3 + back) : (4 + back);
const isAsync = stack[stackIndex].includes('async');
let result;
if (isAsync)
result = stack[stackIndex].split(' ')[1].split(' ')[0];
else
result = stack[stackIndex].split(' ')[0];
return result;
}
I could use these in 2021 and get the stack which starts from the caller function :
1. console.trace();
2. console.log((new Error).stack)
// do the same as #2 just with better view
3. console.log((new Error).stack.split("\n"))
Try the following code:
function getStackTrace(){
var f = arguments.callee;
var ret = [];
var item = {};
var iter = 0;
while ( f = f.caller ){
// Initialize
item = {
name: f.name || null,
args: [], // Empty array = no arguments passed
callback: f
};
// Function arguments
if ( f.arguments ){
for ( iter = 0; iter<f.arguments.length; iter++ ){
item.args[iter] = f.arguments[iter];
}
} else {
item.args = null; // null = argument listing not supported
}
ret.push( item );
}
return ret;
}
Worked for me in Firefox-21 and Chromium-25.
Another way around this problem is to simply pass the name of the calling function as a parameter.
For example:
function reformatString(string, callerName) {
if (callerName === "uid") {
string = string.toUpperCase();
}
return string;
}
Now, you could call the function like this:
function uid(){
var myString = "apples";
reformatString(myString, function.name);
}
My example uses a hard coded check of the function name, but you could easily use a switch statement or some other logic to do what you want there.
As far as I know, we have 2 way for this from given sources like this-
arguments.caller
function whoCalled()
{
if (arguments.caller == null)
console.log('I was called from the global scope.');
else
console.log(arguments.caller + ' called me!');
}
Function.caller
function myFunc()
{
if (myFunc.caller == null) {
return 'The function was called from the top!';
}
else
{
return 'This function\'s caller was ' + myFunc.caller;
}
}
Think u have your answer :).
Why all of the solutions above look like a rocket science. Meanwhile, it should not be more complicated than this snippet. All credits to this guy
How do you find out the caller function in JavaScript?
var stackTrace = function() {
var calls = [];
var caller = arguments.callee.caller;
for (var k = 0; k < 10; k++) {
if (caller) {
calls.push(caller);
caller = caller.caller;
}
}
return calls;
};
// when I call this inside specific method I see list of references to source method, obviously, I can add toString() to each call to see only function's content
// [function(), function(data), function(res), function(l), function(a, c), x(a, b, c, d), function(c, e)]
I think the following code piece may be helpful:
window.fnPureLog = function(sStatement, anyVariable) {
if (arguments.length < 1) {
throw new Error('Arguments sStatement and anyVariable are expected');
}
if (typeof sStatement !== 'string') {
throw new Error('The type of sStatement is not match, please use string');
}
var oCallStackTrack = new Error();
console.log(oCallStackTrack.stack.replace('Error', 'Call Stack:'), '\n' + sStatement + ':', anyVariable);
}
Execute the code:
window.fnPureLog = function(sStatement, anyVariable) {
if (arguments.length < 1) {
throw new Error('Arguments sStatement and anyVariable are expected');
}
if (typeof sStatement !== 'string') {
throw new Error('The type of sStatement is not match, please use string');
}
var oCallStackTrack = new Error();
console.log(oCallStackTrack.stack.replace('Error', 'Call Stack:'), '\n' + sStatement + ':', anyVariable);
}
function fnBsnCallStack1() {
fnPureLog('Stock Count', 100)
}
function fnBsnCallStack2() {
fnBsnCallStack1()
}
fnBsnCallStack2();
The log looks like this:
Call Stack:
at window.fnPureLog (<anonymous>:8:27)
at fnBsnCallStack1 (<anonymous>:13:5)
at fnBsnCallStack2 (<anonymous>:17:5)
at <anonymous>:20:1
Stock Count: 100
I want execute JavaScript function which the name is coming as a string dynamically.
I don't need to pass any parameters while executing the function.
Please can any one guide me how to achieve this?
one simple way
eval("SomeFunction()");
or
var funcName = "SomeFunction";
var func == window[funcName];
func();
dangerous but you could use eval(method_name+"()")
are you talking about ´eval()´??
var foo = "alert('bar')";
eval(foo);
Hope this helps;
function a() {
console.log('yeah!');
}
var funcName = 'a'; // get function name
this[funcName]();
If the function is global, you should do window[funcName]() in browser.
Using eval is the worst way imaginable. Avoid that at all costs.
You can use window[functionname]() like this:
function myfunction() {
alert('test');
}
var functionname = 'myfunction';
window[functionname]();
This way you can optionally add arguments as well
Perhaps a safer way is to do something like this (pseudo code only here):
function executer(functionName)
{
if (functionName === "blammo")
{
blammo();
}
else if (functionName === "kapow")
{
kapow();
}
else // unrecognized function name
{
// do something.
}
You might use a switch statement for this (it seems like a better construct):
switch (functionName)
{
case "blammo":
blammo();
break;
case "kapow":
kapow();
break;
default:
// unrecognized function name.
}
You can optimize this by creating an array of function names, searching the array for the desired function name, then executing the value in the array.
How is it possible to learn the name of function I am in?
The below code alerts 'Object'. But I need to know how to alert "Outer."
function Outer(){
alert(typeof this);
}
This will work:
function test() {
var z = arguments.callee.name;
console.log(z);
}
I think that you can do that :
var name = arguments.callee.toString();
For more information on this, take a look at this article.
function callTaker(a,b,c,d,e){
// arguments properties
console.log(arguments);
console.log(arguments.length);
console.log(arguments.callee);
console.log(arguments[1]);
// Function properties
console.log(callTaker.length);
console.log(callTaker.caller);
console.log(arguments.callee.caller);
console.log(arguments.callee.caller.caller);
console.log(callTaker.name);
console.log(callTaker.constructor);
}
function callMaker(){
callTaker("foo","bar",this,document);
}
function init(){
callMaker();
}
As of ES6, you can use Function.prototype.name. This has the added benefit of working with arrow functions, since they do not have their own arguments object.
function logFuncName() {
console.log(logFuncName.name);
}
const logFuncName2 = () => {
console.log(logFuncName2.name);
};
Took me a while to figure this out, so tried to make it very clear for rookies like me.
Approach 1 - arguments.callee.name
This approach used to work, but now in ES6 Strict Mode it will fail. Don't use Approach 1.
//approach 1 - don't use
let functionName = arguments.callee.name;
console.log(functionName);
Approach 2 - create a function and use caller.name
This approach works in the latest version of Javascript and will not fail in Strict Mode. Use Approach 2. There are 2 steps.
Step 1 - Create a function that uses caller.name to return the name of the function that called it. Add this function to your code:
function getFuncName() {
return getFuncName.caller.name
}
Step 2 - Call your function when you need the name of the function your code is currently in.
function iWantThisName() {
console.log(getFuncName())
}
iWantThisName()
// Logs: "iWantThisName"
I have a function, a(), that I want to override, but also have the original a() be performed in an order depending on the context. For example, sometimes when I'm generating a page I'll want to override like this:
function a() {
new_code();
original_a();
}
and sometimes like this:
function a() {
original_a();
other_new_code();
}
How do I get that original_a() from within the over-riding a()? Is it even possible?
Please don't suggest alternatives to over-riding in this way, I know of many. I'm asking about this way specifically.
You could do something like this:
var a = (function() {
var original_a = a;
if (condition) {
return function() {
new_code();
original_a();
}
} else {
return function() {
original_a();
other_new_code();
}
}
})();
Declaring original_a inside an anonymous function keeps it from cluttering the global namespace, but it's available in the inner functions.
Like Nerdmaster mentioned in the comments, be sure to include the () at the end. You want to call the outer function and store the result (one of the two inner functions) in a, not store the outer function itself in a.
The Proxy pattern might help you:
(function() {
// log all calls to setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function() {
console.log( this, arguments );
return proxied.apply( this, arguments );
};
})();
The above wraps its code in a function to hide the "proxied"-variable. It saves jQuery's setArray-method in a closure and overwrites it. The proxy then logs all calls to the method and delegates the call to the original. Using apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method.
Thanks guys the proxy pattern really helped.....Actually I wanted to call a global function foo..
In certain pages i need do to some checks. So I did the following.
//Saving the original func
var org_foo = window.foo;
//Assigning proxy fucnc
window.foo = function(args){
//Performing checks
if(checkCondition(args)){
//Calling original funcs
org_foo(args);
}
};
Thnx this really helped me out
You can override a function using a construct like:
function override(f, g) {
return function() {
return g(f);
};
}
For example:
a = override(a, function(original_a) {
if (condition) { new_code(); original_a(); }
else { original_a(); other_new_code(); }
});
Edit: Fixed a typo.
Passing arbitrary arguments:
a = override(a, function(original_a) {
if (condition) { new_code(); original_a.apply(this, arguments) ; }
else { original_a.apply(this, arguments); other_new_code(); }
});
The answer that #Matthew Crumley provides is making use of the immediately invoked function expressions, to close the older 'a' function into the execution context of the returned function. I think this was the best answer, but personally, I would prefer passing the function 'a' as an argument to IIFE. I think it is more understandable.
var a = (function(original_a) {
if (condition) {
return function() {
new_code();
original_a();
}
} else {
return function() {
original_a();
other_new_code();
}
}
})(a);
The examples above don't correctly apply this or pass arguments correctly to the function override. Underscore _.wrap() wraps existing functions, applies this and passes arguments correctly. See: http://underscorejs.org/#wrap
In my opinion the top answers are not readable/maintainable, and the other answers do not properly bind context. Here's a readable solution using ES6 syntax to solve both these problems.
const orginial = someObject.foo;
someObject.foo = function() {
if (condition) orginial.bind(this)(...arguments);
};
I had some code written by someone else and wanted to add a line to a function which i could not find in the code. So as a workaround I wanted to override it.
None of the solutions worked for me though.
Here is what worked in my case:
if (typeof originalFunction === "undefined") {
originalFunction = targetFunction;
targetFunction = function(x, y) {
//Your code
originalFunction(a, b);
//Your Code
};
}
I've created a small helper for a similar scenario because I often needed to override functions from several libraries. This helper accepts a "namespace" (the function container), the function name, and the overriding function. It will replace the original function in the referred namespace with the new one.
The new function accepts the original function as the first argument, and the original functions arguments as the rest. It will preserve the context everytime. It supports void and non-void functions as well.
function overrideFunction(namespace, baseFuncName, func) {
var originalFn = namespace[baseFuncName];
namespace[baseFuncName] = function () {
return func.apply(this, [originalFn.bind(this)].concat(Array.prototype.slice.call(arguments, 0)));
};
}
Usage for example with Bootstrap:
overrideFunction($.fn.popover.Constructor.prototype, 'leave', function(baseFn, obj) {
// ... do stuff before base call
baseFn(obj);
// ... do stuff after base call
});
I didn't create any performance tests though. It can possibly add some unwanted overhead which can or cannot be a big deal, depending on scenarios.
So my answer ended up being a solution that allows me to use the _this variable pointing to the original object.
I create a new instance of a "Square" however I hated the way the "Square" generated it's size. I thought it should follow my specific needs. However in order to do so I needed the square to have an updated "GetSize" function with the internals of that function calling other functions already existing in the square such as this.height, this.GetVolume(). But in order to do so I needed to do this without any crazy hacks. So here is my solution.
Some other Object initializer or helper function.
this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
this.viewerContainer)
var viewer = this.viewer;
viewer.updateToolbarButtons = this.updateToolbarButtons(viewer);
Function in the other object.
updateToolbarButtons = function(viewer) {
var _viewer = viewer;
return function(width, height){
blah blah black sheep I can refer to this.anything();
}
};
Not sure if it'll work in all circumstances, but in our case, we were trying to override the describe function in Jest so that we can parse the name and skip the whole describe block if it met some criteria.
Here's what worked for us:
function describe( name, callback ) {
if ( name.includes( "skip" ) )
return this.describe.skip( name, callback );
else
return this.describe( name, callback );
}
Two things that are critical here:
We don't use an arrow function () =>.
Arrow functions change the reference to this and we need that to be the file's this.
The use of this.describe and this.describe.skip instead of just describe and describe.skip.
Again, not sure it's of value to anybody but we originally tried to get away with Matthew Crumley's excellent answer but needed to make our method a function and accept params in order to parse them in the conditional.