title: How to replicate jQuery's $(this)?
body: <p>I am creating a mini-library, sort of trying to reconstruct, at least partly, the way <code>jQuery</code> works for learning purposes and to understand better how object-oriented programming works.</p>
  
  <p>I have recreated the <code>jQuery</code> methods <code>click</code> and <code>addClass</code>, but when I call them like:</p>
  
  <pre><code>$(".class1").click(function() {
      $(".class1").addClass("class2"); // Works, but it adds class2 to all elements
      this.addClass("class2"); // Doesn't work
  });
  </code></pre>
  
  <p>I get an <code>Uncaught Error</code> saying <code>this.addClass</code> is not a function, which is normal, since I shouldn't be able to access another object's methods.</p>
  
  <p><strong>How is <code>$(this)</code> made in jQuery to mean the DOM element that triggered an event</strong>, so that in my case I can use it to add <code>class2</code> only to the element clicked and not all elements that have the class <code>class1</code>?</p>
  
  <p>P.S: <em>I tried reading the jQuery file, but I feel like these waters are currently too deep for me.</em></p>
  
  <hr>
  
  <p><strong>Edit</strong>:</p>
  
  <ol>
  <li><p>I always appreciate all the answers and the help I get on Stack Overflow, but telling me to use <code>$(this)</code> instead of <code>this</code> doesn't solve my issue, because <code>$(this)</code> doesn't exist in my code. I'm trying to learn how to create something like jQuery's <code>$(this)</code> &amp; what's the logic behind it.</p></li>
  <li><p>The <code>click</code> method is defined as follows:</p></li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>    $.prototype.click = function(callback) {
         for (var i = 0; i &lt; this.length; i++) {
            this[i].onclick = function(event) {
               callback.call(this, event);
            }
         }
      };
  </code></pre>