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。

怎么样,大家都答对了吗

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

也算给我自己提个醒,看到别人的代码,我第一个想法就是,这啥,重构吧,哈哈哈~~呜呜….
    原文作者:michaelgbw
    原文地址: https://www.jianshu.com/p/a059ee7556dd
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞