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 ...
随机推荐
- Jquery 网页转换为图片
/* html2canvas 0.5.0-alpha1 <http://html2canvas.hertzen.com> Copyright (c) 2015 Niklas von Her ...
- Python OS 文件/目录方法
Python OS 文件/目录方法 os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: 序号 方法及描述 1 os.access(path, mode) 检验权限模式 2 os. ...
- 题目1447：最短路(Floyd算法)
题目链接:http://ac.jobdu.com/problem.php?pid=1447 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...
- 第二步 （仅供参考） sencha touch 使用cmd打包apk
最新版本的cmd可以直接将sencha touch项目打包成本地应用,不过还有很多不足,本文仅供参考 通过sencha app build native命令可以直接将项目打包成本地应用,不过在命令运行 ...
- vmware12如何安装macOSX虚拟机
vmware默认是不支持创建OSX系统的虚拟机的,但是安装一个名为unlocker208的破解补丁之后就可以安装了. 下载的地址和使用的方法参考这个地址:http://www.jb51.net/sof ...
- SSH 服务器不用密码
1 A: user assh-keygen -t rsa 2 Created a directory on B, if ~/.ssh exists, which is fine.a@A:~> s ...
- C# .ToString()格式化 常用数据转化小总结
1.百分比 ; ; string p = ((double)i / j).ToString("P");//结果:200.00% p = string.Format("{0 ...
- MassTransit
http://stackoverflow.com/questions/15485317/newbie-is-a-consumer-queue-necessary-in-order-for-publis ...
- 【LOJ6077】「2017 山东一轮集训 Day7」逆序对 生成函数+组合数+DP
[LOJ6077]「2017 山东一轮集训 Day7」逆序对 题目描述 给定 n,k ,请求出长度为 n的逆序对数恰好为 k 的排列的个数.答案对 109+7 取模. 对于一个长度为 n 的排列 p ...
- JDBC 连接数据库，包含连接池
1.不使用连接池方式(Jdbc) 1.1 工具类(JdbcUtil.java) package com.jdbc.util; import java.io.IOException;import jav ...