nhuyvan1106 Posted May 21, 2014 Share Posted May 21, 2014 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 comment Share on other sites More sharing options...
Ingolme Posted May 21, 2014 Share Posted May 21, 2014 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);} 1 Link to comment Share on other sites More sharing options...
Hadien Posted May 22, 2014 Share Posted May 22, 2014 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 1 Link to comment Share on other sites More sharing options...
nhuyvan1106 Posted May 23, 2014 Author Share Posted May 23, 2014 (edited) Thank you so much guys. Edited May 23, 2014 by nhuyvan1106 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now