fixes #389

[saas786]

Upon troubleshooting, it was found that when an image throws an error, this inside the callback refers to the image element and not the JustifiedGallery instance. This causes a TypeError because this.resetImgSrc is not a function in the context of the image element.

To resolve this, I ensured that this correctly refers to the JustifiedGallery instance by using .bind(this) on the callback function.

Also might help resolve: #333, #351

[Imran-imtiaz48]

Code Review

File: src/js/justifiedGallery.js

Change Summary:

In the JustifiedGallery.prototype.displayEntry function, the error handling logic for the $image object has been modified. The anonymous function passed to the .one('error') event handler is now explicitly bound to the this context of the JustifiedGallery object.

Review Comments:

1. Context Binding:

   • Improvement: The new code explicitly binds the context (this) to the function, ensuring that this.resetImgSrc correctly refers to the method on the JustifiedGallery object.
   • Justification: This change is necessary because the this keyword inside an anonymous function in JavaScript defaults to the global object (or undefined in strict mode), which can cause issues if it’s assumed to be the instance of the class.

2. Readability:

   • The use of .bind(this) makes it clear that the function needs to access the instance’s properties and methods, improving code readability and maintainability.

3. Alternative Approaches:

   • Arrow Function: Another way to achieve the same result is by using an arrow function, which inherently binds this to the enclosing context.

     $image.one('error', () => {
         this.resetImgSrc($image); // revert to the original thumbnail
     });

   • Pros and Cons: The arrow function approach is more concise and modern but the .bind(this) method is equally valid and clear.

4. Testing and Validation:

   • Ensure that this change has been tested thoroughly to confirm that the error handling works as expected, particularly in scenarios where the image fails to load.

Overall, this change is a positive improvement that addresses potential issues with context binding in JavaScript. Well done!