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 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
Angular使用Md5加密的解决方法
Sep 16 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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初学者头疼十四条问题大总结
2008/11/12 PHP
php 文件缓存函数
2011/10/08 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
xmlHTTP实例
2006/10/24 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python如何存储数据到json文件
2020/03/09 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Django中FilePathField字段的用法
2020/05/21 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
用Python制作音乐海报
2021/01/26 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
医院实习接收函
2014/01/12 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
篮球比赛口号
2014/06/10 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
班主任工作总结范文
2015/08/13 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers