bind或者bindAsEventListener都是生成一个闭包,将一个函数廷迟执行,这是函数式编程的一个特征.关于闭包,网上有很多资料供你查询,如果有不明白的地方再提问好了bindEventListener的真正意义(或者大多数作用于)在绑定的个this指针,并将event作为handler的第一个参数比如:
function jsclass(){
var div = document.createElement('div');
div.onclick = fn.bindEventListener(this);
this.fn = function(e){
alert(e);
}
}
上面你给出的一个函数,两个版本区别不大,主要在于是否有返回值,我们可以看个简单的例子(实际上并不一定是这么用的),主要是看区别:
<script type="text/javascript">
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>
function jsclass(){
var div = document.createElement('div');
div.onclick = fn.bindEventListener(this);
this.fn = function(e){
alert(e);
}
}
上面你给出的一个函数,两个版本区别不大,主要在于是否有返回值,我们可以看个简单的例子(实际上并不一定是这么用的),主要是看区别:
<script type="text/javascript">
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>
解决方案 »
- 为什么我网站的图片会重复下载?有什么解决方法没?
- 如何修改数据库的同时更新js(javaScript)文件
- JavaScript声明一个变量用来储存图标
- 中国三级城市列表框选择,报错,Firebug第11行
- 用js改变字体大小。。。document.getElementById("mytd").style.FontSize=xx;为何没效果
- 高分请教使用javascirpt编写对象的问题。
- 如何去除字符串的首尾“▓”号
- 请问用window.open打开的窗口(去掉状态栏等一些东西)怎样一出来就是最大化的?
- 秋水,能给我个解释吗?
- 贴出你自己最为优秀的、最有自豪感的一段javascript代码,可以是...
- 快, 急....新手問題!!!!!!!!!!! 100分
- JS操作DIV的问题
function jsclass(){
var div = document.createElement('div');
div.onclick = fn.bindEventListener(this);
this.fn = function(e){
alert(e);
}
}
上面你给出的一个函数,两个版本区别不大,主要在于是否有返回值,我们可以看个简单的例子(实际上并不一定是这么用的),主要是看区别:
<script type="text/javascript">
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>
function jsclass(){
var div = document.createElement('div');
div.onclick = fn.bindEventListener(this);
this.fn = function(e){
alert(e);
}
}
上面你给出的一个函数,两个版本区别不大,主要在于是否有返回值,我们可以看个简单的例子(实际上并不一定是这么用的),主要是看区别:
<script type="text/javascript">
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>
function jsclass(){
var div = document.createElement('div');
div.onclick = fn.bindEventListener(this);
this.fn = function(e){
alert(e);
}
}
上面你给出的一个函数,两个版本区别不大,主要在于是否有返回值,我们可以看个简单的例子(实际上并不一定是这么用的),主要是看区别:
<script type="text/javascript">
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>
function fn() {
var a = [];
for (var i=0; i<3; i++) {
a.push (
function () {
alert('never-online test ' +i);
} );
}
return a;
}
var arr = fn();
for (var i=0, len=arr.length; i<len; i++) {
arr[i]();//每次都会是3
}
</script>如果有不明白的地方再提问好了bindEventListener的真正意义(或者大多数作用于)在绑定的个this指针,并将event作为handler的第一个参数比如:
function jsclass(){
var div = document.createElement('div');
div.onclick = fn.bindEventListener(this);
this.fn = function(e){
alert(e);
}
}
上面你给出的一个函数,两个版本区别不大,主要在于是否有返回值,我们可以看个简单的例子(实际上并不一定是这么用的),主要是看区别:
<script type="text/javascript">
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>
//这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。
Function.prototype.bindAsEventListener = function(object){...}
//在Function原型上增加prototype,则所有function()都能继承到这个方法。
function z();
alert(z.bindAsEventListener);
//做一个指针,指向Function<--请注意是Function而不是bindAsEventListener
var __method = this;
return function(event) {
__method.call(object, event ¦ ¦ window.event);
}
//返回一个函数。请注意是返回一个函数而不是函数结果,否则函数内部并没有返回结果不就永远成了undefined了.call()要理解。这个说起来有点麻烦。举个例子: var a = {
val : "a",
run : function(val){
alert(val)
}
}
var b = {
val : "b"
}
a.run.call(b, "c");
//a的run方法召唤b来调用它,参数是"c"。b并没有run方法。相当于b.run = c.run;b.run("c");的这么过程。
根据bindAsEventListener字面意思,用上面这些代码写个例子<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}
</script>
</head>
<body>
<div id="test" style="background-color:#ccc; padding:20px;">aaaaaaaaaaaaaaaaaaaaaaa</div> <script type="text/javascript">
//方便起见,重新封装getElementById。自然它也具备bindAsEventListener方法
function $(id){ return document.getElementById(id); }
//定义一个事件监听方法
function show(){ alert(arguments[0]); }
//获取Element
var div = $("test");
//绑定事件作为div的事件监听器,在onclick时触发 如果使用addEventListener可绑定多个方法。
div.onclick = show.bindAsEventListener(div);
</script>
</body>
</html>此时,点击div时会调用show方法alert出事件名称。ff下事件名称较为具体,比较适合测试。1.4下多了个return我想没有太多奥妙,我想可能就是show()如果要返回值的话,方便获取值。没用过prototype框架,也没有上下文,差不多就这意思吧。
//这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。
Function.prototype.bindAsEventListener = function(object){...}
//在Function原型上增加prototype,则所有function()都能继承到这个方法。
function z();
alert(z.bindAsEventListener);
//做一个指针,指向Function<--请注意是Function而不是bindAsEventListener
var __method = this;
return function(event) {
__method.call(object, event ¦ ¦ window.event);
}
//返回一个函数。请注意是返回一个函数而不是函数结果,否则函数内部并没有返回结果不就永远成了undefined了.call()要理解。这个说起来有点麻烦。举个例子: var a = {
val : "a",
run : function(val){
alert(val)
}
}
var b = {
val : "b"
}
a.run.call(b, "c");
//a的run方法召唤b来调用它,参数是"c"。b并没有run方法。相当于b.run = c.run;b.run("c");的这么过程。
根据bindAsEventListener字面意思,用上面这些代码写个例子<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}
</script>
</head>
<body>
<div id="test" style="background-color:#ccc; padding:20px;">aaaaaaaaaaaaaaaaaaaaaaa</div> <script type="text/javascript">
//方便起见,重新封装getElementById。自然它也具备bindAsEventListener方法
function $(id){ return document.getElementById(id); }
//定义一个事件监听方法
function show(){ alert(arguments[0]); }
//获取Element
var div = $("test");
//绑定事件作为div的事件监听器,在onclick时触发 如果使用addEventListener可绑定多个方法。
div.onclick = show.bindAsEventListener(div);
</script>
</body>
</html>此时,点击div时会调用show方法alert出事件名称。ff下事件名称较为具体,比较适合测试。1.4下多了个return我想没有太多奥妙,我想可能就是show()如果要返回值的话,方便获取值。没用过prototype框架,也没有上下文,差不多就这意思吧。
//这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。
Function.prototype.bindAsEventListener = function(object){...}
//在Function原型上增加prototype,则所有function()都能继承到这个方法。
function z();
alert(z.bindAsEventListener);
//做一个指针,指向Function<--请注意是Function而不是bindAsEventListener
var __method = this;
return function(event) {
__method.call(object, event ¦ ¦ window.event);
}
//返回一个函数。请注意是返回一个函数而不是函数结果,否则函数内部并没有返回结果不就永远成了undefined了.call()要理解。这个说起来有点麻烦。举个例子: var a = {
val : "a",
run : function(val){
alert(val)
}
}
var b = {
val : "b"
}
a.run.call(b, "c");
//a的run方法召唤b来调用它,参数是"c"。b并没有run方法。相当于b.run = c.run;b.run("c");的这么过程。
根据bindAsEventListener字面意思,用上面这些代码写个例子<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}
</script>
</head>
<body>
<div id="test" style="background-color:#ccc; padding:20px;">aaaaaaaaaaaaaaaaaaaaaaa</div> <script type="text/javascript">
//方便起见,重新封装getElementById。自然它也具备bindAsEventListener方法
function $(id){ return document.getElementById(id); }
//定义一个事件监听方法
function show(){ alert(arguments[0]); }
//获取Element
var div = $("test");
//绑定事件作为div的事件监听器,在onclick时触发 如果使用addEventListener可绑定多个方法。
div.onclick = show.bindAsEventListener(div);
</script>
</body>
</html>此时,点击div时会调用show方法alert出事件名称。ff下事件名称较为具体,比较适合测试。1.4下多了个return我想没有太多奥妙,我想可能就是show()如果要返回值的话,方便获取值。没用过prototype框架,也没有上下文,差不多就这意思吧。
//这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。
Function.prototype.bindAsEventListener = function(object){...}
//在Function原型上增加prototype,则所有function()都能继承到这个方法。
function z();
alert(z.bindAsEventListener);
//做一个指针,指向Function<--请注意是Function而不是bindAsEventListener
var __method = this;
return function(event) {
__method.call(object, event ¦ ¦ window.event);
}
//返回一个函数。请注意是返回一个函数而不是函数结果,否则函数内部并没有返回结果不就永远成了undefined了.call()要理解。这个说起来有点麻烦。举个例子: var a = {
val : "a",
run : function(val){
alert(val)
}
}
var b = {
val : "b"
}
a.run.call(b, "c");
//a的run方法召唤b来调用它,参数是"c"。b并没有run方法。相当于b.run = c.run;b.run("c");的这么过程。
根据bindAsEventListener字面意思,用上面这些代码写个例子<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}
</script>
</head>
<body>
<div id="test" style="background-color:#ccc; padding:20px;">aaaaaaaaaaaaaaaaaaaaaaa</div> <script type="text/javascript">
//方便起见,重新封装getElementById。自然它也具备bindAsEventListener方法
function $(id){ return document.getElementById(id); }
//定义一个事件监听方法
function show(){ alert(arguments[0]); }
//获取Element
var div = $("test");
//绑定事件作为div的事件监听器,在onclick时触发 如果使用addEventListener可绑定多个方法。
div.onclick = show.bindAsEventListener(div);
</script>
</body>
</html>此时,点击div时会调用show方法alert出事件名称。ff下事件名称较为具体,比较适合测试。1.4下多了个return我想没有太多奥妙,我想可能就是show()如果要返回值的话,方便获取值。没用过prototype框架,也没有上下文,差不多就这意思吧。
1、bind方法将作用域转移到指定的object对象上,而定义普通函数其作用域默认是this。
2、bindAsEventListener用于绑定事件。
<a href="http://www.g.cn/">a</a>
<script type="text/javascript">
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event || window.event);
};
}
document.getElementsByTagName('a')[0].attachEvent('onclick', function () {
return false; //这里实质上等同于event.returnValue = false;
}.bindAsEventListener(window));
</script>
16楼的朋友,你说的我还是不太明白。另外有个疑问,2-13楼上哪儿去了?地震都影响到这儿了? :)
这个函数的作用是,用来返回一个,接收event对象的函数.然后这个函数里的内容是
执行,执行.bindAsEventListener ,方法那个函数.并且this指向执行.bindAsEventListener传入的第一个参数.
return function(event) {
return __method.call(object, event || window.event);
};
和
return function(event) {
__method.call(object, event || window.event);
};
到底是什么区别,实际用的时候发现有没有return都一样,但是从代码感觉上又不一样。实在是困惑。或许还是对.call方法的理解不透彻。
相当于
var test = function(event){...}
return test;
而不是
return test();所以在function(event)内部加不加return对bind来说是没有区别的,因为这个function(event)并没有执行。而我在文章中提到的那个show函数才是真正执行的方法;换成show的话,可以改写成
1.3
return function(event) {
show(event);
};
1.4
return function(event) {
return show(event);
}; div.onclick = function(event) {
return show(event);
};
象onclick这种void操作,此时return与否根本无关紧要。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event || window.event);
}
}
</script>
</head>
<body>
<div id="test" style="background-color:#ccc; padding:20px;">aaaaaaaaaaaaaaaaaaaaaaa</div> <script type="text/javascript">
function $(id){ return document.getElementById(id); }
var ref = null;
var div = $("test");
function show(){ return arguments[0]; } //注意这里return
div.onclick = function(event){
this.innerHTML = "Event is " + show.bindAsEventListener(div)(event || window.event);
}
</script>
</body>
</html>
var __method = this;
return function(event) {
return __method.call(object, event || window.event);
}
}这是给function的原形加上了个函数。谁调用bindAsEventListener,谁就是这个__method.那么为什么不直接这样? Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return __method.call(object, event || window.event);
}还要多一层return fucntion(event) 呢? 以下有个使用的例子<button id="button"><button>function testmethod()
{
...
}Event.observe($('button'), 'onclick', testmethod,false);就是给button加上一个onclick处理函数 testmethod.从字面理解是这个意思吧。
而另外一种用法在一个对象里面
Event.observe($('dialogOk'),"onclick",this.forCallback.bindAsEventListener(this),false);
从字面理解,bindAsEventListener返回就的就应该是testmethod类似的东西,而不是在testmethod外边又包了一层
fucntion(event)
{
testmethod();
}这就是我理解不了的。
function fn() {
var a = [];
for (var i=0; i<3; i++) {
a.push (
function () {
alert('never-online test ' +i);
} );
}
return a;
}
var arr = fn();
for (var i=0, len=arr.length; i<len; i++) {
arr[i]();//每次都会是3
}
</script>如果有不明白的地方再提问好了bindEventListener的真正意义(或者大多数作用于)在绑定的个this指针,并将event作为handler的第一个参数比如:
function jsclass(){
var div = document.createElement('div');
div.onclick = fn.bindEventListener(this);
this.fn = function(e){
alert(e);
}
}
上面你给出的一个函数,两个版本区别不大,主要在于是否有返回值,我们可以看个简单的例子(实际上并不一定是这么用的),主要是看区别:
<script type="text/javascript">
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>wc的例子里已经给出加"尾巴"的例子(带返回值demo)给你了,关键就在于理解闭包还有this这个指针
如果把function当成一个过程,而返回值是一个结果的话..
你这里改写的
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return __method.call(object, event ¦ ¦ window.event);
}
就是一个结果,而非一个过程,我们要的是过程,方便以后调用
改一下
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
var __rtn = function(event) {
__method.call(object, event|| window.event);
}
return __rtn;
} Function.prototype.bindAsEventListener = function(object) {
var __method = this;
var __rtn = function(event) {
return__method.call(object, event|| window.event);
}
return __rtn;
} 请问,如果这样说的话,上下2个__rtn 是一样的吗?如果不一样,为什么实际调用效果又一样呢?兄弟我正在绕弯子,请兄弟们多担待。:)
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
return__method.call(object, event ¦ ¦ window.event);
}
}
改成这样,
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return __method.call(object, event ¦ ¦ window.event);
} 我是理解为.call并不会真正去执行__method,只是把__method的上下问给换了,然后把__method又返回回去,所以返回去的也是过程,不是结果。所以我觉得把
return function(event) {
return__method.call(object, event ¦ ¦ window.event);
}
改成
return__method.call(object, event ¦ ¦ window.event);
也没什么不行。我这么理解大概是错误的,因为实际过程里要这样改了程序就该报错了。我就是不太明白错在哪儿,总是想搞明白return回去的那个玩意是个什么东西。
//<![CDATA[
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListener1 = function(object) {
var __method = this;
return function(event) {
return __method.call(object, event|| window.event);
}
}function test () {
var div = document.createElement('div');
var fn = this.clickHandle.bindAsEventListener(this);
var fn1 = this.clickHandle.bindAsEventListener1(this);
return {'a': fn, 'b': fn1};
}test.prototype.clickHandle = function(e) {
return 'never-online';
}var a = new test();
alert(a.a());
alert(a.b());
//]]>
</script>关于这段代码, BlueDestiny 看我这么理解对不对。
实际上对于bindAsEventListener,有没有return没有关系,它只是返回了一个__method,也就是实际调用它的方法的一个指针。在这段代码里是clickHandle方法,有return和没有return的区别在于。那个clickHandle方法里有没有return的值。
如果clickHandle里有return,那么bindAsEventListener有return就能得到返回值。
如果实际调用bindAsEventListener的方法中没有return值的话,那么bindAsEventListener里面return不return,效果是一样的。我考虑问题,总是不自觉按java c#的方式去考虑,感觉一个function里再return 一个function,好象就是一个class里又new了一个class,并把这个new的class返回回去。
function P1() {
this.name = "jack";
}
var p1 = new P1();//返回{name:"jack"}function P2() {
this.name = "jack";
return "tom";
}
var p2 = new P2();//注意:返回仍然是{name:"jack"}对象,而不是"tom"function P3() {
this.name = "jack";
reutrn {name:"tom"};
}
var p3 = new P3();//这次返回的不再是{name:"jack"},而是{name:"tom"}
//<![CDATA[
Function.prototype.LazyExcecute = function (obj) {
var f = this;
return function () {
return f.apply(obj||null, arguments);
}
} Function.prototype.returnValue = function (obj) {
var f = this;
var a = Array.prototype.slice.call(arguments,1)||[];
return f.apply(obj||null,a);
}
function fn(message) {
alert(message);
}
var f = fn.LazyExcecute();
//var b = fn.returnValue(); var arg = 'never-online';
f(arg);
//b(arg);
//]]>
</script>上面的例子,一个是lazy执行,一个是即时执行,你上文的例子中提到的就不即时的执行.先不看bind/bindAsEventListener,看我上面的e.g:
1,试想,我要在执行时才知道参数,所以你有两个办法,一个是等到参数到来时再执行,二是用闭包,从现在的代码来说,就是return 一个function.比如BindAsEventListener event参数
2.lazy execute.堕性执行.为什么要这样?即便我们可以即时执行,那么假如我有一百个这样的需求,你每次运行都一次运行了100个函数...而我又不是立刻就要用到这些函数的返回值,lazy execute就是这个功能,可以提高速度.
一就是你说的为什么要放在一个function里并返回回来,
二是为什么1.31直接 __method.call... 而1.4要 return __method.call .. 有什么区别现在基本弄清楚了。如果说不放在一个function里,直接去调用 __method.call,那么这个闭包无法形成。
至于问题二,经过我测试还是有区别的。比如说把一个方法 checkform(){.... return true/false} 绑到一个submit 按钮时,如果1.31的方法,不采用return,即便checkform return 了 false 那么也无法中断表单提交。
而1.4的是可以的。而BlueDestiny兄弟说的lazy执行,却不太明白。如果BlueDestiny 心情好,就多说几句吧。
感谢众位兄弟们。特别是BlueDestiny,Navymk 。可能我虽然疑惑,但是描述问题描述的不清楚,害兄弟们这么费劲。致歉了。:)
而如果在用户点击一个节点的时候,我再去组合它的字节点的HTML,压力自然小了.这就是lazy执行的意思.
貌似lazy和闭包没啥区别的
我觉得lz现在应该放松一下,分散一下注意力,干点别的,等待恍然大悟的瞬间。
JScript code
//这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。
Function.prototype.bindAsEventListener = function(object){...}JScript code
//在Function原型上增加prototype,则所有function()都能继承到这个方法。
function z();
alert(z.bindAsEventListener);JScript code
//做一个指针,指向Function<--请注意是Function而…
<head>
</head>
<body>
<form action="http://www.sina.com.cn" target="_blank">
<input type="submit" id="btn1" value="btn1" name="btn1"></input>
<input type="submit" id="btn2" value="btn2" name="btn2"></input>
<input type="submit" id="btn3" value="btn3" name="btn3"></input></form>
<script type="text/javascript">
//<![CDATA[
function $(id)
{
return document.getElementById(id);
}Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event|| window.event);
}
} Function.prototype.bindAsEventListenerR = function(object) {
var __method = this;
/*
这里如果不是return function(event),那么返回的就不是一个对象,而是直接对__mehtod.call的调用
也就会去确认this.clickHandle方法,而在此时,this.clickHandle真正的函数体还没有被赋值,因为
真正的赋值是在对象外,执行setClick方法的时候。也就是绑定时只是绑定了个指针,或者说是标记,真正
执行的函数体要在之后,在类的外边输入。 如果用return function(event),相当于用了个匿名对象包装了一下 “__method.call” ,当运行时点
button的时候,这个匿名对象才去执行__method.call(object, event|| window.event); 把相应的上
下文替换,并执行__method,得到真正的__method的方法实体。然后设置给button的onclick事件。 也就是说,如果有return function(event),那么就是在实际运行时才去确定真正执行的函数体。
而没有,那么就在绑定的时候,就要去确定要执行的函数体,当然这时候函数体并为定义,也就提示“还未定义” 或者说,如果没有return function(event),那么绑定上去的是 __method.call 的执行结果。
如果有return function(event)包装,那么返回的就是__method.call 自身,而不是执行结果。
这是否就是 lazy 机制呢 ? 至于返回结果,__method.call 前面有没有return 区别在于是否返回给真正绑定上的事件。也就是btn.onclick
是否返回 true/false; btn1用的是没有return的,btn2用的是有return的,看一下效果就知道对于btn的onclick事件,返回值有没有起作用 而对于btn3,没有使用bindAsEventListener,在点的时候会发现,alert的this.name 不是myclass,而是btn3,也就
说明,对于btn3的onclick来说,运行时他的this指针指向的不是我们希望的myclass,而是html对象,也就是指向了
btn3。因为在clickHandle方法里要访问myclass内部的变量,例如:this.name,我们希望的这个this是myclass,而
不是所指定的html的对象,因此,直接这么设置是不对的。还好,btn3也有.name属性,否则程序就会报告没有
this.name了。
*/
return function(event) {
return __method.call(object, event|| window.event);
}
}var name = "global";var myclass = function()
{
//debugger;
this.name = "myclass"; //给类一个名字
this.click = null; //类的一个方法变量,接受外边传进来的function
this.clickHandle=function(e)
{
var runtimename = "myclass_instance";
window.status = runtimename;
if ( this.click ) {
var __rtn = this.click (this.name);
alert('this.name:' + this.name);
alert('__rtn:' + __rtn);
return __rtn;
}
};
this.setClick=function(val)
{
this.click=val;
}
$('btn1').onclick = this.clickHandle.bindAsEventListener(this);
//带return ,有区别,表单不提交了,也就是返回了false给btn2的onclick
$('btn2').onclick = this.clickHandle.bindAsEventListenerR(this);
//如果不用indAsEventListener,直接指定,那么运行时这个this就是btn3,而不是我希望的myclass
$('btn3').onclick = this.clickHandle;
var __t = this; //设置个临时变量,看看this是什么东西。
};var m = new myclass();
function callback ( str )
{
//... 函数体
return false;
}
m.setClick ( callback ); //]]>
</script>
</body>
</html>以上是我思考的结果,各位看是不是这么个意思。
设置ie为可调试,然后执行页面,当选择调试器的时候选vs2005,可以单步跟踪执行的流程。
如果js指针无法指定或者说是混乱,那么this就是window
写多js就明白了,要一会说清倒不是很好,会让人糊涂.以前做过的某些实验:
http://www.never-online.net/blog/article.asp?id=117