Asp Forum - Use of bind - comp.lang.javascript

enrique.melero

9/13/2014 10:19:00 PM

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/2...

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

9 Answers

Dave Peterson

7/29/2009 3:42:00 PM

Try:

Dim myRng As Range
Dim myCell As Range
Dim myStr As String

Set myRng = Selection
For Each myCell In myRng.Cells
With myCell
myStr = .Text
.NumberFormat = "@"
.Value = myStr
End With
Next myCell

Michael Koerner wrote:
>
> Tried your solution. All I got in place of the dates was a bunch of numbers.
> Thanks
>
> --
>
> Regards
> Michael Koerner
>
> "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> news:4A6F74DC.4248D47B@verizonXSPAM.net...
> Select the range to fix first:
>
> Dim myRng as range
> dim myCell as range
>
> set myrng = selection
> myrng.numberformat = "@"
> for each mycell in myrng.cells
> mycell.value = mycell.text
> next mycell
>
> .text is what you see in the cell (after formatting). If the column is too
> narrow, you could see ###'s and this will keep those ###'s--so be a little
> careful.
>
> Michael Koerner wrote:
> >
> > I have a sheet with a two columns containing dates. Sometimes it is the
> > full
> > date as an example 25-Jul-1936, or Jul-1936 or 1936 I would like to be
> > able
> > to convert that to text and maintain the same face value. Is that possible
> > with some sort of macro?
> >
> > --
> >
> > Regards
> > Michael Koerner
>
> --
>
> Dave Peterson

--

Dave Peterson

Michael Koerner

7/30/2009 12:58:00 PM

Dave;

That worked. Now how do I replace the - with a space. when I do a search and
replace, it changes the whole thing back into a dd-mmm-yy which is different
from the original dd-mmm-yyyy sequence.

--

Regards
Michael Koerner

"Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
news:4A706DD0.E7C36F15@verizonXSPAM.net...
Try:

Dim myRng As Range
Dim myCell As Range
Dim myStr As String

Set myRng = Selection
For Each myCell In myRng.Cells
With myCell
myStr = .Text
.NumberFormat = "@"
.Value = myStr
End With
Next myCell

Michael Koerner wrote:
>
> Tried your solution. All I got in place of the dates was a bunch of
> numbers.
> Thanks
>
> --
>
> Regards
> Michael Koerner
>
> "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> news:4A6F74DC.4248D47B@verizonXSPAM.net...
> Select the range to fix first:
>
> Dim myRng as range
> dim myCell as range
>
> set myrng = selection
> myrng.numberformat = "@"
> for each mycell in myrng.cells
> mycell.value = mycell.text
> next mycell
>
> .text is what you see in the cell (after formatting). If the column is
> too
> narrow, you could see ###'s and this will keep those ###'s--so be a little
> careful.
>
> Michael Koerner wrote:
> >
> > I have a sheet with a two columns containing dates. Sometimes it is the
> > full
> > date as an example 25-Jul-1936, or Jul-1936 or 1936 I would like to be
> > able
> > to convert that to text and maintain the same face value. Is that
> > possible
> > with some sort of macro?
> >
> > --
> >
> > Regards
> > Michael Koerner
>
> --
>
> Dave Peterson

--

Dave Peterson

Dave Peterson

7/30/2009 3:32:00 PM

change this line:
myStr = .Text
to:
myStr = replace(.Text,"-"," ")

But replace was added in xl2k.

If you're using xl97 (or have to support it):
myStr = application.substitute(.Text,"-"," ")

Michael Koerner wrote:
>
> Dave;
>
> That worked. Now how do I replace the - with a space. when I do a search and
> replace, it changes the whole thing back into a dd-mmm-yy which is different
> from the original dd-mmm-yyyy sequence.
>
> --
>
> Regards
> Michael Koerner
>
> "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> news:4A706DD0.E7C36F15@verizonXSPAM.net...
> Try:
>
> Dim myRng As Range
> Dim myCell As Range
> Dim myStr As String
>
> Set myRng = Selection
> For Each myCell In myRng.Cells
> With myCell
> myStr = .Text
> .NumberFormat = "@"
> .Value = myStr
> End With
> Next myCell
>
> Michael Koerner wrote:
> >
> > Tried your solution. All I got in place of the dates was a bunch of
> > numbers.
> > Thanks
> >
> > --
> >
> > Regards
> > Michael Koerner
> >
> > "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> > news:4A6F74DC.4248D47B@verizonXSPAM.net...
> > Select the range to fix first:
> >
> > Dim myRng as range
> > dim myCell as range
> >
> > set myrng = selection
> > myrng.numberformat = "@"
> > for each mycell in myrng.cells
> > mycell.value = mycell.text
> > next mycell
> >
> > .text is what you see in the cell (after formatting). If the column is
> > too
> > narrow, you could see ###'s and this will keep those ###'s--so be a little
> > careful.
> >
> > Michael Koerner wrote:
> > >
> > > I have a sheet with a two columns containing dates. Sometimes it is the
> > > full
> > > date as an example 25-Jul-1936, or Jul-1936 or 1936 I would like to be
> > > able
> > > to convert that to text and maintain the same face value. Is that
> > > possible
> > > with some sort of macro?
> > >
> > > --
> > >
> > > Regards
> > > Michael Koerner
> >
> > --
> >
> > Dave Peterson
>
> --
>
> Dave Peterson

--

Dave Peterson

Michael Koerner

7/30/2009 6:53:00 PM

My bad, should have mentioned that I'm using 2007. will give you change a
shot. Thanks very much

--

Regards
Michael Koerner

"Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
news:4A71BD03.A6C5EF95@verizonXSPAM.net...
change this line:
myStr = .Text
to:
myStr = replace(.Text,"-"," ")

But replace was added in xl2k.

If you're using xl97 (or have to support it):
myStr = application.substitute(.Text,"-"," ")

Michael Koerner wrote:
>
> Dave;
>
> That worked. Now how do I replace the - with a space. when I do a search
> and
> replace, it changes the whole thing back into a dd-mmm-yy which is
> different
> from the original dd-mmm-yyyy sequence.
>
> --
>
> Regards
> Michael Koerner
>
> "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> news:4A706DD0.E7C36F15@verizonXSPAM.net...
> Try:
>
> Dim myRng As Range
> Dim myCell As Range
> Dim myStr As String
>
> Set myRng = Selection
> For Each myCell In myRng.Cells
> With myCell
> myStr = .Text
> .NumberFormat = "@"
> .Value = myStr
> End With
> Next myCell
>
> Michael Koerner wrote:
> >
> > Tried your solution. All I got in place of the dates was a bunch of
> > numbers.
> > Thanks
> >
> > --
> >
> > Regards
> > Michael Koerner
> >
> > "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> > news:4A6F74DC.4248D47B@verizonXSPAM.net...
> > Select the range to fix first:
> >
> > Dim myRng as range
> > dim myCell as range
> >
> > set myrng = selection
> > myrng.numberformat = "@"
> > for each mycell in myrng.cells
> > mycell.value = mycell.text
> > next mycell
> >
> > .text is what you see in the cell (after formatting). If the column is
> > too
> > narrow, you could see ###'s and this will keep those ###'s--so be a
> > little
> > careful.
> >
> > Michael Koerner wrote:
> > >
> > > I have a sheet with a two columns containing dates. Sometimes it is
> > > the
> > > full
> > > date as an example 25-Jul-1936, or Jul-1936 or 1936 I would like to
> > > be
> > > able
> > > to convert that to text and maintain the same face value. Is that
> > > possible
> > > with some sort of macro?
> > >
> > > --
> > >
> > > Regards
> > > Michael Koerner
> >
> > --
> >
> > Dave Peterson
>
> --
>
> Dave Peterson

--

Dave Peterson

Michael Koerner

7/30/2009 7:46:00 PM

Worked like a charm. thank you very much

--

Regards
Michael Koerner

"Michael Koerner" <iamnot@home.com> wrote in message
news:%23sN6FcUEKHA.4004@TK2MSFTNGP05.phx.gbl...
My bad, should have mentioned that I'm using 2007. will give you change a
shot. Thanks very much

--

Regards
Michael Koerner

"Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
news:4A71BD03.A6C5EF95@verizonXSPAM.net...
change this line:
myStr = .Text
to:
myStr = replace(.Text,"-"," ")

But replace was added in xl2k.

If you're using xl97 (or have to support it):
myStr = application.substitute(.Text,"-"," ")

Michael Koerner wrote:
>
> Dave;
>
> That worked. Now how do I replace the - with a space. when I do a search
> and
> replace, it changes the whole thing back into a dd-mmm-yy which is
> different
> from the original dd-mmm-yyyy sequence.
>
> --
>
> Regards
> Michael Koerner
>
> "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> news:4A706DD0.E7C36F15@verizonXSPAM.net...
> Try:
>
> Dim myRng As Range
> Dim myCell As Range
> Dim myStr As String
>
> Set myRng = Selection
> For Each myCell In myRng.Cells
> With myCell
> myStr = .Text
> .NumberFormat = "@"
> .Value = myStr
> End With
> Next myCell
>
> Michael Koerner wrote:
> >
> > Tried your solution. All I got in place of the dates was a bunch of
> > numbers.
> > Thanks
> >
> > --
> >
> > Regards
> > Michael Koerner
> >
> > "Dave Peterson" <petersod@verizonXSPAM.net> wrote in message
> > news:4A6F74DC.4248D47B@verizonXSPAM.net...
> > Select the range to fix first:
> >
> > Dim myRng as range
> > dim myCell as range
> >
> > set myrng = selection
> > myrng.numberformat = "@"
> > for each mycell in myrng.cells
> > mycell.value = mycell.text
> > next mycell
> >
> > .text is what you see in the cell (after formatting). If the column is
> > too
> > narrow, you could see ###'s and this will keep those ###'s--so be a
> > little
> > careful.
> >
> > Michael Koerner wrote:
> > >
> > > I have a sheet with a two columns containing dates. Sometimes it is
> > > the
> > > full
> > > date as an example 25-Jul-1936, or Jul-1936 or 1936 I would like to
> > > be
> > > able
> > > to convert that to text and maintain the same face value. Is that
> > > possible
> > > with some sort of macro?
> > >
> > > --
> > >
> > > Regards
> > > Michael Koerner
> >
> > --
> >
> > Dave Peterson
>
> --
>
> Dave Peterson

--

Dave Peterson

Ben Bacarisse

9/14/2014 12:02:00 AM

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/2...
>
> 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.

JJ

9/14/2014 4:01:00 AM

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/2...
>
> 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.

enrique.melero

9/14/2014 7:54:00 AM

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

Thomas 'PointedEars' Lahn

9/14/2014 9:49:00 AM

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

comp.lang.javascript

Use of bind

enrique.melero

Dave Peterson

Michael Koerner

Dave Peterson

Michael Koerner

Michael Koerner

Ben Bacarisse

JJ

enrique.melero

Thomas 'PointedEars' Lahn

x Login to ForumsZone