Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Cannibalized from another post of mine, here's more than you ever wanted to know about <em>this</em>.</p> <p>Before I start, here's the most important thing to keep in mind about Javascript, and to repeat to yourself when it doesn't make sense. Javascript does not have classes (ES6 <code>class</code> is <a href="https://stackoverflow.com/a/30783368/2039244">syntactic sugar</a>). If something looks like a class, it's a clever trick. Javascript has <strong>objects</strong> and <strong>functions</strong>. (that's not 100% accurate, functions are just objects, but it can sometimes be helpful to think of them as separate things)</p> <p>The <em>this</em> variable is attached to functions. Whenever you invoke a function, <em>this</em> is given a certain value, depending on how you invoke the function. This is often called the invocation pattern.</p> <p>There are four ways to invoke functions in javascript. You can invoke the function as a <em>method</em>, as a <em>function</em>, as a <em>constructor</em>, and with <em>apply</em>.</p> <h2>As a Method</h2> <p>A method is a function that's attached to an object</p> <pre><code>var foo = {}; foo.someMethod = function(){ alert(this); } </code></pre> <p>When invoked as a method, <em>this</em> will be bound to the object the function/method is a part of. In this example, this will be bound to foo.</p> <h2>As A Function</h2> <p>If you have a stand alone function, the <em>this</em> variable will be bound to the "global" object, almost always the <em>window</em> object in the context of a browser.</p> <pre><code> var foo = function(){ alert(this); } foo(); </code></pre> <p><strong>This may be what's tripping you up</strong>, but don't feel bad. Many people consider this a bad design decision. Since a callback is invoked as a function and not as a method, that's why you're seeing what appears to be inconsistent behavior.</p> <p>Many people get around the problem by doing something like, um, this</p> <pre><code>var foo = {}; foo.someMethod = function (){ var that=this; function bar(){ alert(that); } } </code></pre> <p>You define a variable <em>that</em> which points to <em>this</em>. Closure (a topic all it's own) keeps <em>that</em> around, so if you call bar as a callback, it still has a reference.</p> <p>NOTE: In <code>use strict</code> mode if used as function, <code>this</code> is not bound to global. (It is <code>undefined</code>). </p> <h2>As a Constructor</h2> <p>You can also invoke a function as a constructor. Based on the naming convention you're using (TestObject) this also <strong>may be what you're doing and is what's tripping you up</strong>.</p> <p>You invoke a function as a Constructor with the new keyword.</p> <pre><code>function Foo(){ this.confusing = 'hell yeah'; } var myObject = new Foo(); </code></pre> <p>When invoked as a constructor, a new Object will be created, and <em>this</em> will be bound to that object. Again, if you have inner functions and they're used as callbacks, you'll be invoking them as functions, and <em>this</em> will be bound to the global object. Use that var that = this trick/pattern.</p> <p>Some people think the constructor/new keyword was a bone thrown to Java/traditional OOP programmers as a way to create something similar to classes.</p> <h2>With the Apply Method</h2> <p>Finally, every function has a method (yes, functions are objects in Javascript) named "apply". Apply lets you determine what the value of <em>this</em> will be, and also lets you pass in an array of arguments. Here's a useless example.</p> <pre><code>function foo(a,b){ alert(a); alert(b); alert(this); } var args = ['ah','be']; foo.apply('omg',args); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload