js闭包理解

作者: michaelgbw | 来源:发表于2016-06-22 22:43 被阅读113次

文/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。

怎么样,大家都答对了吗

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

也算给我自己提个醒,看到别人的代码,我第一个想法就是,这啥,重构吧,哈哈哈~~呜呜....

相关文章

  • 一分钟理解js闭包

    一分钟理解js闭包,关于js闭包的内容介绍了很多,本文带着大家快速理解什么是js闭包,感兴趣的小伙伴们可以参考一下...

  • 一分钟带你弄懂闭包

    一分钟理解js闭包,关于js闭包的内容介绍了很多,本文带着大家快速理解什么是js闭包,感兴趣的小伙伴们可以参考一下...

  • 什么是闭包?几分钟告诉你

    一分钟理解js闭包,关于js闭包的内容介绍了很多,本文带着大家快速理解什么是js闭包,感兴趣的小伙伴们可以参考一下...

  • 一分钟带你弄懂闭包

    一分钟理解js闭包,关于js闭包的内容介绍了很多,本文带着大家快速理解什么是js闭包,感兴趣的小伙伴们可以参考一下...

  • JS闭包入门

    最近有看到朋友的面经里提到的JS闭包的问题,就想研究研究,以下是我对JS闭包的简单理解。 到底什么是JS闭包? 定...

  • JS 闭包(Closure)

    参考阮一峰老师的JS 闭包 理解闭包前需要理解变量作用域、变量提升 JS作用域 那如何让它依次打印,12345呢;...

  • JS闭包理解

    闭包的概念 闭包就是能够读取其他函数内部变量的函数。 一、变量的作用域 要理解闭包,首先必须理解Javascrip...

  • js闭包理解

    什么是闭包简单来说,闭包是指可以访问另一个函数作用域变量的函数,一般是定义在外层函数中的内层函数。 为什么需要闭包...

  • JS闭包理解

    举一个例子来说明闭包: 上述代码中每次执行m(),a的值都会加1。 例子的原理 因为上述代码中当执行A()的时候,...

  • 理解js闭包

    如果你学JavaScript已经有一段时间了,你一定听过js闭包。这也是前端面试非常喜欢问的问题,所以理解js闭包...

网友评论

    本文标题:js闭包理解

    本文链接:https://www.haomeiwen.com/subject/bkjndttx.html