|
#2
frankqnj2010-04-07 00:15
如果this在 根环境 就是不在任何函数体内的话 则 this 指向window对象
如果this在函数体 内 则 这个函数 作为某个对象的方法 被调用时 则this指向该对象 如: var obj={}; obj.func=function(){this//此时this指向 obj 这个对象} 如果 一个函数 是直接调用 而不是作为某对象的方法调用的话.其内部的this 也指向window对象 如: f();//直接调用的话 则函数f内的this 指向window对象 function f(){alert(this==window);} 而html标签 中硬编码注册的事件回调函数中的this 如 <div onclick="alert(this.innerHTML);" style="background-color:#000;">我是div的内容</div> 当你点击 这个div的时候 执行alert(this.innerHTML);" this会指向 这个div 对象 所以 打印的就是 div.innerHTML 也就会打印出 我是div的内容 这个字符串. 这个原因 是 "alert(this.innerHTML);" 这部分语句看起来象是 直接调用 其实 是会被浏览器封装到一个 函数中去 .这个函数各个浏览器 都有些细微的差别. 比如ie 是 function anonymous(){} safari chrome ff 中 是 function click(event){} opera中 是function (event){} 不管他们叫什么 但是函数内部的逻辑 在这里就是 alert(this.innerHTML). 而且这个函数 会被挂到 div.onclick 这个方法上去 这个本质就是观察者模式 实现的委托回调. 一旦浏览器解释到 div onclick="...." 语句时 所做的就是 我们以前常用的 事件注册 一样的事 即 执行 div.onclick=function(//非ie event){此处是你硬编码 js 表达式...} 当click事件发生时 浏览器就会 找到事件源 以及该事件冒泡的所有节点 并检查 其对应的 onclick 目前是不是有效的方法 如果是 则执行 即 div.onclick && typeof div.onclick=='function' && div.onclick();//如果是非ie 则 为 div.onclick(event); 即把click的事件对象 作为实参传给该函数 所以onclick 是作为div的 方法被调用的 所以其内部的this 会指向div 也就是指向注册事件的节点对象. 对于this 还有两个特例 这两个特例 本质来说 都是ie浏览器 所具有的 或者叫他们bug 可能更合适 一个是 ie6 ajax的 核心对象 xhr.onreadystatechange=function(){} 很遗憾这个回调函数内部的this 并不指向xhr 这是个bug 再就是 ie所特有的 事件注册方法 nodeObj.attachEvent 方法 该方法直接注册的函数 其内部的this 不指向我们期望的 nodeObj 节点对象. 当然这些问题 我们都可以修复 知道就可以了 最好要说的就是 call和apply 我来写连各个函数模拟一下 apply和call的逻辑 你就会明白他们是怎么回事 Function.prototype.Apply = function(obj, arr) { obj = obj || window; obj._tempFunction = this; var rv; if (!arr) rv = obj._tempFunction(); else { var args = []; for (var i = 0, len = arr.length; i < len; i++) args.push('arr[' + i + ']'); rv = eval("obj._tempFunction(" + args + ")"); } delete obj._temFunction; return rv; } Function.prototype.Call = function() { return this.Apply(Array.prototype.shift.Apply(arguments), arguments); } var obj = {}; function f(a,b,c) { alert(this == obj);//看看Apply和Call 是不是把函数内的this 指向了 obj对象 alert(a + b + c); } f(1, 2, 3); f.Apply(obj, [4, 5, 6]); f.Call(obj, 7, 8, 9); |
<form name="everything"> <!-- A one-of-everything HTML form... -->
<table border="border" cellpadding="5"> <!-- in a big HTML table -->
<tr>
<td>Username:<br>[1]<input type="text" name="username" size="15"></td>
<td>Password:<br>[2]<input type="password" name="password" size="15"></td>
<td rowspan="4">Input Events[3]<br>
<textarea name="textarea" rows="20" cols="28"></textarea></td>
<td rowspan="4" align="center" valign="center">
[9]<input type="button" value="Clear" name="clearbutton"><br>
[10]<input type="submit" name="submitbutton" value="Submit"><br>
[11]<input type="reset" name="resetbutton" value="Reset"></td></tr>
<tr>
<td colspan="2">
Filename: [4]<input type="file" name="file" size="15"></td></tr>
<tr>
<td>My Computer Peripherals:<br>
[5]<input type="checkbox" name="peripherals" value="modem">56K Modem<br>
[5]<input type="checkbox" name="peripherals" value="printer">Printer<br>
[5]<input type="checkbox" name="peripherals" value="tape">Tape Backup</td>
<td>My Web Browser:<br>
[6]<input type="radio" name="browser" value="nn">Netscape<br>
[6]<input type="radio" name="browser" value="ie">Internet Explorer<br>
[6]<input type="radio" name="browser" value="other">Other</td></tr>
<tr>
<td>My Hobbies:[7]<br>
<select multiple="multiple" name="hobbies" size="4">
<option value="programming">Hacking JavaScript
<option value="surfing">Surfing the Web
<option value="caffeine">Drinking Coffee
<option value="annoying">Annoying my Friends
</select></td>
<td align="center" valign="center">My Favorite Color:<br>[8]
<select name="color">
<option value="red">Red <option value="green">Green
<option value="blue">Blue <option value="white">White
<option value="violet">Violet <option value="peach">Peach
</select></td></tr>
</table>
</form>
<div align="center"> <!-- Another table--the key to the one above -->
<table border="4" bgcolor="pink" cellspacing="1" cellpadding="4">
<tr>
<td align="center"><b>Form Elements</b></td>
<td>[1] Text</td> <td>[2] Password</td> <td>[3] Textarea</td>
<td>[4] FileUpload</td> <td>[5] Checkbox</td></tr>
<tr>
<td>[6] Radio</td> <td>[7] Select (list)</td>
<td>[8] Select (menu)</td> <td>[9] Button</td>
<td>[10] Submit</td> <td>[11] Reset</td></tr>
</table>
</div>
<script>
// This generic function appends details of an event to the big Textarea
// element in the form above. It is called from various event handlers.
function report(element, event) {
var elmtname = element.name;
if ((element.type == "select-one") || (element.type == "select-multiple")){
value = " ";
for(var i = 0; i < element.options.length; i++)
if (element.options[i].selected)
value += element.options[i].value + " ";
}
else if (element.type == "textarea") value = "...";
else value = element.value;
var msg = event + ": " + elmtname + ' (' + value + ')\n';
var t = element.form.textarea;
t.value = t.value + msg;
}
// This function adds a bunch of event handlers to every element in a form.
// It doesn't bother checking to see if the element supports the event handler,
// it just adds them all. Note that the event handlers call report( ) above.
// Note that we're defining event handlers by assigning functions to the
// properties of JavaScript objects rather than by assigning strings to
// the attributes of HTML elements.
function addhandlers(f) {
// Loop through all the elements in the form
for(var i = 0; i < f.elements.length; i++) {
var e = f.elements[i];
e.onclick = function( ) { report(this, 'Click'); }
e.onchange = function( ) { report(this, 'Change'); }
e.onfocus = function( ) { report(this, 'Focus'); }
e.onblur = function( ) { report(this, 'Blur'); }
e.onselect = function( ) { report(this, 'Select'); }
}
// Define some special-case event handlers for the three buttons:
f.clearbutton.onclick = function( ) {
this.form.textarea.value=''; report(this,'Click');
}
f.submitbutton.onclick = function ( ) {
report(this, 'Click'); return false;
}
f.resetbutton.onclick = function( ) {
this.form.reset( ); report(this, 'Click'); return false;
}
}
// Finally, activate our form by adding all possible event handlers!
addhandlers(document.everything);
</script>
中e.onclick ，e.onfocus等等事件处理器代码中this的含义什么。。很困惑。给小弟讲讲，先谢谢了。。。