关闭

[置顶] js闭包

标签: 闭包javascript
7503人阅读 评论(28) 收藏 举报
分类:

   

   引言


   在公司中需要写一个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闭包在使用的时候


也有一些弊端,所以我们在使用的时候也需要综合全面的信息考虑。

2
0
查看评论

js的闭包和this

各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。 ...
  • yo_123
  • yo_123
  • 2016-03-30 18:28
  • 276

JS闭包以及具体题目1

现有如下html结构 1 2 3 4 5 6  click me  click me  click me  click me ...
  • u010423904
  • u010423904
  • 2016-04-09 10:57
  • 964

深入理解js 闭包

要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 Js代码  var n=999;   function f1(){     alert(n);   }   f1(...
  • java_goodstudy
  • java_goodstudy
  • 2016-07-20 17:53
  • 2612

JS-闭包详解

闭包是JS中的一块硬骨头-不好啃,需要我们慢慢去咀嚼才能体会出其中的味道,嚼的不好,一不小心还容易崩牙!今天就让我们好好来咀嚼下这块硬骨头把!!! 1.什么是闭包? 所谓闭包:在一个函数作用域中 保留 它上级作用域的局部变量,这些局部变量不会随着上级函数的执行完毕而被销毁(个人理...
  • u014205965
  • u014205965
  • 2015-05-23 20:24
  • 1064

js中闭包原理谈和原型及例子

闭包是一个比较抽象的概念,但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的理解以及js内部解释器的运作方式的描述,都是可以看出你js实际水平的.即使你没答对,也能让考官对你的水平有个评估.那么我先来说说我对js中的闭包的理解.   闭包是很...
  • u011411356
  • u011411356
  • 2015-12-07 17:47
  • 4421

JavaScript-说说为啥循环闭包只显示最后一个i的值

循环闭包不知道这个问题大家有没有遇到过这种情况,for循环过程中永远输出最后一个值。反正我当年初学js的过程中遇到了,当时菜的时候问度娘,博客都差不多,就是看不懂。手动再见。 下面要实现的是,点击两个盒子,点击显示”这是第i个盒子”。 QAQ结果显示无论点击哪个盒子都是”这是第2个盒子”。...
  • canger729
  • canger729
  • 2017-03-10 16:52
  • 133

js原型链与闭包

这里不讲js基础,就将闭包,函数与对象的关系是啥?对象是构造函数创建的,对象也可以是通过字典的形式组成,这两种方式是js中创建对象的方式。而函数也是对象,函数有一个属性是prototype,prototype是一个Object对象,那么是对象就可以为它增加属性。
  • zhj574182446
  • zhj574182446
  • 2017-04-27 21:39
  • 202

理解 Javascript 的闭包 (例子举得很好)

转自:http://www.oschina.net/question/28_41112?fromerr=UAPtt2Ce 前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文...
  • chelen_jak
  • chelen_jak
  • 2016-01-23 10:41
  • 3628

js-闭包 代码多示例

/*var name = "The Window";       var object = {     name : "My Object",     getNameFunc : function(){       return f...
  • u010242159
  • u010242159
  • 2016-09-07 18:40
  • 387

js闭包的用途

我们来看看闭包的用途。事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。1 匿名自执行函数我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,比如:别的函数...
  • sunlylorn
  • sunlylorn
  • 2011-06-09 17:25
  • 70668
    个人资料
    • 访问:563119次
    • 积分:18479
    • 等级:
    • 排名:第598名
    • 原创:274篇
    • 转载:20篇
    • 译文:0篇
    • 评论:5683条
    和我交谈
    点击这里给我发消息 点击这里给我发消息
    时间你好?
    博客专栏
    最新评论