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

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