The Trick
The problem is as follows: Methods use this
to refer to the object it is a method of. But, when using a method as event handler or callback function, this
does no longer point to that object. The trick is to use the closure like behaviour of functions, so that the method will always have access to it's object.
Let's look at an example: We want to use a method of an Alerter class as an event handler.
function Alerter(text) {
this.text=text;
var me=this;
this.invoke=function () {
alert(me.text);
}
}
var sayHi=new Alerter('Hello, world!');
div.attachEvent('onclick', sayHi.invoke);
So, instead of using this
, we use a variable me
, that equals this
when the invoke
method is created. And, in contrast to this
, me
will keep refering to the correct Alerter
object, even when it's passed as a function to the attachEvent method of an HTML element.
Higher Order Programming again
window.setTimeout
is an often used function for dynamic webpages. It waits for a given amount of time, and then calls a callback function. The above defined sayHi
function can be used as a callback function: setTimeout(sayHi.invoke,2000)
will show an alert box after 2 seconds. But what if we want to be extra cool and show 2 alert boxes after those 2 seconds? Then we'd have to create a new function that calls both Alerter objects:
var sayHi=new Alerter('Hello, world!');
var sayBye=new Alerter('Bye, world!');
setTimeout(function() {sayHi.invoke();sayBye.invoke();},2000);
A nice feature of Microsoft's delegates is that you can create a single composite deligate from several delegates. It looks less messy than inserting an anonymous function. Let's do that in Javascript too, by extending the function prototype.
Function.prototype.andThen=function(g) {
var f=this;
return function() {
f();g();
}
};
Now we can write:
setTimeout((sayHi.invoke).andThen(sayBye.invoke),2000);
Several callbacks
With the andThen
method, it becomes very easy to create an object that allows several other objects to register callbacks.
function Manager() {
this.callback=function () {}; // do nothing
this.registerCallback=function(callbackFunction) {
this.callback=(this.callback).andThen(callbackFunction);
}
}
var manager=new Manager();
manager.registerCallback(sayHi.invoke);
manager.registerCallback(sayBye.invoke);
manager.callback();
分享到:
相关推荐
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
Javascript Event Handlers
官方离线安装包,亲测可用
python库。 资源全名:pydap.handlers.netcdf-0.6.1-py2.6.egg
资源来自pypi官网。 资源全名:pydap.handlers.sql-0.1.1-py2.7.egg
python库,解压后可用。 资源全名:lambda_handlers-1.0.3-py3-none-any.whl
资源来自pypi官网。 资源全名:lambda_handlers-1.0.3-py3-none-any.whl
python库。 资源全名:fabric_am_handlers-0.12-py3-none-any.whl
│ └── handlers │ └── users.js │ └── lib ├── package.json └── serverless.yml 组态 打开serverless.yml配置文件,然后: 添加plugins部分 在其中添加我们新的serverless-func
资源分类:Python库 所属语言:Python 资源全名:django-ohm2-handlers-light-0.1.19.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
资源分类:Python库 所属语言:Python 资源全名:pollination_handlers-0.5.0-py2.py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
总结了IE 5 ,页面的所有事件 Dom Event Handlers/Dom 事件处理函数
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
NULL 博文链接:https://qtlkw.iteye.com/blog/1887380
官方版本,亲测可用
官方版本,亲测可用