侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   382

本文实例讲述了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();// 101fn();// 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();// 101fn();// 102fn = null; // 调用完毕后要,要解除对内部匿名函数的引用,以便释放内存

闭包实践二:闭包与变量

分析下面的代码

html结构:

  • 0
  • 1
  • 2

javascript结构:

var ul = document.querySelector('ul');// 为了演示方便,直接用html5的apivar 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 sanp1.say(); // zhang san say hip2.say(); // li si say hi

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

  • javascript循环变量注册dom事件 之强大的闭包
  • JS中批量给元素绑定事件过程中的相关问题使用闭包解决
  • javascript深入理解js闭包
  • 一分钟理解js闭包
  • 前端开发必须知道的JS之闭包及应用
  • JavaScript闭包函数访问外部变量的方法
  • js闭包的用途详解
  • 一不小心就做错的JS闭包面试题
  • js闭包所用的场合以及优缺点分析
  • js闭包实例汇总
  • JS简单判断滚动条的滚动方向实现方法
  • JS实现利用闭包判断Dom元素和滚动条的方向示例


  • 上一条:
    jQuery-Citys省市区三级菜单联动插件使用详解
    下一条:
    vue 地区选择器v-distpicker的常用功能
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客