Jump to content

What is global function? (Yes global function not global variable)

Recommended Posts

Hi guys, I just have a dumb question but looks like I can't find the answer anywhere at all. What is a global function? specifically, how do I determine the scope of a function? I know the definition of the variable scope, but function scope, I don't, hope you guys could clarify this for me.


One more thing. I have this code down below about the "this" keyword. Doesn't the "this" keyword refer to the element that triggers the event? if so, why it pops up "undefined" when I click on the paragraph? I'm pretty positive "this" in my case is bound to a global variable(that's why it gives me an "undefined" id) which is the window object, but I don't understand why "this" is not referring to the "<p>" element at all. Any tips and hints are greatly appreciated brothers(Please take it easy on me if I sound dumb, I just started teaching myself JS a couple weeks ago or so, so)


Thank you very much guys.

<!DOCTYPE html><html><head><script>function myFunction(){ alert(this.id);}</script></head><body><p id = "myPa" onclick="myFunction()">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p></body></html>
Link to post
Share on other sites

That function is global, therefore "this" refers to the window object. The scope of a function is the same as the scope of a variable, it depends on where it was defined. Most of the time functions are defined in the global scope.


If you want to pass the element to the function, use this inside the onclick attribute:

<p id="myPa" onclick="myFunction(this)">function myFunction(element) {    alert(element.id);}
  • Like 1
Link to post
Share on other sites

Pay attention to the indents here... they help show the different scopes:

/** Global Scope. everything defined at this indent is accessible here and higher indents**/    var object = {    /**    Object Scope. can access anything inside this scope and lower scopes, like Global    **/    }    function myFunction(){    /**    function Scope. can access lower indent scopes and it's own scope    **/        var myClosure = {        /**        Another object Scope... but how I'll use it makes it a closure scope        **/        }        return myClosure; // returns a closure scope    }    (function(){    /**    anonymous function scope    not visible on the global scope. code written in these parenths are worked on    but varibles aren't automatically set to any other scope unless specifically     told to do so    **/    })()

in my example Closure Scopes, when returned, will have direct access to itself and global scopes. and yet it can also indirectly access the function scope, but only if a function was defined inside that closure scope. You can use this to your advantage by writing private variables/functions inside the function scope, and public variables/functions in the closure scope.


Anonymous scopes are useful when you want to run a function only once and immediately when its defined. The function isn't registered anywhere so no one can recall it.


the "this" keyword isn't defined in the global scope when an event runs, but in that very, very, local scope between the quotes in the html's onclick. So, as Ingolme says, you need to pass "this" to another scope via a function argument or setting "this" to a pre-defined global variable

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...