资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/进击JavaScript之（三）玩转闭包

进击JavaScript之（三）玩转闭包

cyixlq / 1570人阅读

摘要：为了更好的理解，在阅读此文之前建议先阅读上一篇进击之词法作用域与作用域链什么是闭包闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。在中函数构成闭包。

为了更好的理解，在阅读此文之前建议先阅读上一篇《进击JavaScript之词法作用域与作用域链》
1.什么是闭包

闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。所谓的闭包就是一个具有封闭的对外不公开的，包裹结构，或空间。

在JS中函数构成闭包。一般函数是一个代码结构的封闭结构，即包裹的特性，同时根据作用域规则只允许函数访问外部的数据，外部无法访问函数内部的数据，即封闭的对外不公开的特性，因此说函数可以构成闭包。

概括：闭包就是一个具有封闭与包裹功能的结构。函数可以构成闭包。函数内部定义的数据函数外部无法访问，即函数具有封闭性；函数可以封装代码即具有包裹性，所以函数可以构成闭包。
2.闭包有什么用（解决什么问题）？

闭包不允许外部访问

要解决的问题就是间接访问该数据

函数就可以构成闭包，要解决的问题就是如何访问到函数内部的数据

function foo () {
    var num  = 123;
    return num;
}
var res = foo();
console.log( res );    // =>123

这里的确是访问到函数中的数据了。但是该数据不能第二次访问，因此第二次访问的时候又要调用一次foo，表示又有一个新的num = 123出来了。

在函数内的数据，不能直接在函数外部访问，那么在函数内如果定义一个函数，那么在这个函数内部中是可以直接访问的

function foo() {
    var num = Math.random();
    function func() {
        return mun;
    }
    return func;
}
var f = foo();
// f 可以直接访问这个 num
var res1 = f();
var res2 = f();

我们使用前面学习的绘制作用域链结构图的方法来绘制闭包的作用域链结构图，如下：

3.闭包使用举例

如何获得超过一个数据

function foo () {
    var num1 = Math.random();
    var num2 = Math.random();
    return {
        num1: function () {
            return num1;
        },
        num2: function () {
            return num2;
        }
    }
}

如何完成读取一个数据和修改这个数据

function foo () {
    var num = Math.random();
    return {
        get_num : function () {
            return num;
        },
        set_num: function( value ) {
            return num = value;
        }
    }
}
4.基本的闭包结构

一般闭包的问题就是要想办法简洁的获取函数内的数据使用权，那么我们就可以总结出一个基本的使用模型。

写一个函数，函数内部定义一个新函数，返回新函数，用新函数获得函数内的数据

写一个函数，函数内部定义个一个对象，对象中绑定多个函数（方法），返回对象，利用对象的方法访问函数内的数据

5.闭包的基本用法

闭包是为了实现具有私有访问空间的函数的

带有私有访问数据的对象

function Person() {
    this.name = "张三";
    // setName( "" )
}

所有的私有数据，就是说只有函数内部可以访问的数据，或对象内部的方法可以访问的数据

最简单的实现：

function createPerson() {
    var __name__ = "";
    return {
        getName: function () {
            return __name__;
        },
        setName: function( value ) {
            // 如果不姓张就报错
            if ( value.charAt(0) === "张" ) {
                __name__ = value;
            } else {
                throw new Error( "姓氏不对，不能取名" );
            }
        }
    }
}
var p = createPerson();
p.set_Name( "张三丰" );
console.log( p.get_Name() );
p.set_Name( "张王富贵" );
console.log( p.get_Name() );

带有私有数据的函数

var func = function () {}
function func () {}
var foo = (function () {
    // 私有数据
    return function () {
        // 可以使用私有的数据
        ...
    };
});
6.闭包基本模型

对象模型

function foo () {
    // 私有数据
    return {
         method : function(){
             // 操作私有数据
         }
    }
}

函数模型

function foo(){
    // 私有数据
    return function(){
         // 可以操作私有数据
    }
}
7.沙箱模式（闭包应用的一个典范） 7.1 沙箱的概念

沙盘与盒子，就可以在一个笑笑的空间内模拟显示世界，特点是执行效果与现实世界一模一样，但是在沙箱中模拟与现实无关.

7.2 沙箱模式

沙箱模式就是一个自调用函数，代码写到函数中一样会执行，但是不会与外界有任何的影响

例如，在jQuery中

(function () {
   var jQuery = function () { // 所有的算法 }
   // .... // .... jQuery.each = function () {}
   window.jQuery = window.$ = jQuery;
})();
$.each( ... )
8.带有缓存功能的函数

以 Fibonacci 数列为例，改进传统计算斐波那契数列方法
我们来回顾一下传统递归方式求斐波那契数列方法，我们定义一个count变量来查看递归了多少次：

var count = 0;
function fibo( n ){
    count++;
    if( n ==0 || n == 1 ) return 1;
    return fibo( n - 1 ) + fibo( n - 2 );
}
fib1( 20 );
console.log( count1 );
// 5: 15
// 6: 25
// ...
// 20: 21891

当 n = 5 式，count = 15，当时当 n = 20 的时候，count就达到惊人的21891次，性能太低了

性能低的原因是 重复计算。如果每次将计算的结果存起来

那么每次需要的时候先看看有没有存储过该数据，如果有，直接拿来用。

如果没有再递归，但是计算的结果需要再次存储起来，以便下次使用

改进版：

var data = [ 1, 1 ];
var count = 0;
function fibo( n ) {
    count++;
    var v = data[ n ];
    if( v === undefined ){
         v = fibo( n - 1 ) + fibo( n - 2 );
         data[ n ] = v;
    }
    return v;
}
fibo( 100 );
console.log( count );    // 199

改进之后， n = 100的时候也才199次，大大提高了性能。

9.闭包的性能问题

函数执行需要内存，那么函数中定义的变量，会在函数执行结束后自动回收，凡是因为闭包结构的，被引出的数据，如果还有变量引用这些数据的话，那么这些数据就不会被回收。

因此在使用闭包的时候如果不适用某学数据了，一定要赋值一个null

var f = (function () {
    var num = 123;
    return function () {
        return num;
    };
})();
// f 引用着函数，函数引用着变量num
// 因此在不适用该数据的时候，最好写上
f = null;

推荐阅读

进击JavaScript之（一）词法作用域与作用域链

进击JavaScript之（二）词法作用域与作用域链

进击JavaScript之（四）原型与原型链

GPU云服务器 云服务器 玩转云服务器三科协培训活动 javascript闭包 javascript闭包详解 进击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80183.html

相关文章

  • 进击JavaScript之（一）变量声明提升

    摘要：如下代码输出的结果是代码执行分为两个大步预解析的过程代码的执行过程预解析与变量声明提升程序在执行过程中，会先将代码读取到内存中检查，会将所有的声明在此进行标记，所谓的标记就是让解析器知道有这个名字，后面在使用名字的时候不会出现未定义的错误。 showImg(https://segmentfault.com/img/remote/1460000012922850); 如下代码输出的结果是...

    LeexMuller 评论0 收藏0

  • 进击JavaScript之（二）词法作用域与作用域链

    摘要：一作用域域表示的就是范围，即作用域，就是一个名字在什么地方可以使用，什么时候不能使用。概括的说作用域就是一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。 一、作用域 域表示的就是范围，即作用域，就是一个名字在什么地方可以使用，什么时候不能使用。想了解更多关于作用域的问题推荐阅读《你不知道的JavaScript上卷》第一章（或第一部分），从编译原理的角度说明什么是作用域。概...

    denson 评论0 收藏0

  • 进击JavaScript之（四）原型与原型链

    摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。 本文您将看到以下内容： 传统构造函数的问题 一些相关概念 认识原型 构造、原型、实例三角结构图 对象的原型链 函数的构造函数Function 一句话说明什么...

    XBaron 评论0 收藏0

  • 进击的 JavaScript（五） 之 立即执行函数与闭包

    摘要：匿名函数是不能单独写的，所以就提不上立即执行了。六立即执行函数在闭包中的应用立即执行函数能配合闭包保存状态。来看下上节内容中闭包的例子现在，我们来利用立即执行函数来简化它第一个匿名函数执行完毕后，返回了第二个匿名函数。 前面的闭包中，提到与闭包相似的立即执行函数，感觉两者还是比较容易弄混吧，严格来说（因为犀牛书和高程对闭包的定义不同），立即执行函数并不属于闭包，它不满足闭包的三个条件。...

    vincent_xyb 评论0 收藏0

  • 进击的 JavaScript（四） 之 闭包

    摘要：此时产生了闭包。导致，函数的活动对象没有被销毁。是不是跟你想的不一样其实，这个例子重点就在函数上，这个函数的第一个参数接受一个函数作为回调函数，这个回调函数并不会立即执行，它会在当前代码执行完，并在给定的时间后执行。 上一节说了执行上下文，这节咱们就乘胜追击来搞搞闭包！头疼的东西让你不再头疼！ 一、函数也是引用类型的。 function f(){ console.log(not cha...

    Anleb 评论0 收藏0

发表评论

登陆后可评论

0条评论

cyixlq

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<