this on JavaScript module pattern

Question

I wrote a script for binding the "smooth scroll" clicking on a button using the JavaScript Module Pattern.

Since is the first time I write code on module pattern, I need some help on the use of "this".

When I bind the "scroll" function to my "bindevents" function, I get an error saying that the "this", in the "scroll" function, is undefined.

How should i use "this" to select the button I click?

Here is the code:

var s, SmoothScroll = {

  Selectors: {
    Link: $('a[href*="#"]:not([href="#"])')
  },

  scroll: function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname && $(".classes .section").has(this).length == 0 ) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  },

  bindEvents: function() { 
    s.Link.click(function() {
      SmoothScroll.scroll();
    });
  },

  init: function(){
    s = this.Selectors;
    this.bindEvents();
  }

};

SmoothScroll.init();

charlietfl · Accepted Answer · 2017-04-14 21:15:44Z

2

Change:

s.Link.click(function() {
  SmoothScroll.scroll();
});

To

s.Link.click(SmoothScroll.scroll);

Now this inside the scroll function will be the element

If the different contexts of this are confusing , you could pass the element as an argument of scroll instead

 bindEvents: function() {
   s.Link.click(function() {
     // "this" is element determined by jQuery 
     SmoothScroll.scroll(this);
   });
 },
 scroll: function(link) {
    // this === SmoothScroll
    if (location.pathname.replace(/^\//,'') == link.pathname.replace(/^\//,'') && location.hostname == link.hostname && $(".classes .section").has(link).length == 0 ) {
      var target = $(link.hash);
  .....

edited Apr 14, 2017 at 21:15

answered Apr 14, 2017 at 20:36

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Matteo Over a year ago

Thanks a lot!! Now it works. I just have a question.. why in this case I use scroll without (), but inside the init function I use bindevents() with the ()?

charlietfl Over a year ago

because you are passing the function as reference as opposed to passing an anonymous function that would get this as context for element

Matteo Over a year ago

And what if I need to bind more functions inside bindEvents?

charlietfl Over a year ago

depends what you need to do. If they are event listeners would do same thing as click

ibrahim mahrir Over a year ago

@Matteo Then you should use Function.prototype.call! Or pass the element as a parameter!

|

Collectives™ on Stack Overflow

this on JavaScript module pattern

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related