En jQuery, comment utilisez-vous correctement ceci dans cette situation?

Question

Je suis confus pourquoi ce code est écrit comme ça, mais je suis sûr qu'il est important de comprendre:

$.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(); 


} 

Ce que je ne comprends pas est pourquoi le code a image=this et this.image=this, est-ce la même chose ? pourquoi ne pas faire quelque chose comme image.after(this.canvas) est-ce que this fait référence à l'objet courant qui est passé par la fonction en premier lieu?

Answer 1

Ce que je ne comprends pas pourquoi est-ce que le code de ont image=this et this.image=this, est-ce la même chose?

non, ils ne sont pas ...

image = this; 
this.image = this; 

en ce que nous pouvons dire que image et this.image font référence à même chose this, non?

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 

vous pouvez également obtenir des idea here

Answer 2

La raison pour laquelle cela est source de confusion (sans jeu de mots) est parce que vous manquez un peu de code pour l'exemple ci-dessus pour donner un sens:

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 
    ... 

maintenant, quand vous regardez:

image=this; 
this.image = this 

il est plus logique non? La première affectation concerne la variable locale 'var image'. De cette façon, une référence est conservée même lorsque la fonction est terminée.

La deuxième affectation concerne une propriété de l'objet actuel, dénommée 'this'.

Voici votre explication, mais pour moi, il est inutile d'utiliser à la fois this.image et image dans le code. Juste en utilisant image serait bien.