<!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. Ubuntu下Eclipse的安装方法

    1. 下载jre,eclipse,cdt 其中jre是java运行环境,eclipse需要先装jre,才可能运行,cdt是在eclipse中运行c\c++程序的插件. 1.1 下载jre 网址是:ja ...

  2. 查看sql server日志

    如果是查询当前已经连接到服务器的用户 select loginame, * from master.dbo.sysprocesses 查看sql 的操作日志记录 SELECT * From ::fn_ ...

  3. .net中单选按钮RadioButton，RadioButtonList 以及纯Html中radio的用法实例？

    .net中单选按钮RadioButton,RadioButtonList 以及纯Html中radio的用法,区别? RadioButton实例及说明: <asp:RadioButton ID=& ...

  4. Oralce分析函数

    1 列传行  listagg(city,',')  within GROUP (order by city)    over (partition by nation) rank with temp ...

  5. Material Design系列第六篇——Defining Custom Animations

    Defining Custom Animations //自定义动画 This lesson teaches you to //本节课知识点 Customize Touch Feedback //1. ...

  6. 【VI】如何删除匹配指定字符串的行（已解决）

    命令: g/pattern/d 如,删除包含字母 hell 的行 g/hell/d 删除 不 匹配指定字符的行(未验证,有需要的朋友可以试一下) v/pattern/d g!/pattern/d

  7. mac Intellij Idea Tmocat 启动报 Error running Tomcat: /conf/Catalina

    原因:主要是tomcat下Catalina目录没有权限导致,将其设置读写权限即可 如果在刚刚启动tomcat时出现以下问题:Error running Tomcat 8.5.31: Error cop ...

  8. telnet命令的使用方法

    大家都知道,Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成远程主机工作的能力.在终端使用者的电脑上使用telnet程 ...

  9. testmath

    $\Huge ans = \frac{ \sum\limits_{i=1}^{m}{ (x_i - \bar{x})^2 } }{m} \cdot m^2 \\$

  10. Artech的MVC4框架学习——第七章Action的执行

    概况:Action的执行不仅包含action方法的执行,还包含相关筛选器的执行. 第一基于线程池的请求,http请求称谓工作线程(p321),基于线程池优势:工作线程重用和工作线程数量的限制. 第二两 ...