Javascript中return的使用与闭包详解


Posted in Javascript onJanuary 11, 2017

前言

Javascript中闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。而return语句在js中起到举足轻重的作用,该关键字不仅具有返回函数值得功能,还具有一些特殊的用法,下面就来看看关于Javascript中return的使用与闭包的详细介绍吧。

一、return的使用

案例一:

var a=1;

for(var b=0; b<10; b++){

 return b;

};

sonsole.log(b)//返回为空

个人认为此处左右与为全局,,return 之后后面代码均不会执行;

案例二:

var a=1;

function bb(){

 for(var b=0;b<10;b++){

 return b;

 };

};

console.log(bb);//返回0

二、链式作用域和闭包

先看一个案例:

var a=1;
function f1(){
 var b=2;
 function f2(){
 console.log(a);//1
 console.log(b)//2
 };
};

链式作用域:在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构;

闭包:讲白了就是 利用一种方式实现访问局部变量的功能;

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

function f1(){
 var a=1;
 function f2(){
 alert(a);
 };
 return f2
};

console.log(f1());//function f2(){alert(a);};
console.log(f1()());//弹出1

所以一般可以这样写:

function f1(){
 var a=1;
 function f2(){
 alert(a);
 };
 return f2
};

var result=f1();
console.log(result());//弹出1

闭包完整案例:

function f1(){

 n=999;

 function f2(){
 alert(n);
  }



return f2;
}

var result=f1();

result(); // 999

现在通过f2可以实现访问f1中的局部变量n,这就是闭包。

闭包作用:一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

function f1(){
 var a=222;
 f2=function(){//注意此处这样写,这和使用var则为局部变量,不适用则为全局一个道理;
 alert(a);
 };

};


f1()//空
f2()//222,此处不用闭包就可访问



function f1(){
 var a=222;
 function f2(){//此处为函数
 alert(a);
 };
 nAdd=function(){a+=1};
 return f2
};

var obj=f1();
obj()//222

nAdd()//空
obj();//223,同时说明函数f1中的局部变量a一直保存在内存中,并没有在f1调用后被自动清除

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是“ nAdd=function(){n+=1} ”这一行,首先在nAdd前面没有使用var关键字,因此 nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个

匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
jQuery对table表格进行增删改查
Dec 22 #Javascript
javascript基础知识讲解
Jan 11 #Javascript
bootstrap侧边栏圆点导航
Jan 11 #Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 #Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 #Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 #Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 #Javascript
You might like
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Laravel实现表单提交
2017/05/07 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
python之PyMongo使用总结
2017/05/26 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python从子线程中获得返回值的方法
2019/01/30 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
python global关键字的用法详解
2019/09/05 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
校园之声广播稿
2014/01/31 职场文书
趣味活动策划方案
2014/02/08 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
毕业生工作求职信
2014/06/30 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang