Recién comencé a comprender los cierres cuando de repente me lanza otra bola curva, lo que hace que mi comprensión del alcance en los cierres sea aún peor. Tengo un cierre relativamente simple solo para poder hacer que jQuery funcione dentro de un objeto, que luego es llamado por los controladores de eventos externos.
<div class="hamburger-link"> <div class="bar bar1"></div> <div class="bar bar2"></div> <div class="bar bar3"></div> </div> <div id='sidebar-overlay'></div> <div id="sidebar"></div> <script> var cwn = (function($) { var app = { overlay: { e: "#sidebar-overlay", activate() { $(this.e).fadeIn(); $('body').css('overflow', 'hidden'); }, deactivate() { $(this.e).fadeOut(); $('body').css('overflow', 'unset'); }, }, sidebar: { e: '#sidebar', open() { app.overlay.activate(); $(this.e).animate({"width": 'show'}); }, close() { app.overlay.deactivate(); $(this.e).animate({"width": 'hide'}, 'fast'); } } }; return app; })(jQuery); <script>Entonces, usarlo en la consola misma o llamar a la función sin los controladores de eventos, hace que funcione: la barra lateral se activa y se abre y hace lo que se supone que debe hacer.
cwn.sidebar.open(); // THIS WORKS JUST FINE Sin embargo, el uso de dicha función con un controlador de eventos da como resultado this cambio.
$('.hamburger-link').on('click', cwn.sidebar.open); // THIS CHANGES 'this' TO SOMETHING ELSELo que luego hace que falle.
Tengo una solución provisional, que es reemplazar this.e con app.sidebar.e pero eso parece extremadamente engorroso y me parece que existe una solución mejor y más simple.
Es bastante conocido que los inicializadores de objetos no admiten el uso de this para referirse al objeto o las propiedades dentro de él durante la ejecución del inicializador. Consulte Autorreferencias en literales de objetos/inicializadores y la lista de preguntas vinculadas que se presenta en la página para obtener un tratamiento de esto.
Esto no está particularmente relacionado con el uso de cierres; más simplemente, no es compatible con la sintaxis del inicializador de objetos.
Sin embargo, en este caso, dado que un IIFE ya ha configurado un cierre, siempre puede definir selectores de elementos dentro del cierre para usarlos como constantes dentro de la aplicación, por ejemplo:
var cwn = (function($) { // selectors const overlay= "#sidebar-overlay"; const sidebar = "#sidebar"; // app const app = { overlay: { activate() { $(overlay).fadeIn(); $('body').css('overflow', 'hidden'); }, deactivate() { $(overlay).fadeOut(); $('body').css('overflow', 'unset'); }, }, sidebar: { open() { app.overlay.activate(); $(sidebar).animate({"width": 'show'}); }, close() { app.overlay.deactivate(); $(sidebar).animate({"width": 'hide'}, 'fast'); } } }; return app; })(jQuery);Por supuesto, existen alternativas, incluidas las funciones de vinculación dentro del objeto al objeto al que deben llamarse. Aun así, creo que es poco probable que alguna solución en particular resulte ser el mejor enfoque en todos los casos. Opte por la legibilidad y la mantenibilidad cuando tenga dudas.