Javascript吊装

Question

Quite an interesting thing was discovered by me as a JS learner, consider the following 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
            }
        });
   };

here's how it's called:

lib.init({ container: $("#container") });

I know that I can use on("slide", {container: container}, function(event, args){...})) 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 on approach?

Answer 1

First of all, I am amazed that you are getting a null for container . Would actually want to see your logs if you can post

Secondly, here's an explanation of why this won't work, but not of why you get a null :

This has nothing to do with hoisting

you are executing the init function with lib.init({ container: $("#container") });

At that time attached function this.init = function (e) { ... gets executed with some value of e , may be an Event , so e is defined and the variable container gets a value

Whereas, in the following code on 5th line,

var slider = $("#div1").slider( ... // u are calling slider

the slider function is being called with options, and one of the options is:

slide: function () { // anonymous and will execute later
    console.log(e.container); // not null
    console.log(container); // null
}

1. most important, you are in the scope of slider function of your library, as it is being executed
2. here, the function you are attaching to slide: ... has not been executed yet. It will, when slide event happens
3. when that happens, the present value of container will be used

If you are getting a null , something definitely is resetting container , as in the fiddle here by yckart its not null and is same as e.container

Answer 2

看不到区别...对我来说，两个logs相等： http : //fiddle.jshell.net/WJ2s8/