Función de autoejecución inmediata y "esto"

Question

Quiero crear una biblioteca de JavaScript, así que pensé que sería una buena acción hacerlo para garantizar la seguridad del alcance y todo.

Pero ahora me encuentro con un problema al utilizar la palabra clave "this" que no entiendo del todo.

¿Cómo puedo hacer que un código como este funcione correctamente? Actualmente, me dice que "imagen" no está definida.

(function() { 

    function lib() { 
     this.image = document.getElementById("image"); 
     this.parts = [ 
      {name: "part1", num: "1"} 
     ]; 

     this.init = function() { 
      $(parts).each(function() { 
       var partNum = this.num; 
       image.getElementById(partNum).addEventListener("click", function() { 
        toggleHighlight(partNum); 
       }, true); 
      }); 
     }; 
    } 

    window.lib = new lib(); 
})(); 

window.lib.init(); 

¿Cómo puedo acceder a la propiedad image?

Answer 1

yo creo que hay algunos problemas aquí:

• está haciendo referencia parts en su función init sin acceder a él como una propiedad de this.
• dentro del bloque each, está accediendo a image como una variable global, pero no está declarado globalmente. No puede acceder al image desde this en ese bloque porque, en ese contexto, this está realmente configurado para el elemento sobre el que está iterando. (Es por eso que puede acceder al this.num.)

Sugiero que incluya var that = this; antes de tu función init y úsala al acceder a propiedades como that.image.

var that = this; 
this.init = function() { 
    $(this.parts).each(function() { 
     var partNum = this.num; 
     that.image.getElementById(partNum).addEventListener("click", function() { 
      toggleHighlight(partNum); 
     }, true); 
    }); 
}; 

Answer 2

Si entiendo bien, usted desea obtener acceso a la propiedad this.image definida dentro de la función lib de la función anónima que proporciona al each. Para ello es necesario para preservar this para que esté disponible en la función anónima:

this.init = function() { 
    var self = this; 
    $(parts).each(function() { 
     //do something with self.image 
     self.image; 
    }); 
}; 

Answer 3

También debe capitalizar la primera letra del nombre de la función lib ya que están esperando a ser utilizado como un constructor con la palabra clave new. Eche un vistazo a lo que el autor de Javascript The Good Parts tiene que decir sobre constructor naming conventions in JavaScript.