javascript 闭包

Posted 长安城下翩翩少年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 闭包相关的知识,希望对你有一定的参考价值。

对闭包的简单解释

全局变量生存周期是永久,局部变量生存周期随着函数的调用介绍而销毁。闭包就是 在函数中定义且成为该函数内部返回的函数的自由变量 的变量,该变量不会随着外部函数调用结束而销毁。 (注:不光是变量,函数内声明的函数也可以形成闭包)

当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时就产生了闭包。

function foo(){
    let a = 1;
    return function sum(){
            console.log(a);
           return a++;
    };
}
let test = foo();             //闭包的产生:在执行foo函数时将返回的函数赋值给了一个变量,让foo中变量a可供返回的函数使用而不被销毁。
test();  //1
test();  //2
test();  //3
// foo函数中的变量a在foo调用结束后依旧保存了下来,这就是闭包。

函数也可以成为闭包

let bibao = function(){
    let a = 1;
    function test(){
        a++;
        console.log('函数依旧可以形成闭包'+a);
    };
    return function(){
        test();
    }
}
let fun = bibao();
fun();//函数依旧可以形成闭包2
fun();//函数依旧可以形成闭包3
fun();//函数依旧可以形成闭包4

for循环闭包

for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })( i );
}

闭包的应用一 模块

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }
    function doAnother() {
        console.log( another.join( " ! " ) );
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

模块中闭包形成分析:
首先,CoolModule() 只是一个函数,必须要通过调用它来创建一个模块实例。如果不执行外部函数,内部作用域和闭包都无法被创建。
其次,CoolModule() 返回一个用对象字面量语法 { key: value, ... } 来表示的对象。这个返回的对象中含有对内部函数而不是内部数据变量的引用。我们保持内部数据变量是隐藏且私有的状态。可以将这个对象类型的返回值看作本质上是模块的公共 API。

闭包的应用二 封装变量

闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。例如使用js实现栈、队列等数据结构,需要将内部是数组进行私有化封装。

var mult = (function(){ 
     var cache = {}; 
    return function(){ 
         var args = Array.prototype.join.call( arguments, ',' ); 
         if ( args in cache ){ 
             return cache[ args ]; 
         } 
         var a = 1; 
         for ( var i = 0, l = arguments.length; i < l; i++ ){ 
             a = a * arguments[i]; 
         } 
         return cache[ args ] = a; 
     } 
})(); 
alert ( mult( 1,2,3 ) ); // 输出:6 
alert ( mult( 1,2,3 ) ); // 输出:6 

闭包的应用三 延续局部变量的寿命

img 对象经常用于进行数据上报,如下所示:

var report = function( src ){ 
 var img = new Image(); 
 img.src = src; 
}; 
report( 'http://xxx.com/getUserInfo' ); 

但是通过查询后台的记录我们得知,因为一些低版本浏览器的实现存在 bug,在这些浏览器下使用 report 函数进行数据上报会丢失 30%左右的数据,也就是说,report 函数并不是每一次都成功发起了 HTTP 请求。丢失数据的原因是 img 是 report 函数中的局部变量,当 report 函数的调用结束后,img 局部变量随即被销毁,而此时或许还没来得及发出 HTTP 请求,所以此次请求就会丢失掉。现在我们把 img 变量用闭包封闭起来,便能解决请求丢失的问题

 var report = (function(){ 
     var imgs = []; 
     return function( src ){ 
         var img = new Image(); 
         imgs.push( img ); 
         img.src = src; 
     } 
})(); 

以上是关于javascript 闭包的主要内容,如果未能解决你的问题,请参考以下文章

Spark闭包与序列化

JavaScript ---- 闭包(什么是闭包,为什么使用闭包,闭包的作用)

JavaScript 闭包(随笔)

javascript中的闭包

Javascript中的闭包

Javascript中的闭包(转载)