Le clic lié perd le contexte de ma classe. JS

Question

J'ai ce problème que je comprends probablement mais que je ne sais pas comment gérer, s'il y a un moyen.

J'ai une classe simplifiée comme ceci:

function DrawingTable(canvas_id){ 
    this.canvas_id = canvas_id; 
    bind_events() 

    function bind_events(){ 
    $(get_canvas()).click(function(e){ 
    var canvas = get_canvas() //works 
    do_something_in_the_instance_who_called_click() 
    } 

    function get_canvas(){return document.getElementById(canvas_id)} 

    function do_something_in_the_instance_who_called_click(){ 
    alert(this.canvas_id) //fail! 
    } 

} 

Parce que quand le clic() est invoqué pour ce qu'il semble ce n'est pas dans l'instance plus, mais je dois changer atributs à partir de là. Y a-t-il un moyen, étant donné qu'il peut y avoir plusieurs instances?

Je ne sais pas vraiment comment, mais les get_canvas() fonctionne :)

J'utilise jQuery mais probablement pas pertinente

Answer 1

Cela se produit parce que vous appelez la fonction sans contexte de l'objet , mais vous pouvez stocker la valeur this:

function DrawingTable(canvas_id){ 
    var instance = this; // <-- store `this` value 

    this.canvas_id = canvas_id; 
    bind_events() 

    function bind_events(){ 
    $(get_canvas()).click(function(e){ 
    // Note also that here the `this` value will point to the 
    // canvas elemenet, `instance` should be used also 

    var canvas = get_canvas(); 
    do_something_in_the_instance_who_called_click(); 
    } 

    function get_canvas(){return document.getElementById(canvas_id)} 

    function do_something_in_the_instance_who_called_click(){ 
    alert(instance.canvas_id); // <-- use stored `this` value 
    } 

} 

la valeur est this est implicitement lorsque vous faites un appel de fonction, par exemple:

obj.method(); 

La valeur this pointera vers obj, si vous faites un appel de fonction sans objet de base , par exemple .:

myFunction(); 

La valeur this à l'intérieur myFunction pointera vers l'objet global.