前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JS】重温基础:闭包

【JS】重温基础:闭包

作者头像
用户1462769
发布2019-09-19 16:45:08
1.9K0
发布2019-09-19 16:45:08
举报
文章被收录于专栏:全栈者

本章节复习的是JS中的关于闭包,这个小哥哥呀,看看。

前置知识: 声明函数两种方法:

  • 函数声明,存在函数声明提升,因此可以在函数声明之前调用(不会报错)。
代码语言:javascript
复制
fun();  // ok
function fun(){};
  • 函数表达式,不存在函数声明提升,若定义前调用,会报错(函数还不存在)。
代码语言:javascript
复制
fun();  // error
var fun = function (){};

1.概念

2.1 词法作用域

这里先要了解一个概念,词法作用域:它是静态的作用域,是书写变量和块作用域的作用域**。

代码语言:javascript
复制
function f (){
    var a = "leo";
    function g(){console.log(a)};
    g();
}
f(); // "leo"

由于函数 g的作用域中没有 a这个变量,但是它可以访问父作用域,并使用父作用域下的变量 a,最后输出 "leo"

词法作用域中使用的域,是变量在代码中声明的位置所决定的。嵌套的函数可以访问在其外部声明的变量。

2.2 闭包

接下来介绍下闭包概念,闭包是指有权访问另一个函数作用域中的变量的函数

闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。

创建闭包的常见方式:在一个函数内创建另一个函数。如:

代码语言:javascript
复制
function f (){
    var a = "leo";
    var g = function (){
        console.log(a);
    };
    return g;// 这里g就是一个闭包函数,可以访问到g作用域的变量a
}
var fun = f();
fun(); // "leo"

通过概念可以看出,闭包有以下三个特征:

  • 函数嵌套函数
  • 函数内部可以引用函数外部的参数和变量
  • 参数和变量不会被垃圾回收机制回收

注:关于内存回收机制,可以查看阮一峰老师的《JavaScript 内存泄漏教程》。

另外,使用闭包有以下好处:

  • 将一个变量长期保存在内存中
  • 避免全局变量的污染
代码语言:javascript
复制
function f (){
    var a = 1; 
    return function(){
        a++;
        console.log(a);
    }
}
var fun = f();
fun(); // 2
fun(); // 3

因为垃圾回收机制没有回收,所以每次调用 fun()都会返回新的值。

  • 私有化成员,使得外部不能访问
代码语言:javascript
复制
function f (){
    var a = 1;
    function f1 (){
        a++;
        console.log(a);
    };
    function f2 (){
        a++;
        console.log(a);
    };
    return {g1:f1, g2:f2};
};
var fun = f();
fun.g1(); // 2
fun.g2(); // 3

2.易错点

2.1 引用的变量发生变化

代码语言:javascript
复制
function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(){
            console.log(i);
        }
    }
    return a;
}
var fun = f();
fun[0]();  // 10
fun[1]();  // 10
// ...
fun[10]();  // 10

原本照我们的想法, fun方法中每个元素上的方法执行的结果应该是 1,2,3,...,10,而实际上,每个返回都是 10,因为每个闭包函数引用的变量 if执行环境下的变量 i,循环结束后, i已经变成 10,所以都会返回 10。 解决办法可以这样:

代码语言:javascript
复制
function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(index){
            return function(){
                console.log(index);
                // 此时的index,是父函数作用域的index,
                // 数组的10个函数对象,每个对象的执行环境下的index都不同
            }
        }(i);
    };
    return a;
};
var fun = f();
fun[0]();  // 0
fun[1]();  // 1
// ...
fun[10]();  // 10

2.2 this指向问题

代码语言:javascript
复制
var obj = {
    name : "leo", 
    f : function(){
        return function(){
            console.log(this.name);
        }
    }
}
obj.f()();  // undefined

由于里面的闭包函数是在 window作用域下执行,因此 this指向 window

2.3 内存泄漏

当我们在闭包内引用父作用域的变量,会使得变量无法被回收。

代码语言:javascript
复制
function f (){
    var a = document.getElementById("leo");
    a.onclick = function(){console.log(a.id)};
}

这样做的话,变量 a会一直存在无法释放,类似的变量越来越多的话,很容易引起内存泄漏。我们可以这么解决:

代码语言:javascript
复制
function f (){
    var a = document.getElementById("leo");
    var id = a.id;
    a.onclick = function(){};
    a = null;  //主动释放变量a
}

通过把变量赋值成 null来主动释放掉。

3.案例

3.1 经典案例——定时器和闭包

代码如下:

代码语言:javascript
复制
for(var i = 0 ; i<10; i++){
    setTimeout(function(){
        console.log(i);
    },100);
}

不出所料,返回的不是我们想要的 0,1,2,3,...,9,而是10个 10。 这是因为js是单进程,所以在执行 for循环的时候定时器 setTimeout被安排到任务队列中排队等候执行,而在等待过程中, for循环已经在执行,等到 setTimeout要执行的时候, for循环已经执行完成, i的值就是 10,所以就打印了10个 10。 解决方法 :

  • 1.使用ES6新增的 let。 把 for循环中的 var替换成 let
  • 2.使用闭包
代码语言:javascript
复制
for(var i = 0; i<10 ; i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        }, i*100);
    })(i);
}

3.2 使用闭包解决递归调用问题

代码语言:javascript
复制
function f(num){
    return num >1 ? num*f(num-1) : 1;
}

var fun = f;
f = null;
fun(4)   // 报错 ,因为最好是return num* arguments.callee(num-1),arguments.callee指向当前执行函数,但是在严格模式下不能使用该属性也会报错,所以借助闭包来实现

这里可以使用 returnnum>1?num*arguments.callee(num-1):1;,因为 arguments.callee指向当前执行函数,但是在严格模式下不能使用,也会报错,所以这里需要使用闭包来实现。

代码语言:javascript
复制
function fun = (function f(num){
    return num >1 ? num*f(num-1) : 1;
})

这样做,实际上起作用的是闭包函数 f,而不是外面的 fun

3.3 使用闭包模仿块级作用域

ES6之前,使用 var声明变量会有变量提升问题:

代码语言:javascript
复制
for(var i = 0 ; i<10; i++){console.log(i)};
console.log(i);  // 变量提升 返回10

为了避免这个问题,我们这样使用闭包(匿名自执行函数):

代码语言:javascript
复制
(function(){
    for(var i = 0 ; i<10; i++){console.log(i)};
})()
console.log(i);  // undefined

我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在函数执行完后会立刻释放资源,关键是不污染全局对象。这里 i随着闭包函数的结束,执行环境销毁,变量回收。 但是现在,我们用的更多的是ES6规范的 letconst来声明。

参考文章:

  1. MDN 闭包
  2. 《JavaScript高级程序设计》

本部分内容到这结束

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈者 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.概念
    • 2.1 词法作用域
      • 2.2 闭包
      • 2.易错点
        • 2.1 引用的变量发生变化
          • 2.2 this指向问题
            • 2.3 内存泄漏
            • 3.案例
              • 3.1 经典案例——定时器和闭包
                • 3.2 使用闭包解决递归调用问题
                  • 3.3 使用闭包模仿块级作用域
                  • 参考文章:
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档