Returning Reference to Function Definition When Using Self-Invocation

I have this code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Untitled</title>
	<meta name="generator" content="BBEdit 9.6">
	
	<script type="text/javascript">
	
		window.onload = function() {
		
			document.getElementById('item')['onclick'] = (function() {
			
				var x = function() { alert('Clicked'); };
				x();
				return x;
				
			})();
		
		};
	
	</script>
	
</head>
<body>

	<div id="item" style="width:20px;height:20px;background-color:red;"></div>

</body>
</html>

What I would like to know is if there is a way to simplify it and return a reference to the function from within the function itself? Obviously this doesn’t work as shown below.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Untitled</title>
	<meta name="generator" content="BBEdit 9.6">
	
	<script type="text/javascript">
	
		window.onload = function() {
		
			document.getElementById('item')['onclick'] = (function() {
			
				// alert once and after whenever the item is clicked
				alert('Clicked');
				return this; // this is the window object - is there a way to reference the function definition?
				
			})();
		
		};
	
	</script>
	
</head>
<body>

	<div id="item" style="width:20px;height:20px;background-color:red;"></div>

</body>
</html>

The practical scenario is I have several functions attached to the jQuery ajaxSucess event. Each function needs to execute once during initial load and after when the JQuery ajaxSuccess event is fired. So I am just looking to see if I can eliminate a a few lines of code and learn something new in the process, that is really all.

Hi,
I don’t know if I fully got your needs but this is my attempt
it alert once and after whenever the item is clicked.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <meta name="generator" content="BBEdit 9.6">
    
    <script type="text/javascript">
    
        window.onload = function() {
        
            document.getElementById('item')['onclick'] = (function(f) {
                // alert once and after whenever the item is clicked
                f();
                return f; // 
                
            })(function(){alert('Clicked')});
        
        };
    
    </script>
    
</head>
<body>

    <div id="item" style="width:20px;height:20px;background-color:red;"></div>

</body>
</html>

Bye

That is essentially the same thing as my first code post. The idea is to only declare the single function, rather than two. That is what I am after.

arguments.callee will give you the contents of the current function.


return arguments.callee;


window.onload = function() {
        
            document.getElementById('item')['onclick'] = (function() {
            
                // alert once and after whenever the item is clicked
                alert('Clicked');
                return arguments.callee; // this is the window object - is there a way to reference the function definition?
                
            })();
        
        };

but is deprecated.

Ps
Sorry I didn’t see the paul_wilkins reply

caller is deprecated, but according to MDC’s arguments documentation, callee is still fine.

callee as a property of Function was deprecated. It is callee as a property of Object, which is used above, which is perfectly fine.

In my test when alerting arguments.callee from within the function, the contents of that function were alerted out just fine.

Ahh, here it is.

JavaScript 1.4: Deprecated callee as a property of Function.arguments, retained it as a property of a function’s local arguments variable.

arguments.callee is the proper way to to it.

perfect, thanks

I knew there had to be a way to do it.