<!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. win10找回Windows照片查看器

  2. Java中过滤器和拦截器的区别

    1.拦截器是基于java反射机制的,而过滤器是基于函数回调的. 2.过滤器依赖于servlet容器,而拦截器不依赖于servlet容器. 3.拦截器只对action起作用,而过滤器几乎可以对所有请求起 ...

  3. iOS - 实现语言本地化/国际化

      实现iOS语言本地化/国际化(图文详解) 前言 语言本地化,又叫做语言国际化.是指根据用户操作系统的语言设置,自动将应用程序的语言设置为和用户操作系统语言一致的语言.往往一些应用程序需要提供给多个 ...

  4. rabbitmq queue_declare arguments参数注释

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_26656329/article/details/77891793说明官方文档 在创建queue ...

  5. GitHub上整理的一些工具【转载】

    技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 ...

  6. IOS设计模式第七篇之观察者设计模式

    版权声明:原创作品,谢绝转载!否则将追究法律责任. 观察者设计模式 在观察者设计模式里面,一个对象通知其他的对象一些状态的改变.涉及这些对象不需要知道另一个对象---因此鼓励解耦设计模式.这个设计模式 ...

  7. 【Nginx】服务器中HTTP 301跳转到带www的域名的方法

    从nginx的官方文档 documentation, 正确的nginx https 301跳转到带www域名方法的方法如下: HTTP 301跳转到带www域名方法 需要两个server段. serv ...

  8. 【python系列】python初识

    前言 Python是一种高层次,解释,互动性和面向对象的脚本语言,Python被设计成具有很强的可读性语言.它采用应用关键字,而其他语言一般使用标点符号,并且具有比其他语言有较少的语法结构. Pyth ...

  9. 浏览器 User Agent字符串列表

    http://www.73207.com/useragent/ http://www.73207.com/useragent/pages/internet-2520explorer/index.htm ...

  10. 开发常见错误之 ：Missing artifact com.sun:tools:jar 1.7.0

    Missing artifact com.sun:tools:jar 1.7.0 解决办法一: 手动配置pom.xml,添加一个dependency如下: <dependency> < ...