Module Function
Function-bind <ul><li>bind(thisObj[, arg...]) -> Function </li></ul><ul><li>Provides a guaranteed-binding equivalent of th...
Function-bind <ul><li>var  obj = { </li></ul><ul><li>   name:  'A nice demo' , </li></ul><ul><li>   fx:  function () { </l...
Function-bindAsEventListener  <ul><li>bindAsEventListener(thisObj[, arg...]) -> Function  An event-specific variant of  bi...
Function-bindAsEventListener <ul><li>Need to pass a method as an event listener.  </li></ul><ul><li>Example; </li></ul><ul...
Upcoming SlideShare
Loading in...5
×

Function

260

Published on

Prototype Javascript

Published in: Technology, Economy & Finance
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
260
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Function

  1. 1. Module Function
  2. 2. Function-bind <ul><li>bind(thisObj[, arg...]) -> Function </li></ul><ul><li>Provides a guaranteed-binding equivalent of the original function, possibly with pre-filled arguments </li></ul><ul><li>Prototype can guarantee that your function will execute with the object you want under the this reference, just by invoking bind on it </li></ul><ul><li>Example; </li></ul><ul><li>This following is a basic usage, just guaranteeing the reference: </li></ul>
  3. 3. Function-bind <ul><li>var  obj = { </li></ul><ul><li>   name:  'A nice demo' , </li></ul><ul><li>   fx:  function () { </li></ul><ul><li>     alert(this.name); </li></ul><ul><li>   } </li></ul><ul><li>}; </li></ul><ul><li>window.name =  'I am such a beautiful window!' ;  </li></ul><ul><li>function  runFx(f) { </li></ul><ul><li>   f(); </li></ul><ul><li>} </li></ul><ul><li>  </li></ul><ul><li>var  fx2 = obj.fx.bind(obj); </li></ul><ul><li>runFx(obj.fx); </li></ul><ul><li>runFx(fx2); </li></ul>
  4. 4. Function-bindAsEventListener <ul><li>bindAsEventListener(thisObj[, arg...]) -> Function  An event-specific variant of bind , which makes sure the function will get the current event object as first argument..   </li></ul><ul><li>Prototype lets you bind a function as an event listener </li></ul><ul><li>Need to specify first what object is to be guaranteed as the this reference when the function executes </li></ul><ul><li>Prototype guarantees that its first argument will be the current event </li></ul><ul><li>Any arguments you specify in the remainder of your call to bindAsEventListener will appear next in the arguments list. </li></ul>
  5. 5. Function-bindAsEventListener <ul><li>Need to pass a method as an event listener. </li></ul><ul><li>Example; </li></ul><ul><li>var  obj = { </li></ul><ul><li>   name:  'A nice demo' , </li></ul><ul><li>   fx:  function (e) { </li></ul><ul><li>     var  tag = Event.element(e).tagName.toLowerCase(); </li></ul><ul><li>     var  data =  $A (arguments).shift(); </li></ul><ul><li>     alert(this.name +  ' Click on a '  + tag +  ' Other args: '  + data.join( ', ' ));}}; </li></ul><ul><li>  </li></ul><ul><li>Event.observe(document.body,  'click' , obj.fx.bindAsEventListener(obj,  1 ,  2 ,  3 )); </li></ul><ul><li>// -> Any click on the page displays obj.name, the lower-cased tag name of the  </li></ul><ul><li>//    clicked element, and &quot;1, 2, 3&quot;. </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×