当前位置 : 主页 > 网络编程 > JavaScript >

你必须了解的JavaScript闭包

来源:互联网 收集:自由互联 发布时间:2023-08-02
本篇文章给大家带来了关于JavaScript闭包的学习笔记,其中包括了闭包与方法栈以及闭包的作用,希望对大家有帮助。 从定义上来讲,它是一个脚本语言,而且是一个相对容易学习的脚

本篇文章给大家带来了关于JavaScript闭包的学习笔记,其中包括了闭包与方法栈以及闭包的作用,希望对大家有帮助。

你必须了解的JavaScript闭包

从定义上来讲,它是一个脚本语言,而且是一个相对容易学习的脚本语言。不需要太多的专业知识,你也能够在一定程度上使用js(JavaScript的简写)代码。

当然如果你已经学习了一前端知识,你应该能理解这个工具的作用,这是一个非常方便的显示页面元素之间间距的工具。你看,你仅仅是进行了一些简单的浏览器操作,甚至你无法理解上述代码的内容,但你刚刚确确实实的嵌入了一段js代码在你所在的页面中(显然它是无害的,请放心使用)感谢up主CodingStartup起码课的视频【有了它,把网页做到跟设计图一样】以及up主ArcRain在视频下方的回复

这篇学习笔记的目的是记录我自己对于js学习路程中的一些感悟和体会,以及一些我自己认为的小技巧,而不是为了教学,所以其中的部分内容的原理我并不会给出答案,有可能是我没法准确的描述,有可能是我还没弄懂,本人水平相当有限,如果文字中有错误的部分欢迎大家指摘。

1. 学习JavaScript的契机

正式学习JavaScript是在培训班,没错我是从培训班出来的,并不是科班出身,可以说是非常的草根了。我学习的时候ES6标准还并未普及,变量命名还在用非常传统的var,学习的第一段代码是经典的console.log('Hello,world!'),当然它是在控制台上打印出来的。

当然,在培训机构中的JavaScript内容讲的是非常的浅显,只有最为基础的变量定义与命名,function声明,回调函数,ajax以及最为基础的dom操作。显然这些内容对于工作完全不够用的。

对于js学习的‘进修’机会来源于我的工作,在工作中我第一次知道了node这个东西,也了解到即便是js也是可以做后台的(我是做的JAVA培训),也开始逐渐接触到了一些ES6的标准。当然这些都是后话,最开始我接触到最大的障碍是这货。

2.‘恶心’的闭包

啊,对我只有那么一丁丁点基础的我,完全无法理解我们公司自己封装的jsonp代码,它是长这个样子的。

  var jsonp = (function(){
        var JSONP;
       return function(url){
           if (JSONP) {
             document.getElementsByTagName("head")[0].removeChild(JSONP);
          }
         JSONP = document.createElement("script");
          JSONP.type = "text/javascript";
          JSONP.src = url;
          document.getElementsByTagName("head")[0].appendChild(JSONP);
       }
     }())

当然,现在浏览器上已经无法通过控制台直接使用这个方法了,为了防止XSS攻击浏览器已经禁止这样注入代码了,但是在服务器上还是可以用的,当然,这些都不是重点。

重点是这里

    if (JSONP) {
       //dosome
 }

如果你和我当初一样,不知道什么叫闭包或者对闭包一知半解,那么,对于这里你应该也会产生疑问,思路大约是这样的

第2行定义了JSONP但是没有赋值,现在JSONP值为null,第三行返回了一个方法,第四行检测JSONP值是否为空,如果不为空则做了一些事情,好了,后面可以不用看了,这个if白写了,它百分百进不去!

你看嘛,前面也没有赋值,然后直接判断,那它明明就是null。但是实际使用的时候你会发现,这个地方第一次调用确实不会进入这个分支,但只要你调用了第二次,,它就百分百会进入这个分支。

// 这个是一个可以在控制台输出的闭包版本,你可以自己试一下
var closedhull = (function() {
    let name = null; // 这里直接赋值为null
    return function(msg){
        if(name) {
            console.log('name:', name)
            return name += msg;
        }
        return name = msg;
    }
}())
closedhull('我是第一句。') //我是第一句。
closedhull('我是第二句。') //我是第一句。我是第二句。

上面这个例子运行后,无论是从console.log()亦或是返回值上都不难看出,确实进入了if(name)的分支,这个就是闭包的表现。这里给出一下闭包的定义

闭包就是能够读取其他函数内部变量的函数。

3.闭包的样子到底是什么样的

好了,看过闭包是个啥了,先不说会不会用,至少,算是见过了,闭包有个显著的特征return function(){}

不是!

它的显著特征是在function内的function!

观察以下方法

/*第一个案例*/
function test1(){
    // a应该在方法运行结束后销毁
    let a = 1;
    return {
        add: function(){
            return ++a;
        }
    }
}
let a = test1();
a.add()//2
a.add()//3
/*第二个案例*/
(function(){
    // b应该在方法运行结束后销毁
    let b = 1,
        timer = setInterval(()=>{
        console.log(++b)
    }, 2000)
    setTimeout(()=>{
        clearInterval(timer)
    }, 10000)
})()// 2 3 4 5 6
/*第三个案例*/
function showMaker(obj){
    // obj应该在方法运行结束后销毁
    return function(){
        console.log(JSON.stringify(obj))
    }
}
let shower = showMaker({a:1})
// 显然这里你还能看到他
shower(); // {"a":1}
/*第四个案例*/
let outObj = (function(){
    let c = 'hello',
        obj = {};
    Object.defineProperty(obj, 'out', {
        get(){
            return c;
        },
        set(v){
            c = v;
        }
    });
    return obj
})()
outObj.out // 可以读取并设置c的值

这四个都是闭包,他们都具备方法中的方法这一特性。

4.闭包与方法栈(对原理不感兴趣可以略过)

闭包的定义,1. 可以在变量的作用域外访问该变量。2. 通过某种手段延长一个局部变量的生命周期。3. 让一个局部变量的存活时间超过它的时间循环执行时间

3中由于涉及到了事件循环概念,之后涉及到时会去讲的,这里主要讨论前两种方式的定义。

一下内容如果你知道方法栈是个啥了就可以跳过了

局部作用域:在ES6之前,一般指一个方法内部(从参数列表开始,到方法体的括号结束为止),ES6中增加let关键字后,在使用let的情况下是指在一个{}中的范围内(显然,你不能在隐式的{}中使用let,编译器会禁止你做出这种行为的,因为没有{}就没有块级作用域),咱们这里为了简化讨论内容,暂且不把let的块级作用域算作闭包的范畴(其实应该算,不过意义不大,毕竟,你可以在外层块声明它。天啊,JS的命名还没拥挤到需要在一个方法内再去防止污染的程度。)

局部变量:区别于全局变量,全局变量会在某些时候被意外额创造和使用,这令人非常的...恼火和无助。局部变量就是在局部作用域下使用变量声明关键字声明出来的变量,应该很好理解。

局部变量的生命周期:好了,你在一个局部作用域中通过关键字(var const let等)声明了一个变量,然后给它赋值,这个局部变量在这个局部作用域中冒险就开始了,它会被使用,被重新赋值(除了傲娇的const小姐外),被调用(如果它是个方法),这个局部变量的本质是一个真实的值,区别在于如果它是个对象(对象,数组,方法都是对象)那么,它其实本质是一个地址的指针。如果它一个基础类型,那么它就是那个真实的值。它之所以存活是因为它有个住所。内存。

局部作用域与内存:每当出现一个局部作用域,一个方法栈就被申请了出来,在这个方法栈大概长这样子

|  data5 |
|  data4 |
|  data3 |
|  data2 |
|__data1_|

当然,它是能够套娃的,长这个样子

|  | d2 |  |
|  |_d1_|  |
|  data3   |
|  data2   |
|__data1___|

如果上面的东西是在太过于抽象,那么,我可以用实际案例展示一下

function stack1(){
    var data1,
        data2,
        data3,
        data4,
        data5
}
function stack2(){
    var data1,
        data2,
        data3;
    function stackInner(){
        var d1,
            d2;
    }
}

如果方法栈能够直观的感受的话,大约就是这个样子,咱们重点来分析stack2的这种情况,同时写一点实际内容进去

function stack2(){
    var data1 = '1',
        data2 = {x: '2'},
        data3 = '3';
    function stackInner(){
        var d1 = '4',
            d2 = {y: '5'};
    }
    stackInner()
}
stack2()

显然其中data1,data3,d1持有的是基本类型(string),data2,d2持有的是引用类型(object),反应到图上

运行时的方法栈的样子

            |------>{y: '5'}
            |    |->{x: '2'}
    |  | d2-|   || |
    |  |_d1='4'_|| |
    |  data3='3' | |
    |  data2 ----| |
    |__data1='1'___|

画有点抽象...就这样吧。具体对象在哪呢?他们在一个叫堆的地方,不是这次的重点,还是先看方法栈内的这些变量,运行结束后,按照先进后出的原则,把栈内的局部变量一个一个的销毁,同时堆里的两个对象,由于引用被销毁,没了继续存在的意义,等待被垃圾回收。

接下来咱们要做两件事情:

  • d1不再等于4了,而是引用data1

  • return stackInner 而不是直接调用

这样闭包就完成了

function stack2(){
    var data1 = {msg: 'hello'},
        data2 = {x: '2'},
        data3 = '3';
    function stackInner(){
        var d1 = data1,
            d2 = {y: '5'};
    }
    return stackInner
}
var out = stack2()

这里有一个要点,d2赋值给data1一定是在stackInner中完成的,原因?因为再stackInner方法中d2才被声明出来,如果你在stack2中d1 = data1那么恭喜你,你隐式的声明了一个叫d1的全局变量,而且在stackInner由于变量屏蔽的原因,你也看不到全局上的d2,原本计划的闭包完全泡汤。

变量屏蔽:不同作用域中相同名称的变量就会触发变量屏蔽。

看看栈现在的样子

运行时的方法栈的样子

               |------>{y: '5'}
out<---|       | |----|
    |  |  | d2-| | |  |  |
    |  |--|_d1---|_|  |  |
    |     data3='3'   |  |
    |     data2(略)   |  |
    |_____data1<------|__|

好了,这个图可以和我们永别了,如果有可能,我后面会用画图工具替代,这么画图实在是太过邪典了。

这里涉及到了方法栈的一个特性,就是变量的穿透性,外部变量可以在内部的任意位置使用,因为再内部执行结束前,外部变量会一直存在。

由于stackInner被外部的out引用,导致这个对象不会随着方法栈的结束而销毁,接下来,最神奇的事情来了,由于stackInner这对象没有销毁,它内部d1依然保有data1所对应数据的引用,d1,d2一定会活下来,因为他们的爸爸stackInner活下来了,data1也以某种形式活了下来。

为什么说是某种形式,因为,本质上来说data1还是被销毁了。没错,只不过,data1所引用的那个对象的地址链接没有被销毁,这个才是本质。栈在调用结束后一定是会销毁的。但是调用本体(方法对象)只要存在,那么内部所引用的链接就不会断。

这个就是闭包的成因和本质。

5.闭包有什么用

OK,我猜测上一个章节估计很多人都直接跳过了,其实,跳过影响也不多,这个部分描述一下结论性的东西,闭包的作用。

它的最大作用就是给你的变量一个命名空间,防止命名冲突。要知道,你的框架,你export的东西,你import进来的东西,在编译的时候都会变成闭包,为的就是减少你变量对全局变量的污染,一个不依赖与import export的模块的代码大概长这个样子

(function(Constr, global){
    let xxx = new Constr(env1, env2, env3)
    global.NameSpace = xxx;
})(function(parm1, parm2, parm3) {
    //dosomeing
    reutrn {
        a: 'some1',
        b: 'some2',
        funcC(){
            //dosome
        },
        funcD(){
            //dosome
        }
    }
}, window)

当然这种封装代码的风格有多种多样的,但是大家都尽量把一套体系的内容都放到一个命名空间下,避免与其他框架产生冲突

相关推荐:javascript学习教程

【本文来源:韩国服务器 http://www.558idc.com/kt.html欢迎留下您的宝贵建议】

上一篇:JavaScript中style什么意思
下一篇:没有了
网友评论