js闭包理解

文/michaelgbw

js作为一个“几乎统治宇宙”的语言,不光是对于我们web工程师来说,几乎所有领域的程序员都或多或少的和她产生过一段不可描述的关系,而闭包是js的一大特色,很多高级应用都要依靠闭包实现。当然js的闭包也是面试中的霸主(个人觉得第二个是tcp/ip的握手协议,哈哈哈~)

闭包,官方对闭包的解释是:
一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

闭包的特点:

  • 作为一个函数变量的一个引用,当函数返回时,其处于激活状态.
  • 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
var n='666';
    function f1(){
        alert(n);
    }
    f1();

js语言的特殊之处,就在于函数内部可以直接读取全局变量。

我们再说下js匿名函数:

var a = "a";
    (function(){
        var a="b";
        alert(a);
    })();
    alert(a);

匿名函数的基本调用方式是(function(){})();后面可以跟一个或多个参数,多个就是链式调用如:

(function(o){
        alert(o);
        return arguments.callee;
    })('a')('b');

可以看到闭包是全局变量不污染的

什么,这个还简单,比较好理解,好的,之前看到了一个面试题,po出来和大家一起研究下吧。

function foo(){
        getName = function (){
            alert(1);
        };
        return this;
    }
    foo.getName=function (){
        alert(2);
    };
    foo.prototype.getName = function (){
        alert(3);
    };
    var getName = function (){
        alert(4);
    };
    function getName(){
        alert(5);
    }

    //写出以下结果
    foo.getName();
    getName();
    foo().getName();
    getName();
    new foo.getName();
    new foo().getName();
    new new foo().getName();

.
.
.
.
.

答案分别是2 4 1 1 2 3 3

我们分别分析下

第一问没什么说的。
第二问直接调用getName()函数,所以和1,2,3没关系,但究竟是4,还是5呢?4,4和5都是声明语句,区别是4是函数表达式,5是函数声明,函数表达式最大的问题是他会被拆分成两个,即var getNamw 和 getName = function()来执行,所以会覆盖函数声明。
第三问,foo() return 的是this,就是函数本身,再调用getName()方法即可,为1。
第四问,直接调用相当于window.getName(),但在第三问中已经被改变了,注意function foo(){
getName = function (){
alert(1);
};
return this;
}
是没有var 的,getName作为全局变量被改变。
第五问,'.'的优先级高于new 作为我们把它改写下 new (foo.getName)();所以相当于foo.getName()被当成匿名函数执行了,所以为2。
第六问,这个就比较冷了,相当于( new foo()).getName();而在js中 构造函数返回值要是基本类型如 foo(){ return 1}是和没返回值没什么区别的,而一旦是 foo(){ return {a:1}}这样一个对象的话就返回这个引用类型,所以是返回的this,就返回了当前对象的原型对象中寻找getName(),找到了就是3。
第七问,我们接着改写,new(new (foo()).getName())();就是第六问中的原型链中的3在构造函数来一次,还是3。

怎么样,大家都答对了吗

反正我是没有,这可能有点钻牛角尖,大家都采用自已喜欢的开发模式开发即可,但要知道大多数情况是要合作开发的,那么别人的代码风格是不是也应该有所了解呢?~~

也算给我自己提个醒,看到别人的代码,我第一个想法就是,这啥,重构吧,哈哈哈~~呜呜....
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 举一个例子来说明闭包: 上述代码中每次执行m(),a的值都会加1。 例子的原理 因为上述代码中当执行A()的时候,...
    xiaoguo16阅读 239评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,087评论 19 139
  • 最近在网上看了一道有关前端的面试题感觉很不错,就在这里分享给大家。 题目: function Foo() { g...
    穿越人海遇见你阅读 1,004评论 0 12
  • 解释原因 var i,实际上声明了一个全局变量 延迟函数timer必然是在循环结束后才开始执行,循环结束后,i=6...
    许道龙阅读 244评论 0 0
  • 题目如下: 答案是: 此题涉及的知识点众多,包括变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量...
    WEB攻程狮阅读 1,016评论 4 39