<!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的更多相关文章

  1. JavaScript高级教程

    JavaScript高级教程 基础总结深入 数据类型 分类 you are so nb! undefined :undefined string :任意字符串 sybmol: object:任意对象, ...

  2. JavaScript 入门教程二 在HTML中使用 JavaScript

    一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...

  3. JavaScript高级程序设计(二)：在HTML中使用JavaScript

    一.使用<script>元素 1.<script>元素定义了6个属性: async:可选.表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本 ...

  4. 《JavaScript高级教程》学习笔记一、变量和数据类型

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...

  5. javaScript高级教程(八)-----正则表达式温故知新

    1.RegExp对象:五个属性二个方法 五个属性:global, ignoreCase,multiline,lastIndex,source 二个方法: exec()--模式匹配 test()--检测 ...

  6. javaScript高级教程(七)正则表达式中括号三种常见作用

    括号用来将子表达式标记起来,以区别于其他表达式 比如很多的命令行程序都提供帮助命令,键入 h 和键入 help 的意义是一样的,那么就会有这样的表达式: h(elp)? 字符h之后的elp可有可无这里 ...

  7. javascript高级语法二

    一.BOM对象 1.什么是BOM对象? BOM是浏览器对象模型,核心对象就是window,所有浏览器都支持 window 对象.一个html文档对应一个window对象,主要功能是控制浏览器窗口的, ...

  8. JavaScript高级应用(二)（转）

    1.组件是否安装 //组件是否安装 isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "com ...

  9. javascript高级教程：如何优化javascript代码性能

    在web前端开发中,为实现一些动态效果,减小页面大小,我们一般都会使用JavaScript技术来进行相关设置.但是初学者在编写JavaScript代码的时候,往往都是比较低质的代码,那如何才能提高Ja ...

随机推荐

  1. ISD9160学习笔记03_ISD9160音频解码代码分析

    录音例程涉及了录音和播放两大块内容,这篇笔记就先来说说播放,暂且先击破解码这部分功能. 我的锤子便签中有上个月记下的一句话,“斯蒂芬·平克说,写作之难,在于把网状思考,用树状结构,体现在线性展开的语句 ...

  2. eclipse cdt运行c程序报错“launch failed，binary not found”

    1. 安装了eclipsecdt版 2. 采用mingw 编译第一个c程序,报错“launch failed,binary not found”.检查是mingw下的bin目录在环境变量里设置错了. ...

  3. 队列Queue中add()和offer()的区别？

    区别:两者都是往队列尾部插入元素,不同的时候,当超出队列界限的时候,add()方法是抛出异常让你处理,而offer()方法是直接返回false

  4. Android中Adapter总结

    根据一个制作列表的程序开始练手,结果就出现了学习安卓的第一个代码问题 运行程序发现,虽然报错,但是可以成功运行程序. Android中Adapter功能为 显示ListView,最常用的有ArrayA ...

  5. SqlServer 连接远程服务器数据库 实现跨服务器联合查询

    第一种: exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 ' exec sp_addlinkedsrvlogin 'IT ...

  6. Python学习(20):Python函数(4):关于函数式编程的内建函数

    转自http://www.cnblogs.com/BeginMan/p/3178103.html 一.关于函数式编程的内建函数 apply()逐渐被舍弃,这里不讨论 1.filter() #filte ...

  7. 【git】 linux 环境安装git

    1 安装git依赖包 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUti ...

  8. python中级---->pymongo存储json数据

    这里面我们介绍一下python中操作mangodb的第三方库pymongo的使用,以及简单的使用requests库作爬虫.人情冷暖正如花开花谢,不如将这种现象,想成一种必然的季节. pymongo的安 ...

  9. Makefile伪目标

    https://www.zybuluo.com/lishuhuakai/note/210174 本节我们讨论一个Makefile中的一个重要的特殊目标:伪目标. 伪目标是这样一个目标:它不代表一个真正 ...

  10. [Sdoi2016]平凡的骰子

    描述 这是一枚平凡的骰子.它是一个均质凸多面体,表面有n个端点,有f个面,每一面是一个凸多边形,且任意两面不共面.将这枚骰子抛向空中,骰子落地的时候不会发生二次弹跳(这是一种非常理想的情况).你希望知 ...