Path: csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!feeder.erje.net!eu.feeder.erje.net!eternal-september.org!feeder.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: Ben Bacarisse <ben.usenet@bsb.me.uk>
Newsgroups: comp.lang.javascript
Subject: Re: Use of bind()
Date: Sun, 14 Sep 2014 01:01:56 +0100
Organization: A noiseless patient Spider
Lines: 61
Message-ID: <87bnqjkr2j.fsf@bsb.me.uk>
References: <df48d594-cbac-4e87-8622-e70c1d6d915d@googlegroups.com>
Mime-Version: 1.0
Content-Type: text/plain
Injection-Info: mx05.eternal-september.org; posting-host="017616aa25f81ec581c44d76d61ba2f3"; logging-data="19439"; mail-complaints-to="abuse@eternal-september.org";	posting-account="U2FsdGVkX18jYWZwRYw2vqias60amZQ8IjlDYdmWweY="
Cancel-Lock: sha1:KtbeuCHJ9BIIweWR5knaEKw0DSg= sha1:nIz4GRbUJ+zESJGxaAd9fJw/WAk=
X-BSB-Auth: 1.b9974371c44af6481b62.20140914010156BST.87bnqjkr2j.fsf@bsb.me.uk
Xref: csiph.com comp.lang.javascript: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.