Function
Download as PPT, PDF0 likes213 views
This document discusses two functions for binding functions to objects in JavaScript: 1. bind() guarantees that a function will execute with a specific object as its this reference when called, by binding the function to that object. 2. bindAsEventListener() is similar but also guarantees that the event object will be passed as the first argument, useful for binding functions as event listeners. Additional arguments passed to bindAsEventListener will follow the event object. 3. An example demonstrates binding a function as a click handler using bindAsEventListener(), so that the function executes with the correct this and receives the event and additional arguments.
![Function-bind bind(thisObj[, arg...]) -> Function Provides a guaranteed-binding equivalent of the original function, possibly with pre-filled arguments Prototype can guarantee that your function will execute with the object you want under the this reference, just by invoking bind on it \ Example; This following is a basic usage, just guaranteeing the reference:](https://image.slidesharecdn.com/function-1225166606387888-9/85/Function-2-320.jpg)
![Function-bindAsEventListener bindAsEventListener(thisObj[, arg...]) -> Function An event-specific variant of bind , which makes sure the function will get the current event object as first argument.. Prototype lets you bind a function as an event listener Need to specify first what object is to be guaranteed as the this reference when the function executes Prototype guarantees that its first argument will be the current event Any arguments you specify in the remainder of your call to bindAsEventListener will appear next in the arguments list.](https://image.slidesharecdn.com/function-1225166606387888-9/85/Function-4-320.jpg)
Function
- 2. Function-bind bind(thisObj[, arg...]) -> Function Provides a guaranteed-binding equivalent of the original function, possibly with pre-filled arguments Prototype can guarantee that your function will execute with the object you want under the this reference, just by invoking bind on it \ Example; This following is a basic usage, just guaranteeing the reference:
- 3. Function-bind var obj = { name: 'A nice demo' , fx: function () { alert(this.name); } }; window.name = 'I am such a beautiful window!' ; function runFx(f) { f(); } var fx2 = obj.fx.bind(obj); runFx(obj.fx); runFx(fx2);
- 4. Function-bindAsEventListener bindAsEventListener(thisObj[, arg...]) -> Function An event-specific variant of bind , which makes sure the function will get the current event object as first argument.. Prototype lets you bind a function as an event listener Need to specify first what object is to be guaranteed as the this reference when the function executes Prototype guarantees that its first argument will be the current event Any arguments you specify in the remainder of your call to bindAsEventListener will appear next in the arguments list.
- 5. Function-bindAsEventListener Need to pass a method as an event listener. Example; var obj = { name: 'A nice demo' , fx: function (e) { var tag = Event.element(e).tagName.toLowerCase(); var data = $A (arguments).shift(); alert(this.name + '\nClick on a ' + tag + '\nOther args: ' + data.join( ', ' ));}}; Event.observe(document.body, 'click' , obj.fx.bindAsEventListener(obj, 1 , 2 , 3 )); // -> Any click on the page displays obj.name, the lower-cased tag name of the // clicked element, and "1, 2, 3".