trying to pass `this` through a function

Question

I have a function localised to the main function and i want to use this to call it but it doesn't seem to work.

My code has:

function option(room,slot){

    var div_id = document.getElementById(room);
    var opacity = window.getComputedStyle(div_id).opacity

    transition_opacity(div_id,opacity,0,function(){this.load});


    function load(){
    console.log('test'); //does not happen      
       }
}

Have i misunderstood the use of this or is the scope lost when i use function(){} to call load?

Answer 1

From your code it is not obvious, what object this could refer to. It depends on how option is called. However, if you define the load function inside of the option function anyway, it is best to just reference it directly. You will have to move the declaration of test above the transition_opacity call though:

function option(room,slot){
    var div_id = document.getElementById(room);
    var opacity = window.getComputedStyle(div_id).opacity;

   function load() {
       console.log('test');
   }

   transition_opacity(div_id,opacity,0,load);
}

As you can see, I just reference load directly. You could make another function which calls the load function inside (i.e. function() { load(); } – note the parentheses which calls the function) but that would give you no benefit but would just add another unneeded function to the stack. So just refer to the actual function itself.

For more information on the this keyword, check out this question. Spoiler: It’s more complicated than you would expect.

Answer 2

The scope of this is lost in this instance, probably pointing to the document. You can capture this to a variable in the outer scope to make this work as intended.

var context = this;
transition_opacity(div_id,opacity,0,function(){context.load();})

The above will not work however. This is because load does not exist on the context of this. You would need to define the load function as such:

context.load = function(){
   console.log('test');
}

Answer 3

Both.

First, your load function is not a member/property of any this, the way you have it coded. Your load function is simply a nested function that exists within your option function, as has been sort of implicitly noted in other responses.

In your option function, if you want 'load' to become a member of 'this', you'd need to say so, like this:

function option(){
    this.load = function(){};  // now load is actually a property of whatever this is
}

Second, you and the other poster are correct that 'this' is no longer the same 'this' by the time your anonymous function is called.

Whenever you call a function, a brand new 'this' is created and exists within the scope of that function. If you just call a function like this:

transition_opacity(args);

.. then within transition_opacity, 'this' just refers to the window object, or maybe window.document. For 'this' to refer to anything other than window or window.document, you need to (in effect) do one of the following:

myObject.transition_opacity(args);

transition_opacity.call(myObject, arg1, arg2, ..);

transition_opacity.apply(myObject, argArray);

or

var myObject = new transition_opacity(args);

In each of those cases, within transition_opacity, 'this' refers to myObject (or, well, in the last case, it refers to a new object that is being created and assigned to myObject).

Here is a way to do what it looks like you're trying to do:

var MyNamespace = {

    option: function(room,slot){
        var div_id = document.getElementById(room);
        var opacity = window.getComputedStyle(div_id).opacity;

        var _this = this;
        transition_opacity(div_id,opacity,0,function(){
            // Careful! Inside here, 'this' is just window or window.document,
            // unless transition_opacity sets it to something using call or apply, 
            // in which case that 'this' is probably not the 'this' you want.
            // So carefully refer to the saved instance of 'this':
            _this.load();
        });
    },

    load: function(){
        console.log('test'); // now it should happen   
    }
}

.
.
MyNamespace.option(room, slot);  // inside option, 'this' is MyNamespace.

Here's another way to do it:

function MyClass(){};
MyClass.prototype = {
   // all the same stuff that is in MyNamespace above..
};
.
.
var myObject = new MyClass();
myObject.option(room, slot);

Clear as mud?

Answer 4

Just use

transition_opacity(div_id,opacity,0,load);

Answer 5

You have defined a 'load' within another function as an 'Function Declaration', so now it is only accessible within 'option' function and in other functions defined in this one by name 'load'. You can't access it by using 'this.load' no matter what 'this' is. If you want to access 'load' function as 'this.load' you can try this example to understand how 'this' keywoard works

// Function Declaration
function f1(callback){
  callback();
};
// Function Declaration
function f2(){
  // Function Expression
  this.load = function(){
    console.log("test");
  };
  f1(this.load);
};
var obj = new f2(); // test, this == obj, so obj.load() now exists
obj.load(); //test, this == obj
f2(); //test, this == window, so window.load() now exists
load(); //test, window is the global scope