当前位置: 首页 > news >正文

前端面试之闭包

前端面试之闭包

闭包属于属于JavaScript的难点,但是在很多高级应用都需要用到,也是前端面试中经常会考到的点。

作用域

谈到闭包首先必须了解作用域,ES5中,JavaScript的作用域只有两种,一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。
JavaScript中变量分为两种:全局变量,局部变量。

全局变量在程序中的任何一个位置都可以调用,及赋值。

在函数内部的变量称之为局部变量,它可以在函数内部读取,在函数外部无法正常读取,如果想要读取函数内部的变量则需要用到闭包。父函数內部定义了子函数,子函数可以引用父函数作用域中的变量。

在网上找了一个图比较好的解释了变量与作用域之间的微妙关系。

变量与作用域

必须注意的一点的是函数本身的作用域,是定义时的作用域,这里与this的指向不同。

var a = 1;
var f = function(){
    console.log(a);
}

function f2(){
    var a = 2;
    f();
}

f2() // 1

函数f在全局作用域下定义的,虽然在f2中被引用,但是a仍然是全局作用域下的a。

javascript 中的垃圾收集机制

在谈到闭包之前,还有一个垃圾回收机制需要了解。

JavaScript的内存生命周期:

  • 分配所需要的内存
  • 使用分配到的内存(读、写)
  • 不需要时将其释放

垃圾回收机制的原理其实很简单:确定变量中哪些还在继续使用的,哪些已经不用的,然后垃圾收集器每隔固定的时间就会清理一下,释放内存。

局部变量在程序执行过程中,会为局部变量分配相应的空间,然后在函数中使用这些变量,如果函数运行结束了,而且在函数之外没有仔引用这个变量了,局部变量就没有存在的价值了,因此会被垃圾回收机制回收。在这种情况下,很容易辨别,但是并非所有情况下都这么容易。比如说全局变量。在现代浏览器中,通常使用标记清除策略来辨别及实现垃圾回收(还有一种叫引用计数,即当变量的引用次数为零的时候,就表示不再使用,这里有个循环计数的bug,现代浏览器已经不再使用它)。

  • 标记清除

标记清除会给内存中所有的变量都加上标记,然后去掉环境中的变量以及不在环境中但是被环境中变量引用的变量(闭包)的标记。剩下的被标记的就是等到被删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后垃圾回收器会完成内存清理,销毁那些被标记的值释放内存空间。

闭包

首先抛出一条闭包的定义:闭包是指这样的作用域,它包含有一个函数,这个函数可以调用被这个作用域所封闭的变量、函数或者闭包等内容。
由定义可以看出:

  • 闭包指的是一个函数作用域
  • 闭包包含一个函数,且这个函数调用了作用域里的内容

满足这两点,都可以叫做闭包。

正常情况下,一个函数执行完,且没有在任何地方被调用,这个函数将会被垃圾回收机制销毁。

举个例子:

var obj = function () {
  var a = '';
  return {
    set: function (val) {
      a = val;
    },
    get: function () {
      return a;
    }
  }
};

var b = obj();
b.set('new val');
b.get();

obj这个函数在执行完之后理论上 函数体内的东西都应该被回收掉。但它执行后的返回值 b 具有set和get方法。这两个方法里对a保持了引用,所以obj执行过程中产生的a就不会销毁。直到b先被回收,这个a才会回收。

闭包利用的就是以上原理,以下是一个闭包的例子:

function f1() {
  var a = 1;
  function f2() {
    console.log(a);
  }
  return f2;
}

var a = 2;
var f = f1();
f() // 1

f执行完之后,其实f指向的f2这个函数在f1这个函数的作用域的引用,也就是说,执行f,相当于在f1函数的作用域这个环境下,执行f2。原因是f2是在f1中定义的,而且在这个例子中,a的值不会受外界影响。

闭包的特点

1.闭包内的变量不会影响到全局变量,也不会被全局变量所影响
2.闭包中被函数引用的局部变量不会被垃圾回收机制回收
3.可以创建私有变量和私有函数
4.可以把需要公开的变量和方法绑定在window上放出来

(function() {
    // 私有变量
    var age = 20;
    var name = 'Tom';

    // 私有方法
    function getName() {
        return `your name is ` + name;
    }

    // 共有方法
    function getAge() {
        return age;
    }

    // 将引用保存在外部执行环境的变量中,形成闭包,防止该执行环境被垃圾回收
    window.getAge = getAge;
})();

闭包在ES6中的运用

ES6引入了块级作用域,主要是let命令以及const命令。他们的特点是不存在变量提升,不可以重复声明,只在区块中有效,存在暂时性死区。

借一个阮一峰老师的暂时性死区的例子:

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

在条件语句的区块中,虽然tmp在赋值后再用let命令声明,但是let命令已经生效,不归var所管了。

首先抛砖引玉,来一个关于ES5经典的例子:

var test = function () {
  var arr = [];
  for(var i = 0; i < 5; i++){
    arr.push(function () {
      return i*i;
    })
  }
  return arr;
}

var test1 = test();
console.log(test1[0]());
console.log(test1[1]());
console.log(test1[2]());

这个例子就不用多讲了,最后输出的值都是25。要注意的有两点,一个是i的变量提升,一个是i++,i++实际作用位置为当前循环内容结束,下一个循环之前。i++的意思是当前语句结束后,i加1。当我们打印i的值的时候,i的循环已经执行完了,i已经变成5了。

当我们用ES6的时候,情况就不一样了。

var test = function () {
  const arr = [];
  for(let i = 0; i < 5; i++){
    arr.push(function () {
      return i*i;
    })
  }
  return arr;
}

var test1 = test();
console.log(test1[0]());
console.log(test1[1]());
console.log(test1[2]());

因为使用let,使得for循环为块级作用域,let i=0在这个块级作用域中,而不是在函数作用域中。每次循环都会创建一个新的块级作用域,i值互相独立不受影响。所以最后打印的结果是:0,1,4.

闭包实现一个计数器

var counter = function(){
    var count = 1;
    return function(){
      return  count++;
    }
}

相关文章:

  • linux磁盘管理以及linux文件系统管理
  • 普通用户自动挂载光盘
  • SpringAOP拦截Controller,Service实现日志管理(自定义注解的方式)
  • eclipse自动为变量生成Get/Set函数
  • 【Unity】Update()和FixedUpdate()
  • python标识符
  • Ubuntu 12.04 怎样安装 Google Chrome
  • Xampps 1.9.1 系列版本正式发布
  • SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)
  • Jfreechart绘制漂亮的图表
  • Linux TC基于HTB队列的流量管理范例
  • android 引导页设置(只让activity运行一次)
  • nyoj 214 单调递增子序列(二) 【另类dp】
  • 阿里巴巴已拿下中国互联网半壁江山
  • java_流
  • 【5+】跨webview多页面 触发事件(二)
  • CentOS从零开始部署Nodejs项目
  • Computed property XXX was assigned to but it has no setter
  • MySQL几个简单SQL的优化
  • Node.js 新计划:使用 V8 snapshot 将启动速度提升 8 倍
  • php面试题 汇集2
  • uva 10370 Above Average
  • vue-router的history模式发布配置
  • 阿里云前端周刊 - 第 26 期
  • 第十八天-企业应用架构模式-基本模式
  • 湖南卫视:中国白领因网络偷菜成当代最寂寞的人?
  • 聊聊redis的数据结构的应用
  • 设计模式走一遍---观察者模式
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • Nginx惊现漏洞 百万网站面临“拖库”风险
  • Nginx实现动静分离
  • 移动端高清、多屏适配方案
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • # .NET Framework中使用命名管道进行进程间通信
  • #define与typedef区别
  • #Z0458. 树的中心2
  • (14)Hive调优——合并小文件
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (pojstep1.1.2)2654(直叙式模拟)
  • (Redis使用系列) Springboot 实现Redis 同数据源动态切换db 八
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • (转)使用VMware vSphere标准交换机设置网络连接
  • (最优化理论与方法)第二章最优化所需基础知识-第三节:重要凸集举例
  • .cfg\.dat\.mak(持续补充)
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET LINQ 通常分 Syntax Query 和Syntax Method
  • .net Signalr 使用笔记
  • .NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖
  • .NET/C# 使窗口永不获得焦点
  • .net下简单快捷的数值高低位切换
  • @Responsebody与@RequestBody
  • [100天算法】-每个元音包含偶数次的最长子字符串(day 53)
  • [2019/05/17]解决springboot测试List接口时JSON传参异常