<!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. 51单片机的idata,xdata,pdata,data的详解（转）

    data: 固定指前面0x00-0x7f的128个RAM,可以用acc直接读写的,速度最快,生成的代码也最小. bit :是指0x20-0x2f的可位寻址区idata:固定指前面0x00-0xff的2 ...

  2. 《C++标准程序库》笔记之三

    本篇博客笔记顺序大体按照<C++标准程序库(第1版)>各章节顺序编排. ---------------------------------------------------------- ...

  3. Android对touch事件的拦截，在View Tree上的传递顺序

    当发生touch事件时,系统会产生一个MotionEvent并且沿着View Tree开始传递.首先获取MotionEvent是View Tree的根节点,根节点通常是一个ViewGroup,View ...

  4. linux mutex

    #include <iostream> #include <queue> #include <cstdlib> #include <unistd.h> ...

  5. python爬虫---->github上python的项目

    这里面通过爬虫github上的一些start比较高的python项目来学习一下BeautifulSoup和pymysql的使用.我一直以为山是水的故事,云是风的故事,你是我的故事,可是却不知道,我是不 ...

  6. c++ 类内static成员初始化

    类内部的static成员,除了为const static 且为整数类型(int char bool)可在类内部初始化. 其他的都建议在对应的cpp文件中进行初始化. test.h #ifndef TE ...

  7. 给Repeater控件里添加序号的5种方法

    Repeater是我们经常用的一个显示数据集的数据控件,经常我们希望在数据前显示数据的序号,那么我们该怎么为Repeater控件添加序号呢?下面编辑为大家介绍几种常用的为Repeater控件添加序号的 ...

  8. Word 2010 制作文档结构之章节自动编号

    参考:https://jingyan.baidu.com/article/37bce2be129fcc1002f3a2f9.html 1.打开需要章节编号的论文 2.设置格式 注意,这里相同级别的标题 ...

  9. 让人一看就懂的excel相对引用和绝对引用案例解析

    http://www.ittribalwo.com/article/2831.html 内容提要:本文的excel相对引用和绝对引用.混合引用的使用方法案例截选自<Excel效率手册 早做完,不 ...

  10. sencha touch 2.3.1 list emptyText不显示

    如图所示,有时候没有取到任何的数据. 那么我们就需要显示没有获取到内容这一类提示,显示内容通常通过emptyText这个属性来配置. 但是在sencha touch 2.3.1之中有可能会出问题,所以 ...