js闭包用法实例详解


Posted in Javascript onDecember 13, 2016

本文实例讲述了js闭包用法。分享给大家供大家参考,具体如下:

引言

在公司中需要写一个js脚本来进行网站的统计,实现类似百度统计或者站长统计的功能,在实现的过程中自己感觉写的代码还是可以的,因为之前的js代码都是这些写,但是在组长代码走查的时候却非常的不满意,因为我们在js中写的方法都是全局的方法,因为我们写的东西需要嵌入到别人的界面中,所以这些全局的东西很可能会和别人的东西重名从而引发错误,所以说组长就给我留下一句话:用js闭包包起来。

变量作用域

我们都非常的熟悉变量的作用域就分为:全局变量和局部变量。js中在函数的内部可以直接读取全局变量。

Js代码

var n=999;
function f1(){
  alert(n);
}
f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

Js代码

function f1(){
  var n=999;
}
alert(n); // error

我们还需要注意,在js中如果声明变量的时候一定要用var命令,否则实际上声明了一个全局的变量!

function f1(){
  n=999;
}
f1();
alert(n); // 999

如何从外部读取全局变量?

我们需要得到函数内部的全局变量该怎么办呢?。在正常情况下我们是做不到的,要想这么实现我们必须想一些办法——在函数的内部在定义一个函数:

function f1(){
  n=999;
  function f2(){
    alert(n); // 999
  }
}

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。这就是JavaScript语言特有的“链式作用域”结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

function f1(){
  n=999;
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result(); // 999

闭包的概念

在上面的代码中f2函数,就是闭包。各种专业文献上的“闭包”(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

下面来分享一下我们在项目中用到的js闭包的写法:

(function () {
  function getPageTitle() {
    return document.title;
  }
  function getBrowerLanguage() {
    var browerLanguage = !navigator.browserLanguage ? navigator.language : navigator.browserLanguage;
    return browerLanguage;
  }
  /**
   * 当前页面地址#后的部分
   */
  function getLastUrl() {
    var url = window.location.hash;
    if (!url) {
      return null;
    }
    else {
      return url.toString().split("#")[1];
    }
  }
  function GetRandomNum() {
    var arr = document.cookie.match(new RegExp("(^| )" + "statisticssCookie=([^;]*)(;|$)"));
    if (arr != null) {
      return arr[2];
    } else {
      var tempRandomNum = guid();
      document.cookie = "statisticssCookie = " + tempRandomNum;
      return tempRandomNum;
    }
  }
  function guid() {
    function S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
  }
  function addJs() {
    var url = "http://localhost:10086/tongji/tongji/do?title=" + getPageTitle() + "&browerLanguage=" + getBrowerLanguage() + "&lastUrl=" + getLastUrl() + "&upFlag=" + GetRandomNum();
    var head = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');
    js.type = 'text/javascript';
    js.src = url;
    head.appendChild(js);
  }
  window.statistics = addJs;//将addJs这个方法挂在window下面,这样在外界是可以访问的,否则外界永不能访问到我写的方法
  document.ready = addJs();//DOM树加载完成后执行
})(window)

小结

在开始的时候组长就问我会不会js闭包函数,因为如果不会闭包写不出很好的代码。写的代码都非常的粗糙,所以说我们在写代码的时候,不能仅仅满足功能实现,而且需要考虑一些其他方面的东西。当然js闭包在使用的时候也有一些弊端,所以我们在使用的时候也需要综合全面的信息考虑。

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

Javascript 相关文章推荐
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
node.js实现端口转发
Apr 14 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
深入学习Bootstrap表单
Dec 13 #Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 #Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 #Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 #Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 #Javascript
AngularJS自定义控件实例详解
Dec 13 #Javascript
Node.js中process模块常用的属性和方法
Dec 13 #Javascript
You might like
php生成随机颜色的方法
2014/11/13 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
webpack入门必知必会
2017/01/16 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
小学生家长评语大全
2014/02/10 职场文书
规范化管理年活动总结
2014/08/29 职场文书
关于工作经历的证明书
2014/10/11 职场文书
资产运营委托书范本
2014/10/16 职场文书
关于五一放假的通知
2015/08/18 职场文书
公司借款担保书
2015/09/22 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis