edit-article
Home
Up
Delete
Article Name:
Article Description:
by Don Sagrott - Understanding the 'this' keyword in javascript
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;"> </h1> <h1 style="text-align: center;">this</h1> <h2>[WHAT]</h2> <ol> <li>] this - is a keyword in the javascript (and other) programming languages</li> <li>] this - is used as a shortcut reference to refer to the current object,</li> <li>] this - 'refers' to the object that invokes the call to this <span style="text-decoration: line-through;">...., ( aka the currently active object )</span></li> <ol> <li><strong>] First, know that all functions in JavaScript have properties, just as objects have properties. </strong></li> <li><strong>] And when a function executes</strong>, it gets the <em>this</em> property</li> <li>—a variable with the <strong>value of <em>the object</em> that invokes the function where <em>this</em> is used</strong>.(SRC = 1)</li> </ol> <li>] <em>this</em> reference ALWAYS refers to (and holds the value of) an object—a singular object—and</li> <li>] this is usually used inside a function or a method,</li> <li>] this can be used outside of a function in the global scope.</li> <li>] this has some <strong>'gotchas'</strong> which can make it a 'bit tricky/trickier/? to work with' in some cases</li> <ol> <li>] this - inside a closure,</li> <li>] this - global scope</li> <li>] this - strict mode - Note that when we use <strong>strict mode</strong>, <em>this</em> holds the value of <em>undefined</em> in global functions and in anonymous functions that are not bound to any object.</li> </ol> <li>] RELATE = ] scope, ] call, apply, bind, $.proxy()</li> </ol> <h2>[WHY]</h2> <ol> <li>]</li> <li>] this is used to refer to || reference the 'currently active' object</li> <li>] shorthand,</li> <ol> <li>[] see example 1</li> </ol> <li>] the POWER of</li> <ol> <li>[] this lies WHERE you dont know the reference to something, ie a web page has 20 links, i dont know which link the user will click, BUT i can write 1 'link click' function and THEN using the 'this' function i could get the value of the link that you the user clicked, var youClicked = this.id; and avoid the pain of having to write an individual link click function for each link on the page</li> </ol> <li> </li> </ol> <h2>[WHERE]</h2> <ol> <li>] * this is assigned a value when an object invokes the function where this is defined</li> </ol> <h2>[WHEN]</h2> <ol> <li>]</li> <li>]</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>] to get a reference to the current pages title, i could use </li> <ol> <li>] var t = document.title; OR because the window object has the current</li> <li>] var t = this.title; </li> </ol></ol> <h2>[HOW-TO]</h2> <ol> <li>] the important part is knowing what .this is referring to at the time you are referencing it</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>[] <a href="http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/%20" target="_blank">understand javascripts this with clarity and master it</a></li> <ol> <li>[] by Richard Bovine @javascriptissexy.com - an in depth concise and clear explanatory article on using / understanding this</li> </ol> <li><strong>[] NEW </strong><a href="http://javascript.info/object-methods" target="_blank">Object methods, " this"</a></li> <ol> <li>[] by __ @ javascript.info -</li> </ol> <li>[]</li> </ol> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p>