JavaScript 变量的作用域及闭包

与闭包有关的概念:变量的作用域和变量的生存周期。下面本篇文章就来给大家介绍一下JS中变量的作用域及闭包,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

一、变量的作用域

1、变量的作用域指变量有效的范围,与变量定义的位置密切相关,作用域是从空间的角度来描述变量的,也可以理解为变量的可见性。在某个范围内变量是可见的,也就是说,变量是可用的。

2、按照作用域的不同,变量可分为全局变量和局部变量。

● 全局变量:在全局环境中声明的变量

● 局部变量:在函数中声明的变量

● 当函数在执行时,会创建一个封闭的执行期上下文环境,函数内部声明的变量仅可在函数内部使用,外部无法访问,而全局变量则在任何地方都可以使用

3、在函数中使用var关键字显示声明的变量是局部变量;而没有用var关键字,用直接赋值的方式声明的变量是全局变量

var m=8;

function f1(){

    var a1=10;

    console.log(m);  //8

}

function f2(){

    var a2=20;

    console.log(m);  //8

}

f1();

f2();

4、依赖变量作用域实现封装特性

(1)使用ES6提供的let

(2)通过函数来创建作用域:

var myObject=(function(){

    var _name="yian";  //私有变量

    return {

        getName:function(){  //公有方法

            return _name;

        }

    }

})();

console.log(myObject._name);  //undefined

console.log(myObject.getName());  //yian

二、变量的生存周期

1、对于全局变量来说,其生命周期是永久的,除非主动销毁此全局变量;

2、对于在函数内用var关键字声明的局部变量来说,当退出函数时,这些局部变量即失去它们的价值,它们会随着函数调用的结束而被销毁

3、模仿块级作用域

(1)用作块级作用域的匿名函数:将函数声明包含在一对圆括号中,表示它实际上是一个函数表达式,而紧随其后的另一对圆括号会立即调用这个函数。

(function(){

    //这里是块级作用域

})();

在匿名函数中定义的任何变量,都会在执行结束时被销毁

(2)先定义一个函数,然后调用它。定义函数的方式是创建一个匿名函数,并把这个匿名函数赋值给变量;而调用函数的方式是在函数的名称后添加一对圆括号。

var someFunction=function(){

    //这里是块级作用域

};

someFunction();

经典问题:

var nodes=document.getElementsByTagName("div");

for(var i= 0,len=nodes.length;i<len;i++){

    nodes[i].onclick=function(){

        console.log(i);  //无论点击哪个div,最后弹出的结果都是5

    }

}

解释: div节点的onclick事件是被异步触发的,当事件被触发时,for循环早已结束,此时i 已经是5

解决办法:

法一:使用ES6中的let

法二:在闭包的帮助下,把每次循环的i值都封存起来

var nodes=document.getElementsByTagName("div");

for(var i= 0,len=nodes.length;i<len;i++){

    (function(x){

        nodes[i].onclick=function(){

            console.log(x);

        }

    })(i);

}

4、作用:读取函数内部的变量,并将这些变量的值始终保存在内存中

(1)封装变量:闭包可以把一些不需要暴露在全局的变量封装为“私有变量”,私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。

例:mult函数接收number类型的参数,并返回这些参数的乘积、

初始代码:

var cache={ };

var mult=function(){

    var args=Array.prototype.join.call(arguments,",");

    if(cache[args]){

        return cache[args];

    }

    var a=1;

    for(var i=0,len=arguments.length;i<len;i++){

        a=a*arguments[i];

    }

    return cache[args]=a;

};

console.log(mult(1,2,3));  //6

console.log(mult(3,4,5));  //60

使用闭包后:

var mult=(function(){

    var cache={ };  //加入缓存机制,避免相同参数的计算

    var calculate=function(){

        var a=1;

        for(var i= 0,len=arguments.length;i<len;i++){

            a=a*arguments[i];

        }

        return a;

    };

    return function(){

        var args=Array.prototype.join.call(arguments,",");

        if(args in cache){

            return cache[args];

        }

        return cache[args]=calculate.apply(null,arguments);

    }

})();

补充:in判断属性属于对象

var mycar = {make: "Honda", model: "Accord", year: 1998};

if ( "make" in mycar ){  //属性名必须是字符串形式,因为make不是一个变量

    document.write('true');  // 显示true

}

else{

    document.write('false');

}

(2)延续局部变量的寿命

例:使用report数据上报时会丢失30%左右的数据,原因是img时report中的局部变量,当report函数调用结束后,img局部变量随即被销毁

初始代码:

var report=function(src){

    var image=new Image();

    image.src=src;

};

使用闭包后(把img变量用闭包封装起来):

var report=(function(){

    var imgs=[ ];

    return function(){

        var image=new Image();

        imgs.push(image);

        image.src=src;

    }

})();

5、闭包和面向对象设计

闭包写法:

var extent=function(){

    var value=0;

    return {

        call:function(){

            value++;

            console.log(value);

        }

    }

}

var extent=extent();

extent.call();  //1

extent.call();  //2

面向对象写法一:

var extend={

    value:0,

    call:function(){

        this.value++;

        console.log(this.value);

    }

};

extend.call();  //1

extend.call();  //2

面向对象写法二:

var Extend=function(){

    this.value=0;

};

Extend.prototype.call=function(){

    this.value++;

    console.log(this.value);

};

var extend=new Extend();

extend.call();  //1

extend.call();  //2

6、闭包与内存管理

● 局部变量变量应该在函数退出时被解除引用,但如果局部变量被封闭在闭包形成的环境中,那么局部变量就会一直生存下去,即它会常驻内存。

● 使用闭包的同时比较容易形成循环引用,如果闭包的作用域链中保存着一些DOM节点,这就有可能造成内存泄漏。

● 解决循环引用带来的内存泄漏问题:把循环引用中的变量设为null。(将变量设置为null以为着切断变量与它之前引用的值之间的连接,当垃圾收集器下次运行时,就会删除这些值并回收它们占用的内存)

7、特点:

● 函数嵌套函数;

● 在函数内部可引用外部的参数和变量;

● 参数和变量不会以垃圾回收机制回收。

8、优点:避免全局变量的污染

9、缺点:会常驻内存,增加内存的使用量,使用不当会造成内存泄漏;闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存

10、创建闭包

写法一:

function a() { 

var b=123; 

function c(){

    console.log(b+=1);

    } 

    return c;

}

var d=a();

d();

方式二:

function f1(){

    var num=10;  //函数执行完毕,变量仍然存在

    var f2=function(){

        num++;

        console.log(num);  //11

    };

    return f2;

}

var res=f1();

res();

● 解释:执行f1()后,f1()闭包内部的变量会存在,而闭包内部函数的内部变量不会存在,使得JavaScript的垃圾回收机制不会收回f1()占用的资源,因为f1()中内部函数的执行需要依赖f1()中的变量。

方式三:

function foo(x) {

    var tmp = 3;

    return function f2(y) {

        alert(x + y + (++tmp));  //17

    };

}

var bar = foo(3);  //bar现在是一个闭包

bar(10);

练习题:

function f1(){

  var a=1;

  t=function(){

      a++;

  }

  return function(){

      console.log(a);

  }

}

var b=f1();  //返回值为一个匿名函数

b();  //1

t();

b();  //2

声明变量,若变量名称相同,就近原则:

var name="g";

function out(){

    var name="loc";

    function foo(){

        console.log(name);

    }

    foo();

}

out();  //name=loc

补充知识点:

1、JS中有哪些垃圾回收机制?

(1)引用计数:跟踪记录每个值被使用的次数。

● 当声明一个变量并将一个引用类型赋值给该变量时,该值的引用次数加1;

● 若该变量的值变为另一个,则该值引用次数减1;

● 若该值引用次数为0时,说明变量没有在使用,此值无法访问;

● 因此,可以将它占用的空间回收,垃圾回收机制会在运行时清理引用次数为0 的值所占用的空间。

● 在低版的IE中会发生内存泄漏,很多时候就是因为它采用引用计数得到方式进行垃圾回收(如果两个对象之间形成了循环引用,那么这两个对象都无法被回收)。

(2)标记清除:最常见的垃圾回收方式

● 当变量进入执行环境时,垃圾回收器将其标为“进入环境”,离开时标记为“离开环境”;

● 垃圾回收机制在运行时给存储在内存中的所有变量加上标记;

● 去掉环境中的变量及被环境中变量所引用的变量(闭包)的标记;

● 完成这些后仍存在的标记就是要删除的变量。

2、哪些操作会造成内存泄漏?

● 内存泄漏:指不再拥有或需要任何对象(数据)之后,它们仍然存在于内存中。

● 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0(没有其他对象引用过该对象),或对该对象的唯一引用是循环的,那么该对象占用的内存立即被回收。

● 如果setTimeout的第一个参数使用字符串而非函数,会造成内存泄漏。

● 闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)等会造成内存泄漏。

更多前端开发知识,请查阅 HTML中文网 !!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容