首页  >  文章  >  web前端  >  JS闭包的特性分析

JS闭包的特性分析

小云云
小云云原创
2018-03-06 13:55:491658浏览

在body标签中,添加一个u标签,其id为node,ul标签下面有5个li标签。如何在点击不同的li 标签时,弹出其li下标?
1)首先需要获得ul节点  var  node = document.getElementsById(‘node’)  
2) 获得node节点下子节点  var  list = node.children  
**3)给子节点循环添加onclick事件(此处注意,会存在闭包问题)。for(var i=0;i< list.length; i++){
list[i].onclick = function()console.log(i)}} ,从打印的结果发现,每次输出的都是7。**
4)分析输出7,由于i 采用var声明为全局变量,指向同一个地址。循环执行后,i的值为7,因此每次循环打印的结果均为7
采用两种方式解决,1)声明块级作用域变量,每次传进来i,都用let j = i, 接收。

let j = i; 
list[i].onclick = function(){console.log(j)}

在function方法,调用了块级变量j,该变量并不会被垃圾回收。每次for循环均指向不同的地址,因此触发点击事件时,可以正确打印其下标 2)采用闭包来解决。

list[i].onclick = function(i){ 
return function(){console.log(i)}。 
}

**解读闭包
闭包就是能够读取其他函数内部变量的函数。在JavaScript语言中,只有函数内部的子函数才能读取局部变量。可以简单将闭包理解为“定义在一个函数内部的函数”。本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

注意:使用闭包会使得函数中的变量被保存在内存中,内存消耗较大,因此不能滥用闭包,将会造成网页的性能问题,在IE浏览器中可能导致内存泄漏。。结局办法,在退出函数之前,将不使用的局部变量全部删除。

借助别人的例子。供大家参考

var name = "this window";
var object = {
    name :"my object",
    getNameFunc:function () {
        return function () {
            return this.name;
        }
    }
}
alert(object.getNameFunc()());/弹出this window2 。此时this对象指向window对象
var object2 = {
    name: "my object",
    getNameFunc2: function () {
        var that = th is;
        return function () {
            return that.name;
        }
    }
}
alert(‘that’+object2.getNameFunc2()()); ///弹出my object。此时this对象指向object2对象

相关推荐:

简单理解JS闭包

JS闭包常见形式详解

JS闭包用法的示例代码分享

以上是JS闭包的特性分析的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn