轻松学习Javascript闭包函数

 更新时间:2022年05月06日 15:04:47   作者:喜爱编程的人  
这篇文章主要帮助大家轻松学习掌握Javascript闭包函数,从闭包的含义出发,由浅入深学习Javascript闭包函数,感兴趣的小伙伴们可以参考一下

闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的.

不过我们也还是从闭包的含义出发。
闭包是指函数有自由独立的变量。换句话说,定义在闭包中的函数可以“记忆”它创建时候的环境。
官方解释说完后,我们先来看一个简单计数的例子.

var c = 0;
function count(){
c++;
}
count();// 1
count();// 2

这个例子是利用了全局变量来实现,但是这里有个问题是,c这个变量也容易被其他方式所调用,这时候就可能会改变 c 的存储值.造成这个count计数的失效.那怎么很好的处理这个问题呢!我们会想到的是使用局部变量的方式来处理.比如:

function count(){
 var c = 0;
 function add(){
  c++;
 }
 add();
}
count();// c = 1
count();// c = 1

因为这样创建之后,内部变量只存在于count函数创建执行的时候,执行完之后,整个函数就会被丢弃掉.就无法达到有记忆的能力.那要怎么来实现呢?那我们就用闭包来解决.我要重新提一次:闭包 = 函数 + 环境

function count(){
  var c = 0;
  function add(){
   c++;
  }
  return add;
}
var ct = count();
ct(); // c = 1
ct(); // c = 2

这个时候我们就可以通过这个闭包来完成计数的能力.ct就是一个闭包函数,内部的环境就是这个局部变量 c. 这里我们达到的就是内部数据,外部来操作.那闭包除了这个还有什么其他功能呢?

用闭包模拟私有方法
这有点像JAVA的私有方法或者私有变量,只能允许自己来操作!如果外部操作,就需要设定公开的方法来操作.

var person = (function(){
  var _name = "编程的人";
  var age = 20;
  return {
   add:function(){
     age++;
   },
   jian:function(){
     age--;
   },
   getAge:function() {
     return age;
   },
   getName:function(){
     return _name;
   },
   setName: function (name) {
     _name = name;        
   }
  }
})();
person.add();
var age = person.getAge();
console.log(age)
person.setName("编程的人公众号:bianchengderen")
console.log(person.getName())

这里应该很容易理解了吧! 有点面向对象编程的感觉。当然Javascript现在也有面向对象编程的特点.这点我们以后来说明.
目前为止,我们从计数到内部私有化的例子,来说明闭包,希望大家能简单明白其中的道理,当然闭包还有其他的功能利用是比较方便的。

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

相关文章

  • js+vml创建3D页面效果代码

    js+vml创建3D页面效果代码

    js vml制作的3D效果
    2008-02-02
  • 小程序实现左右来回滚动字幕效果

    小程序实现左右来回滚动字幕效果

    这篇文章主要为大家详细介绍了小程序实现左右来回滚动字幕效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • js如何判断对象数组中是否存在某个对象

    js如何判断对象数组中是否存在某个对象

    这篇文章主要介绍了js如何判断对象数组中是否存在某个对象问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • json与jsonp知识小结(推荐)

    json与jsonp知识小结(推荐)

    这篇文章主要介绍了json与jsonp知识小结(推荐)的相关资料,需要的朋友可以参考下
    2016-08-08
  • JS验证字符串功能

    JS验证字符串功能

    这篇文章主要介绍了JS验证字符串功能实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • js 基础篇必看(点击事件轮播图的简单实现)

    js 基础篇必看(点击事件轮播图的简单实现)

    下面小编就为大家带来一篇js 基础篇必看(点击事件轮播图的简单实现)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • GoJs的文本绘图模板TextBlock使用实例

    GoJs的文本绘图模板TextBlock使用实例

    这篇文章主要为大家介绍了GoJs的文本绘图模板TextBlock使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • js获取字符串字节数方法小结

    js获取字符串字节数方法小结

    这篇文章主要介绍了js获取字符串字节数方法,实例总结了javascript字符串长度计算的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 微信小程序利用云函数获取手机号码

    微信小程序利用云函数获取手机号码

    这篇文章主要介绍了微信小程序利用云函数获取手机号码功能,本文通过实例代码给大家讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • JS继承用法实例分析

    JS继承用法实例分析

    这篇文章主要介绍了JS继承用法,实例分析了拷贝继承、类继承及原型继承等的使用技巧,需要的朋友可以参考下
    2015-02-02

最新评论