Javascript Hoisting
<p>Quite an interesting thing was discovered by me as a JS learner, consider the following code. </p>

<pre><code>  this.init = function (e) {
        var container = e.container;

        // slider
        var slider = $("#div1").slider({ orientation: "horizontal", step: 1,
            slide: function () {

                console.log(e.container); // not null
                console.log(container); // null
            }
        });
   };
</code></pre>

<p>here's how it's called:</p>

<pre><code>lib.init({ container: $("#container") });
</code></pre>

<p>I know that I can use <code>on("slide", {container: container}, function(event, args){...}))</code> to bind slide event and pass external data into it. But - could anyone explain why values returned by two console.log are different? Also I wonder if the technique is a technically sound replacement for <code>on</code> approach?</p>
