js闭包用法实例详解
本文实例讲述了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数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了如何使用JS console.log()技巧提高工作效率,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
大家知道，JavaScript中没有内置我们常用的sleep()函数，只有定时器setTimeout()和循环定时器setInterval()2007-03-03
本文主要分享了原生JS实现跑马灯效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家分享一篇layui select动态添加option的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了微信小程序实现横屏和竖屏签名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
Javascript ES6中数据类型Symbol的使用详解
Symbol类型是es6新增的一个数据类型，Symbol值通过Symbol函数生成Symbol类型是保证每个属性的名字都是独一无二的，对于一个对象由对个模块构成的情况非常有用，本文主要介绍了Javascript ES6中数据类型Symbol使用的相关资料，需要的朋友可以参考下。2017-05-05
节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,下面这篇文章主要给大家介绍了关于js防抖具体实现以及详细原理步骤的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
javascript:;与javascript:void(0)使用介绍
有时候我们在编写js过程中，需要触发事件而不需要返回值，那么就可能需要这样的写法2013-06-06
判断集合是否包含某个元素我们可以利用js的原型扩展来封装一个我们自己的Contains方法，具体思路及实现如下，感兴趣的朋友可以参考下2013-11-11
console.log 不支持ie，下面的代码需要在火狐中测试，不然会有问题。2010-12-12
最新评论