zoukankan      html  css  js  c++  java
  • javascript自启动函数的问题

    话不多说了。

    先来看两段代码:

    var elems = document.getElementsByTagName('a');
    
    for (var i = 0; i < elems.length; i++) {
    
    	alert(i);
        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + i);
        }, 'false');
    }

    再看一面一段:

    var elems = document.getElementsByTagName('a');
    
    for (var i = 0; i < elems.length; i++) {
    
    	(function(index){
    		 elems[i].addEventListener('click', function (e) {
    			e.preventDefault();
    			alert('I am link #' + index);
    		}, 'false');
    	})(i);
    }
    HTML 代码如下:

    <body>
    	<a href = "#">a</a>
    	<a href = "#">a</a>
    	<a href = "#">a</a>
    	<a href = "#">a</a>
    	<a href = "#">a</a>
    	<a href = "#">a</a>
    	<a href = "#">a</a>
    	<a href = "#">a</a>
    </body>

    你可以想像下,前后两段 script代码的效果。

    如果你能看出来效果的区别,那么恭喜你。至少我思考了很久,才明白里面的玄妙。

    是的。你没有看错,这里的第一段代码,无论你点击哪一个链接,输出的都是 I am link # 8.

    第二段代码,才是你真正想要的结果,那么为什么呢。

    看下面的代码:

    var elems = document.getElementsByTagName('a');
    
    for (var i = 0; i < elems.length; i++) {
    
    	alert(i);
        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + i);
    		//注意这里的回调函数只有的触发的时候才会启动
    		//一样,这里的i的值也一样在循环结束的时候也变化了
        }, 'false');
    
    	//原因在于
    	//这里的elems[i] 虽然是引用的元素 
    	//但是回调函数中的i 已经在循环结束后
    	//变成了8(如果 elems 的长度是 8 的话)
    }

    var elems = document.getElementsByTagName('a');
    
    for (var i = 0; i < elems.length; i++) {
    
    	(function(index){
    		 elems[i].addEventListener('click', function (e) {
    			e.preventDefault();
    			alert('I am link #' + index);
    		}, 'false');
    	})(i);
       //而这里的则不一样
       //虽然循环结束后i 的值变成了8
       //但是在封装在闭包内的index 确实一直被locked 住的
       //一直保存在内存中。
       //准确的说 应该是整个函数都lock在内存中.
    
    }


    这里可能需要一些javascript闭包的知识。

    以上代码,想了很久,记录下来,以防止忘记。



  • 相关阅读:
    javascript,函数声明和函数表达式
    javascript,小数值舍入操作方法:ceil()、floor()、round()
    javascript,子字符串操作方法:Slice()、Substr()、Substring()的区别
    javascript,第一个基于node.js的Http服务
    javascript,创建对象的3种方法
    MFC学习笔记2——MFC和Win32
    Qt下 QString转char*
    [转载] Qt程序在Windows下的mingw发布
    VC 获取当前时间
    MFC 对话框设计问题(控件的使用)
  • 原文地址:https://www.cnblogs.com/yangzhi/p/3576532.html
Copyright © 2011-2022 走看看