javaScript高级教程(二)Scope Chain & Closure Example
<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312 />
<title>js</title>
<script>
//function语句在解析时会被提升，不管function语句放置在哪里，
//它都会被移动到所在作用域的顶层。
addEvent(window,'load',initAnchors); function initAnchors(){
for(var i=1; i<=3; i++){
var anchor = $('anchor'+i);
registerListener(anchor,i); //函数中函数，也就是闭包，registerListener可以保存外部变量的值。
}
};
/*
把事件处理函数注册到一个独立的函数中。 现在click事件处理函数的外部作用域变成了registerListener()函数。 每次调用registerListener()函数时都会生成该函数的一个副本，
以维护正确的变量作用域。
*/
function registerListener(anchor,i){
addEvent(anchor,'click',function(){
alert('my id is anchor'+i);
});
}
/*
因为i的值实际上是单击事件发生时才从作用域链中取得。
当单击事件必发生时，initAnchors()已经执行完毕（验证：在循环加入alert(i)后，打开网页会弹出三次框）。
此时i=4。所以alert会显示相同信息。 具体来说，当click事件处理函数被调用时，它会先在事件处理函数的内部作用域中查找i的值，
但click事件的匿名处理函数中没有定义i的值，所以它再到其外部作用域（initAnchors()函数）中查找。
而外部作用域中i=4。 function initAnchors(){
for(var i=1; i<=3; i++){
//alert(i);
var anchor = $('anchor'+i);
addEvent(anchor,'click',function(){
alert('my id is anchor'+i);
});
}
}; */
function addEvent( node, type, listener ) {
if (node.addEventListener) {
// W3C method
node.addEventListener( type, listener, false );
return true;
} else if(node.attachEvent) {
// MSIE method
//使用attachEvent()注册的回调函数没有Event参数，需要读取Window对象的event属性
//使用attachEvent()作为全局函数调用。而不是事件发生其上的文档元素的方法来调用
//也就是说attachEvent()注册的回调函数执行时，this指向window对象，而不是事件目标元素。
//下面修正这些问题
node['e'+type+listener] = listener;
node[type+listener] = function(){
node['e'+type+listener]( window.event );
} //IE事件模型不支持事件捕获，所以需要两个参数
node.attachEvent( 'on'+type, node[type+listener] ); return true;
} // Didn't have either so return false
return false;
}; function $() {
var elements = new Array(); // Find all the elements supplied as arguments
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i]; // If the argument is a string assume it's an id
if (typeof element == 'string') {
element = document.getElementById(element);
} // If only one argument was supplied, return the element immediately
if (arguments.length == 1) {
return element;
} // Otherwise add it to the array
elements.push(element);
} // Return the array of multiple requested elements
return elements;
};
</script>
</head> <body>
<ul>
<li><a href="#" id="anchor1">Anchor 1</a></li>
<li><a href="#" id="anchor2">Anchor 2</a></li>
<li><a href="#" id="anchor3">Anchor 3</a></li>
</ul> </body>
</html>
javaScript高级教程(二)Scope Chain & Closure Example的更多相关文章
- JavaScript高级教程
JavaScript高级教程 基础总结深入 数据类型 分类 you are so nb! undefined :undefined string :任意字符串 sybmol: object:任意对象, ...
- JavaScript 入门教程二 在HTML中使用 JavaScript
一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...
- JavaScript高级程序设计(二)：在HTML中使用JavaScript
一.使用<script>元素 1.<script>元素定义了6个属性: async:可选.表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本 ...
- 《JavaScript高级教程》学习笔记一、变量和数据类型
JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...
- javaScript高级教程(八)-----正则表达式温故知新
1.RegExp对象:五个属性二个方法 五个属性:global, ignoreCase,multiline,lastIndex,source 二个方法: exec()--模式匹配 test()--检测 ...
- javaScript高级教程(七)正则表达式中括号三种常见作用
括号用来将子表达式标记起来,以区别于其他表达式 比如很多的命令行程序都提供帮助命令,键入 h 和键入 help 的意义是一样的,那么就会有这样的表达式: h(elp)? 字符h之后的elp可有可无这里 ...
- javascript高级语法二
一.BOM对象 1.什么是BOM对象? BOM是浏览器对象模型,核心对象就是window,所有浏览器都支持 window 对象.一个html文档对应一个window对象,主要功能是控制浏览器窗口的, ...
- JavaScript高级应用(二)（转）
1.组件是否安装 //组件是否安装 isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "com ...
- javascript高级教程：如何优化javascript代码性能
在web前端开发中,为实现一些动态效果,减小页面大小,我们一般都会使用JavaScript技术来进行相关设置.但是初学者在编写JavaScript代码的时候,往往都是比较低质的代码,那如何才能提高Ja ...
随机推荐
- osg内置shader变量
uniform int osg_FrameNumber:当前OSG程序运行的帧数: uniform float osg_FrameTime:当前OSG程序的运行总时间: uniform float o ...
- WP8.1学习系列(第九章)——透视Pivot开发指南
Windows Phone 8 的 Pivot 控件 2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows P ...
- springbatch---->springbatch的使用（三）
这里我们对上篇博客的例子做一个修改性的测试来学习一下springbatch的一些关于chunk的一些有用的特性.我渐渐能意会到,深刻并不等于接近事实. springbatch的学习 一.chunk的s ...
- Python pyQt4/PyQt5 学习笔记3(绝对对位,盒布局,网格布局)
本节研究布局管理的内容. (一)绝对对位 import sys from PyQt4 import QtGui class Example(QtGui.QWidget): def __init__( ...
- linux下抓包学习--tcpdump的使用
一.为什么需要学这个 很多时候,开发环境上不会出现问题.但在测试或者现场时,总是会有很多莫名其妙的问题. 这时候,能在出问题的环境上,开启抓包,然后再去重现问题的话,这时候,就可以拿到第一手的资料了. ...
- ELK系列六：Logstash的Filter模块
Date过滤 input { stdin{ codec => plain } } filter { date { match => ["message", " ...
- window上安装pymysql
date: 2018-11-26 18:54:04 安装: cmd: pip install pymysql 验证: cmd: python >>import pymysql 不报错即 ...
- 23种设计模式之状态模式（State）
状态模式是一种对象的行为型模式,允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类.状态模式封装了状态的转换过程,但是它需要枚举可能的状态,因此,需要事先确定状态种类,这也导致在状 ...
- jdbc(1)(三)DBCP、C3P0、Proxool 、 BoneCP开源连接池的简介
简介 使用评价 项目主页 DBCP DBCP是一个依赖Jakarta commons-pool对象池机制的数据库连接池.DBCP可以直接的在应用程序用使用 可以设置最大和最小连 ...
- 使用Wireshark分析QQ聊天