javascript 中的 this 与 事件注册 及event [转]

本文不讨论 语法解释期和执行期的区别 以及上下文环境和闭包的概念 我们只从另一个角度来看问题.

js 中的this 是一个指针 他指象某个对象. 那么 一般来说 记住一条原则 即可：

如果一个函数不是作为类 来实例化某个对象 如 new func();

而是当 函数 做为某个对象的 方法被调用时 则 this 就指向该对象;

如果该函数是直接被调用 则this指向全局变量...

这句话似乎不好理解. 我们看下例子：

function test(){

this.name='franky';

}

var o={};

o.t=test;

o.t();//此处test方法是作为 对象o的方法t 被调用的.则 其内部的this 就指向 对象o .则此时 test内部的 this.name='franky' 等价于 o.name='franky'

alert(o.name);//打印franky

但 如果我们 直接调用 test(); 方法 则 因为他不是作为某个对象的方法被调用. 而是直接被调用 所以 this指向了全局变量

此时 我们可以直接 alert(window.name);或 alert(name);来 访问全局变量的 属性name了.

那么我们现在来看一看 事件注册

事件注册 有3种方式

1 硬编码 . 即在 html element 中直接写事件注册.如:

<div id="div1" onclick="alert(this.id)">测试</div>

2 js块中的传统方式 如:

document.getElementById('div1').onclick=function(){alert(this.id);}

3 使用 attachEvent 和addEventListener 来注册事件.

这当中比较经典的 则是 Jquery作者封装的 addEvent方法.虽然他有很多不足. 具体的后面解释.

那么现在. 我们来看看 1 硬编码格式

<div id="div1" onclick="alert(this.id)">测试</div>

为什么这里的this 会指向 div1 这个element呢?

答案是 .. 硬编码格式 的事件注册. 浏览器会把 你的代码 封装到一个 (匿名)函数中去.

我们此时 可以通过 打印div1的onclick属性来 看一看

alert(document.getElementById('div1').onclick)//注意这里不是onclick()

我们会看到 ie打印了 function anonymous(){} //看名字就知道. 他就叫匿名函数

opera 打印 function (event){}//恩. 这个是标准的匿名函数了

safari chrome ff 打印 function click(event){}// 这里 此三个浏览器 给 包装函数 一个对应事件的名字 .

到了这里.我们就能看出 . 当div1 click事件发生时. 浏览器会做什么呢? 是的 他会试图去执行 div1.onclick()//如果他现在是一个方法的话

大概的过程 是 if(div1.onclick)div1.onclick(); 所以呢 现在包装函数 是作为 div1这个element对象的方法被浏览器调用的 则 其内部的this 指向div1 就顺理成章了.

那么 情况也就明朗了 硬编码 和 js块 中 的 document.getElementById('div1')=function(){alert(this.id)}

是一回事. 所以 此时 我们 甚至可以 直接 执行这个方法 而不是通过事件去触发它. 即 div1.onclick();//直接执行..

但有一点 我们要注意. 我们人工 调用 该方法 不会产生浏览器事件. 他只会执行 alert(this.id); 这一句.

那么 我们看看 浏览器事件触发执行又是什么过程呢?

如果您仔细看了 硬编码的 onclick 应该不难发现 w3c浏览器的包装函数 无论叫什么 . 但他总是有个叫event的形参.

是的. 这个就是事件对象. 所以 我们在 硬编码环境中 不仅仅可以 直接用this来引用 当前的element 还可以直接用event 来引用 事件对象.

而且这样写. 是兼容全部浏览器的. 原因是 w3c的包装函数有一个叫event的型参 而ie 呢? window.event可以简写为 event 则同样获取了当前的事件对象....

那么 最后再老生常谈一下. w3c浏览器 在事件触发 回调函数时 会传过去一个参数 .但ie不会

所以 我们在非硬编码的情况下 可以如此获取参数

obj.onclick=function(e){

e=e||window.event;//w3c浏览器 e是对象 是对象做逻辑运算时 即true 即使 是 if(new Boolen(false))//这里也是true

//而ie中 因为 不会传事件对象过来. 所以此时e==undefined.则 e=window.event

}

好了. 这就是 为什么 很久很久以前我们 常用的硬编码注册事件 可以直接兼容所有浏览器的原因. 事实上 这是因为 各个浏览器在向 ie 致敬 ....包装函数型参名叫event 所导致的..

但 你千万不要以为 我们 把 型参叫event 就可以 在js块中 不需要e=e||window.event了

比如:

obj.onclick=function(event){

event//记得 这个和硬编码是不同的. 这里的event 在ie中仍然是undefiend 这是由于 作用域所导致的. event此时是局部变量.具体原因请自己思考.

}

那么 关于硬编码 最后要提的 就只剩下一条了. 硬编码环境中 我们可以省略this. 如:

<div id="div1" onclick="alert(this.id)">测试</div>

完全等价于

<div id="div1" onclick="alert(id)">测试</div>

各个浏览器都支持这样写 是因为 局部变量 他会先到 element的属性表中去找.然后才是全局. 但我十分不建议这样用.甚至也不建议硬编码. 原因大家都能理解.

那么 既然今天的主题 首先是this. 我们则接着说说this 的2个特别情况.

1. call 和applay

是的 这两个方法的作用就是修改 this指针 所指向的对象. 而他们的唯一区别是传参的方式. 具体的请去查看手册. 这里就不再罗嗦了. 看代码:

function test(){

this.name='franky';

}

var o={};

var o2={};

o.t=test;

o.t();// 此时 o.name=='franky';

但是如果是

o.t.call(o2);//只执行此句 则 o.name=='undefined' o2.name=='franky'. 是的 call 把方法t中的 this 强制指向了 o2.

这就是 call和applay的 作用 . 在js的继承中 你可能会看到 类似下面的代码:

function ClassA(){

this.name='franky';

}

function ClassB(){

ClassA.call(this);//这里执行ClassA时 只是把ClassA当作普通的 函数来执行.不同的是 通过call修改了 ClassA方法中this的引用.让它指向了ClassB的实例.

}

此时. 我们

var obj=new ClassB();

实例化一个ClassB 创建一个副本即 对象obj . 我们要知道的是. ClassB() 和new ClassB() 都会导致 ClassB的执行. 即使我们写做 var obj=new ClassB;

那么根据js的规则. 此时 ClassB中的this会;指向obj 那么 其内部的 ClassA.call(this); 等价于 ClassA.call(obj); 即ClassA中的this 被call 修改为指向obj

那么 ClassA内部的 this.name='franky' 最终就等价于 obj.name='franky';// 这就实现了 动态属性和方法的继承.

如果我们真的理解了这里 . 我们就应该明白. 为什么 这种继承方式. 无法继承 ClassA原型属性和方法. 而只能继承动态属性和方法.

再看看 new 到底干了什么

function NEW (Class){//山寨版的 new Class为欲实例化的构造函数..

var obj={};

obj.__proto__=Class.prototype;

// __proto__属性对于ie来说是不可见的。你可以在ff中测试 这里是要先绑定 然后再call的

//所以 为什么 我们可以用 在构造函数内 用 if(this instanceof arguments.callee) 来判断 是不是 用new 来调用构造函数.

//当然 这个判断方法 并不是100%的 如果构造函数 作为其实例的方法被调用 上面的条件一样成立...不过这种需求 基本不可能出现.

var returnValue=Class.call(obj);

if(typeof returnValue=='object' &&returnValue!=null) return returnValue;

return obj;

}

到了这里 随着AJAX 的广泛应用.我们不得不提一个很特别的事 就是

ie中的 xhr对象 的onreadystatechange 方法中的this 不指向xhr. 这一事实.

这非常不符合 我们所学习到的 理论体系.

var xhr=new XMLHttpRequest;

xhr.onreadystatechange=function(){this//ie中 this很遗憾的不指向xhr}

但ie7中不知道是不是因为支持了本地的 XMLHttpRequest 而不是 activex的缘故.似乎解决了这个问题.但为了兼容性.

所以我们要这样做

xhr.onreadystatechange=function(){handler.call(xhr);}

function handler(){......}

好了. 到了这里 基本上就把this 搞清楚了...

如果你想深入的理解 this的关系 是如何被维护的 则 可以看一看 javascript权威指南. 里面对this引用 有更底层的说明. 可以看看js是如何通过原型链来维护这种关系.

ps: 似乎写着写着 就没收住.. 越写越多. 那么只好把 关于 事件注册的就简单说一下好了 关于jquery作者的写的 addEvent 以及他的缺点 :

1. 内存泄露

2.无法解决attachEvent忽略重复注册

3.注册同一对象的同一事件的几个方法后 执行顺序相反的问题

4. 因为 其修复了this引用问题. 却导致了一个新的问题. 同一个构造函数的多个实例的 同一原型方法 注册到 同一element的同一事件上时 会导致 _this指向最后一个被 实例化对象的问题.

以上这些问题 1和4 是 其为了修复this引用而导致的新问题 而2 和3 则是attachEvent所固有的问题.

而 addEventListener 则完全没有任何一个问题 实在是非常完美.

而 Dean Edwards 在几年前写了 2个版本的 addEvent 你可以去 他的blog看一看. 虽然仍然有些问题. 不过却 也有优点.

他完全放弃了 attachEvent和addEventListener .而使用传统方式 借助guid 来实现 灵活注册事件和删除事件注册

.那么 所有头疼的 问题 都来自ie的 attachEvent .所以借助老外们常说的一句话 结束本章 : IE SUCKS !!!

来源：/article/5103276.html