文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

分析JavaScript闭包特性

2024-04-02 19:55

关注

这篇文章主要介绍“分析JavaScript闭包特性”,在日常操作中,相信很多人在分析JavaScript闭包特性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”分析JavaScript闭包特性”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

首先先简要总结闭包特性:

· 函数的局部变量在函数返回之后仍然可用

· 栈上的内存空间在函数返回之后仍在存在,不被回收

给个例子。下面这段代码会返回一个函数的引用:

function sayHello2(name) {

    var text = 'Hello ' + name; // Local variable

    var sayAlert = function() { alert(text); }

    return sayAlert;

}

say2 = sayHello2('Bob');

say2(); // alerts "Hello Bob"

对于这段代码,C程序员可能会认为sayAlert和say2一样,都是指向一个函数的指针。但实际上它俩有一个重要区别: 在JavaScript中,你可以认为一个函数的指针变量同时拥有两个指针。一个指向这个函数,另一个隐藏的指针指向一个闭包。

重点在于你的函数内是否引用的外部变量。

在JavaScript中,如果你在一个函数内定义一个新的函数,那么这个新的函数就是一个闭包。 对于C或者其他高级语言,函数执行结束并返回之后,它所占用的栈空间将被释放回收。函数内定义的局部变量将不再可用。但在JavaScript中,并不这样。如上所示,函数执行结束后,它所占用的栈空间并不会被全部回收。

上面是基本理论。更进一步,再来一个例子:

function say667() {

    // Local variable that ends up within closure

    var num = 666;

    var sayAlert = function() { alert(num); }

    num++;

    return sayAlert;

}

var sayNumber = say667();

sayNumber(); // alerts 667

这个例子说明:闭包中使用的函数局部变量并非是值拷贝,而是引用。say667()执行结束之后number所在的那块内存的值为667,而sayNumber()是在say667()执行结束之后才执行,当它访问number所在的内存时,结果自然也是667。

再进一步,看看用closure时易发生的错误的例子:

function buildList(list) {

    var result = [];

    for (var i = 0; i < list.length; i++) {

        var item = 'item' + list[i];

        result.push( function() {alert(item + ' ' + list[i])} );

    }

    return result;

}

function testList() {

    var fnlist = buildList([1,2,3]);

    // Using j only to help prevent confusion -- could use i.

    for (var j = 0; j < fnlist.length; j++) {

        fnlist[j]();

    }

}

时刻保持清醒:变量是在内存里的,闭包使用的是内存的引用而不是那块内存的值拷贝。

当你在循环中定义函数(闭包)的时候得小心,它可能并不像你最开始想的那样工作。关键有两个:

· 子函数使用的是外部函数的局部变量的引用。

· 循环内只是定义了子函数,并没有执行这个字函数。

最后,来一个最抽象的例子:

function newClosure(someNum, someRef) {

    // Local variables that end up within closure

    var num = someNum;

    var anArray = [1,2,3];

    var ref = someRef;

    return function(x) {

        num += x;

        anArray.push(num);

        alert('num: ' + num +

            '\nanArray ' + anArray.toString() +

            '\nref.someVar ' + ref.someVar);

      }

}

obj = {someVar: 4};

fn1 = newClosure(4, obj);

fn2 = newClosure(5, obj);

fn1(1); // num: 5; anArray: 1,2,3,5; ref.someVar: 4;

fn2(1); // num: 6; anArray: 1,2,3,6; ref.someVar: 4;

obj.someVar++;

fn1(2); // num: 7; anArray: 1,2,3,5,7; ref.someVar: 5;

fn2(2); // num: 8; anArray: 1,2,3,6,8; ref.someVar: 5;

这个例子说明,闭包的创建时机是在函数被调用的时候。每次函数调用都会生成一个新的闭包,也就是一块新的内存区域。因为函数每次调用都会新分配一块栈内存,这是一回事。

最后我自己来总结一下闭包:

· 函数的局部变量在其他地方被引用

· 闭包有两种基本情况:闭包的返回值是一个函数,它其中使用了该闭包的局部变量;闭包内定义了内部函数,内部函数引用了闭包的局部变量

· 每次函数调用,都会生成一个新的闭包,分配新的内存

实例:(滑过tab)

window.onload= function(){

var tits = $('#tabTit1 li');

var cons = $('#tabCon1 .con');

var len = cons.length;

var liChange = function(){

for(var n=0;n<len;n++){

tits[n].className = tits[n].className.replace(/\s*cur/g,'');

cons[n].className = cons[n].className.replace(/\s*cur/g,'');

}

}

for(var i = 0; i<tits.length; i++){

tits[i].i = i;

tits[i].onmouseover = function(){

liChange();

cons[this.i].addClass('cur');

tits[this.i].addClass('cur');

}

}

};

到此,关于“分析JavaScript闭包特性”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯