title: Why `this` property cannot access within function
body: <h2>The Problem</h2>
  
  <p>I am working on a jQuery plugin. When called with <code>$.fn.bar()</code>, the alert() within foo() is not outputting the expected result. Where did I make the mistake?</p>
  
  <pre><code>(function($){
  
    var input;
  
    var foo = function(){
      alert(this.input); //&lt;-- Not getting the desire input value
    }
  
    $.fn.bar = function(){
  
      this.input = "Test";
  
      alert(this.input); //&lt;-- Output "Test" as expected
      foo(); //&lt;-- Call foo(), expect to alert "Test" as well, but not
  
    };
  
  
  }(jQuery));
  </code></pre>
  
  <h2>Solution</h2>
  
  <p>You need to pass the context <code>this</code> within <code>bar()</code> to <code>foo()</code> with <code>foo.call(this)</code>.</p>
  
  <p><a href="https://jsfiddle.net/clintonlam/de1vz59w/8/" rel="nofollow noreferrer">https://jsfiddle.net/clintonlam/de1vz59w/8/</a></p>