Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #25847 > unrolled thread

Use of bind()

Back to article view | Back to comp.lang.javascript

Contents

  Use of bind() enrique.melero@gmail.com - 2014-09-13 15:19 -0700
    Re: Use of bind() Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-09-14 01:01 +0100
      Re: Use of bind() Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-09-14 11:48 +0200
    Re: Use of bind() JJ <jj4public@vfemail.net> - 2014-09-14 11:01 +0700
      Re: Use of bind() enrique.melero@gmail.com - 2014-09-14 00:54 -0700

#25847 — Use of bind()

Hello, I am reading the book Programming JavaScript Applications and I find an example of use of bind() that is not supposed to work, to ilustrate what bind() does. Well I didnt quite get it so I tried to reproduce the error to understand what it really does, but to my surprise it runs with no problem.

This is the fiddle http://jsfiddle.net/quiquee/20cnkfba/1/

The book says:

Let's take a look at a common use case for .bind()--an event handler:

var lightbulb = {
    toggle: function toggle() {
      this.isOn = !this.isOn;
      return this.isOn;
    },
    isOn: false
  },
  toggle = lightbulb.toggle,
  lightswitch = document.getElementById('lightswitch');

lightswitch = document.getElementById('lightswitch');
lightswitch.addEventListener('click',
  lightbulb.toggle, false);

Glancing over this code, it looks simple enough. An event listener gets attached to the lightswitch DOM with .addEventListener(). There's just one problem: this code will fail because the context inside an event listener is not the object that the method was assigned to at design time. Instead, it's a reference to the element that was clicked.

Even after you click the switch element, lightbulb.isOn will be false. You can fix this mess with .bind(). You only need to alter the toggle assignment:

toggle = lightbulb.toggle.bind(lightbulb);

Well, as you can see I didn't add that and the code works. If someone can explain or give me a correct example so I can understand what bind() does.

Thanks

[toc] | [next] | [standalone]

#25849

enrique.melero@gmail.com writes:

> Hello, I am reading the book Programming JavaScript Applications and I
> find an example of use of bind() that is not supposed to work, to
> ilustrate what bind() does. Well I didnt quite get it so I tried to
> reproduce the error to understand what it really does, but to my
> surprise it runs with no problem.
>
> This is the fiddle http://jsfiddle.net/quiquee/20cnkfba/1/
>
> The book says:
>
> Let's take a look at a common use case for .bind()--an event handler:
>
> var lightbulb = {
>     toggle: function toggle() {
>       this.isOn = !this.isOn;
>       return this.isOn;
>     },
>     isOn: false
>   },
>   toggle = lightbulb.toggle,
>   lightswitch = document.getElementById('lightswitch');
>
> lightswitch = document.getElementById('lightswitch');
> lightswitch.addEventListener('click',
>   lightbulb.toggle, false);
>
> Glancing over this code, it looks simple enough. An event listener
> gets attached to the lightswitch DOM with .addEventListener(). There's
> just one problem: this code will fail because the context inside an
> event listener is not the object that the method was assigned to at
> design time. Instead, it's a reference to the element that was
> clicked.
>
> Even after you click the switch element, lightbulb.isOn will be
> false. You can fix this mess with .bind(). You only need to alter the
> toggle assignment:
>
> toggle = lightbulb.toggle.bind(lightbulb);

Right.

> Well, as you can see I didn't add that and the code works. If someone
> can explain or give me a correct example so I can understand what
> bind() does.

This is a correct example, but not a very good one.  The trouble is that
the code simply sets a property called isOn on the element clicked,
rather than the object called "lightbulb".  The result is that it seems
to work in this simple case.  If you examine the value of lightbulb.isOn
you will see that it does not change unless you use bind (or something
similar, of course) and that the HTML element suddenly acquires a new
property called isOn.

The best way to see this is to use the browser's own code/DOM inspector,
but if you need an HTML example, set up two elements that toggle the
same lightbulb.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#25852

Ben Bacarisse wrote:

> […]  The trouble is that the code simply sets a property called isOn on
> the element clicked, rather than the object called "lightbulb".  The
> result is that it seems to work in this simple case.  If you examine the
> value of lightbulb.isOn you will see that it does not change unless you
> use bind (or something similar, of course) and that the HTML element
> suddenly acquires a new property called isOn.

The HTML element _object_ representing the HTML element need not acquire a 
new property.  It is a host object, and augmenting host objects in order to 
use them as data containers, or using their existing properties in an 
unspecified way, is error-prone; it can fail in several ways.
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#25850

On Sat, 13 Sep 2014 15:19:17 -0700 (PDT), enrique.melero@gmail.com wrote:
> Hello, I am reading the book Programming JavaScript Applications and I find an example of use of bind() that is not supposed to work, to ilustrate what bind() does. Well I didnt quite get it so I tried to reproduce the error to understand what it really does, but to my surprise it runs with no problem.
> 
> This is the fiddle http://jsfiddle.net/quiquee/20cnkfba/1/
> 
> The book says:
> 
> Let's take a look at a common use case for .bind()--an event handler:
> 
> var lightbulb = {
>     toggle: function toggle() {
>       this.isOn = !this.isOn;
>       return this.isOn;
>     },
>     isOn: false
>   },
>   toggle = lightbulb.toggle,
>   lightswitch = document.getElementById('lightswitch');
> 
> lightswitch = document.getElementById('lightswitch');
> lightswitch.addEventListener('click',
>   lightbulb.toggle, false);
> 
> Glancing over this code, it looks simple enough. An event listener gets attached to the lightswitch DOM with .addEventListener(). There's just one problem: this code will fail because the context inside an event listener is not the object that the method was assigned to at design time. Instead, it's a reference to the element that was clicked.
> 
> Even after you click the switch element, lightbulb.isOn will be false. You can fix this mess with .bind(). You only need to alter the toggle assignment:
> 
> toggle = lightbulb.toggle.bind(lightbulb);
> 
> Well, as you can see I didn't add that and the code works. If someone can explain or give me a correct example so I can understand what bind() does.
> 
> Thanks

That code alone, without using bind(), doesn't work as intended because when
lightswitch is clicked, the click handler is executed like this:

  lightbulb.toggle.call(lightswitch, event);

...where "event" is the click event object. The "this" in lightbulb.toggle()
context no longer refer to the lightbulb object.

When adding an event handler, passing a bound function as the handler like
this:

  lightswitch.addEventListener('click',
    lightbulb.toggle.bind(lightbulb), false);

...works because Function.bind() works like this (for above code):

  function bind(object) {
    //note: "this" in this context is lightbulb.toggle()
    var func = this;
    function boundFunction() {
      return func.apply(object, arguments);
    };
    return boundFunction;
  }

Now, when the handler is executed, basically it'll be done like this:

  //within browser context...
  //event is the event object.
  boundFunction.call(lightswitch, event);

...which in turn, in the boundFunction:

  function boundFunction() {
    //note: func() is lightbulb.toggle() and
    //      object is lightbulb (see bind() code above)
    return func.apply(object, arguments);
  };

...thus, "this" has been changed twice before lightbulb.toggle() is
executed. First, by the event handler's executor (the browser), then by the
bound function. In the end, "this" in lightbulb.toggle() context would be
the lightbulb object.

[toc] | [prev] | [next] | [standalone]

#25851

JJ and Ben,
many thanks for the clear answers and examples, I think I have got it now !!

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web