javascript中的闭包概念与用法实践分析


Posted in Javascript onJuly 26, 2019

本文实例讲述了javascript中的闭包概念与用法。分享给大家供大家参考,具体如下:

闭包的概念:闭包是指有权访问另一个函数作用域中的变量的函数 (引自《javascript高级程序设计第三版》178页)。闭包的优点是不会产生全局变量,避免变量污染问题,但是闭包也有一个缺点就是闭包携带包含它的函数作用域会比其它函数占用更多的内存,过度使用会导致内存占用过多。

wiki上关于闭包的概念:

In programming languages, closures (also lexical closures or function closures) are techniques for implementing lexically scoped name binding in languages with first-class functions. Operationally, a closure is a record storing a function[a] together with an environment:[1] a mapping associating each free variable of the function (variables that are used locally, but defined in an enclosing scope) with the value or reference to which the name was bound when the closure was created.[b] A closure—unlike a plain function—allows the function to access those captured variables through the closure's copies of their values or references, even when the function is invoked outside their scope.

简单来说:闭包是一个存储了函数以及与这个函数相关的环境信息的记录。

闭包实践一:初次体验闭包

function a() {
 var temp = 100;
 function b() {
  console.log(++temp);
 }
 return b;
}
var fn = a(); // 此时fn属于全局的函数。
fn();// 101
fn();// 102

在函数a的内部return出了一个局部函数b。让函数fn接收函数a的返回值,也就是函数b。连续执行了两次fn,输出结果101,,102表示,函数fn一直引用着函数a中的局部变量temp。每次调用fn,temp都会被自增1。从此处说明了函数a一直没有被垃圾回收机制(GC)回收。以上代码还可以这样优化:

function a() {
 var temp = 100;
 return function() {
  console.log(++temp);
 }
}
var fn = a();
a = null;
fn();// 101
fn();// 102
fn = null; // 调用完毕后要,要解除对内部匿名函数的引用,以便释放内存

闭包实践二:闭包与变量

分析下面的代码

html结构:

<ul>
 <li>0</li>
 <li>1</li>
 <li>2</li>
</ul>

javascript结构:

var ul = document.querySelector('ul');// 为了演示方便,直接用html5的api
var lis = ul.children;
for(var i=0; i< lis.length; i++) {
 lis[i].οnclick=function(){
  console.log(i);
 }
}

当点击每个li时,输出的全都是3,在点击事件之前,for循环早已经执行完了,i的值为3。为了防止这种情况发生,for循环还可以修改成这样:

for(var i=0; i< lis.length; i++) {
 lis[i].οnclick=function(num){
  return function(){
   console.log(num);
  }
 }(i)
}

由于函数是按值传递的,所以就会将变量i的当前值赋给num,而在函数内部又返回了一个访问num的闭包。这样每次i的值就保存下来了。值得一提的是在ECMAScript6中可以用严格模式下用let 来声明i。这样可以直接保存i,有关es6,以后再深入学习,示例代码如下:

javascript结构:

'use strict'
let ul = document.querySelector('ul');
let lis = ul.children;
for(let i=0; i< lis.length; i++) {
 lis[i].οnclick=function(){
   console.log(i);
 }
}

闭包实践三:对实践二的深层剖析,闭包保存的是整个变量对象,而不是某个特殊的变量。(出自 《javascript高级程序设计第三版》 181页)

/* createFunctions方法返回一个函数数组 result */
function createFunctions() {
 var result = new Array();
 for(var i=0; i<10;i++) {
  result[i] = function() {
   return i;
  }
 }
 return result;
}
var arr = createFunctions();
// 我们拿到并输出第一个数组元素函数的返回值
var fn0 = arr[0];
var varible0 = fn0();
console.log(varible0); // 返回的是 10
// 我们拿到并输出第二个数组元素函数的返回值
var fn1 = arr[1];
var varible1 = fn1();
console.log(varible1); // 返回的是 10
// 可见闭包保存的是这个变量i对象,i的最终结果是10

我们只要对代码稍稍优化,用自执行函数来处理,就可以达到我们的预期了,如下:

function createFunctions() {
 var result = new Array();
 for(var i=0; i<10;i++) {
  result[i] = (function(num) {
   return function(){
    return num;
   }
  })(i)
 }
 return result;
}
var arr = createFunctions();
// 我们拿到并输出第一个数组元素函数的返回值
var fn0 = arr[0];
var varible0 = fn0();
console.log(varible0); // 返回的是 0
// 我们拿到并输出最后一个数组元素函数的返回值
var fn9 = arr[9];
var varible9 = fn9();
console.log(varible9); // 返回的是 9

闭包实践四:闭包与this  使用不同的编程方式使用闭包,this指向不同的对象

var color = 'black';
var person = {
 color:"yellow",
 getColorFun1:function(){
  return function(){
   return this.color;
  }
 },
 getColorFun2:function(){
  var that = this;
  return that.color;
 }
}
console.log(person.getColorFun1()()); // 指向了 black (备注:fn()()这种写法只限于非严格模式下)
console.log(person.getColorFun2()); // 指向了yellow

说明:当调用到person.getColorFun1()的时候,在全局变量中生成一个函数function(){return this.color},此时的this指向是window,所以执行到person.getColorFun1()()的时候,color为window对象下的变量color为black

而在person.getColorFun2函数中用that保存了当前对象person,而在闭包函数里面return出去的color是person的color,所以执行完person.getColorFun2()()的时,color是yellow。

实践四:闭包的高级应用

示例1:实现函数节流 

window.onresize = throttle(function(){
  var width = window.innerWidth || document.documentElement.clientWidth;
  console.log(width);
},300); // 调节浏览器窗口,在松手后的0.3s后执行
function throttle(fn,delay) {
   var timer = null;
   return function() {
     clearTimeout(timer);
     timer = setTimeout(fn,delay);
   }
}

示例2:实现封装对象

var Person = (function(){
 var haha = 0; // 这里表示可以定义一能够使用到的参数
 return function(name, age){
  ++ haha; // 这里表示去使用定义到的参数,虽然在此处并没有实际意义。
  this.name = name;
  this.age = age;
 };
})();
Person.prototype = {
 say : function(){
  console.log(this.name + ' say hi');
 }
}
var p1 = new Person('zhang san', 10);
var p2 = new Person('li si', 20);
console.log(p1.name); // zhang san
p1.say(); // zhang san say hi
p2.say(); // li si say hi

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
JavaScript实现队列结构过程
Dec 06 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 #Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 #Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
微信小程序—setTimeOut定时器的问题及解决
Jul 26 #Javascript
layUI实现三级导航菜单效果
Jul 26 #Javascript
layui实现三级联动效果
Jul 26 #Javascript
layui实现三级导航菜单
Jul 26 #Javascript
You might like
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP pear安装配置教程
2016/05/14 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
Node.js学习入门
2017/01/03 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python使用opencv读取图片的实例
2017/08/17 Python
python距离测量的方法
2018/03/06 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
先进事迹报告会感言
2014/01/24 职场文书
房屋转让协议书范本
2014/04/11 职场文书
《金子》教学反思
2014/04/13 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
普通党员整改措施
2014/10/24 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
高一军训决心书
2015/02/05 职场文书
接待员岗位职责范本
2015/04/15 职场文书
追悼会答谢词范文
2015/09/29 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书