您好,登录后才能下订单哦!
这期内容当中的小编将会给大家带来有关JavaScript中变量的作用域和闭包的应用,以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
一、变量的作用域
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的第一个参数使用字符串而非函数,会造成内存泄漏。
● 闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)等会造成内存泄漏。
上述就是小编为大家分享的JavaScript中变量的作用域和闭包的应用了,如果您也有类似的疑惑,不妨碍参照上述分析进行理解。如果想了解更多相关内容,请关注亿速云行业资讯。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。