<!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. java的两种冒泡算法

    所谓的冒泡算法,就是给数组进行排序,可以根据以小到大的顺序,也可以根据以小到大的顺序,在数组的封装类java.util.Arrays通过sort方法进行按升序的排序.那不用类的话怎么进行呢? 思路一: ...

  2. 敏捷开发中的Scrum流程和术语【转】

    任何人力流程都离不开人来执行,所以在讲解Scrum流程之前,有必要先把Scrum中的角色讲一下. 一天,一头猪和一只鸡在路上散步,鸡看了一下猪说,“嗨,我们合伙开一家餐馆怎么样?”,猪回头看了一下鸡说 ...

  3. MyEclipse中自定义maven命令（添加maven 命令）

    关于常用的Maven命令 mvn archetype:create :创建 Maven 项目 mvn compile :编译源代码 mvn test-compile :编译测试代码 mvn test ...

  4. C语言EOF是什么？

    C语言 EOF是什么? Linux中,在新的一行的开头,按下Ctrl-D,就代表EOF(如果在一行的中间按下Ctrl-D,则表示输出"标准输入"的缓存区,所以这时必须按两次Ctrl ...

  5. ANDROID – TOOLBAR STEP BY STEP（转）

    今年(2014) 的 Google I/O 發表令多數人為之一亮的 Material Design,而 Google 也從「Google I/O 2014」 開始,大家也陸陸續續地看到其更新的 And ...

  6. win7 默认程序设置

    1. . 2. 3. 4. 双击某个程序-->选择浏览 目标程序 .即可完成

  7. how-to-build-c-static-libraries-boost

    http://tungchingkai.blogspot.jp/2016/11/how-to-build-c-static-libraries-boost.html How to build C++ ...

  8. LeetCode 20 Valid Parentheses （括号匹配问题）

    题目链接 https://leetcode.com/problems/valid-parentheses/?tab=Description   Problem: 括号匹配问题. 使用栈,先进后出!   ...

  9. 升级后重启造成fsck.ext3: Unable to resolve UUID

    这篇文章帮了我的大忙了:转载自:http://wilber82.blog.51cto.com/1124820/724472 今天在做服务器补丁部署,有一台ESX4.1的服务器在升级后重启过程中挂了,通 ...

  10. Oracle SQL Developer保持数据库连接的方法

    一.概述 从navicat切到pl/sql developer,但是发现个bug,因为本地客户端pl/sql developer的字符集 和数据库服务器的字符集不一致,导致一个很奇葩的东西. 本来我有 ...