In jQuery, how do you use 'this' properly in this situation?

Question

I am confused on why this code is written like this, but I am sure it is important to understand:

$.fn.mapImage = function(options){
    //Set user input options and defaults
    var optionConfig = $.extend({}, $.fn.mapImage.defaults, options);

    image=this;
    this.image = this;

    // Assign defaults
    this.getUrl = optionConfig.getUrl;
    this.saveUrl = optionConfig.saveUrl;
    this.deleteUrl = optionConfig.deleteUrl;
    this.editable = optionConfig.editable;
    this.pinpoints = optionConfig.pinpoints;
    image.pinpoints = optionConfig.pinpoints;
    image.pinpointCount = 0;


    this.canvas = $('<div class="canvas"><div class="create-mode"></div><div class="edit-mode"></div></div>');
    this.image.after(this.canvas);
    this.canvas.height(this.height());
    this.canvas.width(this.width());
    this.canvas.css('background-image', 'url("' + this.attr('src') + '")');
    this.canvas.children('.create-mode').css('cursor', 'crosshair');
    this.canvas.children('.create-mode, .edit-mode').height(this.height());
    this.canvas.children('.create-mode, .edit-mode').width(this.width());
    this.canvas.children('.edit-mode').show();
    this.canvas.children('.create-mode').hide();
    $(this).hide();


}

What I dont understand is why does the code have image=this and this.image=this , is it the same thing? why not do something like image.after(this.canvas) does this this refer to the current object that is passed through the function in the first place?

Answer 1

The reason why this is confusing (no pun intended) is because you are missing a bit of code for the example above to make sense:

var image; // necessary otherwise you'll get a runtime exception.

$.fn.mapImage = function(options){
    //Set user input options and defaults
    var optionConfig = $.extend({}, $.fn.mapImage.defaults, options);

    image=this;
    this.image = this
    ...

Now, when you look at:

image=this;
this.image = this

It makes more sense doesn't it? The first assignment is for the local variable ' var image '. That way, a reference is kept even when the function has finished executing.

The second assignment is for a property of the current object, denominated by ' this '.

Here's your explanation, but to me there is no point of using both this.image and image in the code. Just using image would be fine.

Answer 2

What I dont understand is why does the code have image=this and this.image=this , is it the same thing?

no, they are not...

image = this;
this.image = this;

in that we can say that image and this.image are referring to same thing this , right?

image = this;
// ^      ^----- current object
// | --- this image is a variable
this.image = this;
//     ^--- this image is a property of current object, this 
// because of image = this;, we can also say that
image.image = this;
// ^    ^      ^----- current object
// |    |------------ property
// |----------------- variable

you can also get some idea here