前端常见面试题—

说起闭包就不得不提到作用域和作用域链了

作用域：

全局作用域

函数外部定义的作用域

函数作用域（也称局部作用域）

在函数内部定义的，函数外部不能访问函数内部定义的变量

但函数内部可以访问函数外部定义的变量

块级作用域（let const声明的）

只能在定义的花括号 { } 中访问定义的变量，例如:if或for循环

作用域链：类似于原型链，但又不同

先在当前范围内部查找是否有变量定义和赋值，有则使用，没有由往上一级函数去查找，有则使用，没有则往父级的父级去查找，以此类推......

现在引入闭包的概念

闭包是什么？

广义上的闭包：只要函数内部访问父级作用域的变量，就已经形成闭包
狭义的闭包（通俗来讲）:

函数套函数

内部函数引用到外部函数的变量

内部函数通过return返回到外部

闭包优缺点：

优点：

缓存数据

隔离作用域，防止变量污染

缺点：

数据溢出，导致内存泄露（解决：将不用的闭包引用设置为null ）

代码演示：

 //外部函数function fn1() {let i = 1;const fn2 = function() {console.log(i++)}return fn2}let res1 = fn1()res1() //1   //类似于vue计算属性res1() //2 res1() //3res1() //4

应用场景

数组for循环

        var arr=[]for (var i = 0; i < 5; i++) {arr[i]=function(){return i}}console.log(arr[0]());//5console.log(arr[1]());//5console.log(arr[2]());//5console.log(arr[3]());//5console.log(arr[4]());//5

现在还是想打印0，1，2，3，4

方法1：可以使用let(因为let是块级作用域且有缓存性)

        var arr=[]for (let i = 0; i < 5; i++) {arr[i]=function(){return i}}console.log(arr[0]());//0console.log(arr[1]());//1console.log(arr[2]());//2console.log(arr[3]());//3console.log(arr[4]());//4

方法2：可以使用闭包

        var arr=[]for (let i = 0; i < 5; i++) {(function(i){arr[i]=function(){return i}           })(i)}console.log(arr[0]());//0console.log(arr[1]());//1console.log(arr[2]());//2console.log(arr[3]());//3console.log(arr[4]());//4

定时器中使用

        for (var index = 0; index < 5; index++) {setTimeout(function(){console.log(index);  //5个5},0)            }

现在还是想打印0，1，2，3，4 (也可以使用let 上面有) 并且每隔一秒打印一次

        for (var i = 0; i < 5; i++) {(function(i){setTimeout(function(i){console.log(i);//0 1 2 3 4},i*1000)          })(i)  }

dom操作使用（利用闭包得到当前li的索引号）

    for (var i = 0; i < lis.length; i++) {lis[i].onclick=function(){console.log(i);  //点击每一个li都打印的是5}        }

解决：

var lis = document.querySelectorAll("li");for (var i = 0; i < lis.length; i++) {(function (i) {lis[i].onclick = function () {console.log(i);  //0 1 2 3 4};})(i);}

前端常见面试题——闭包相关推荐

前端常见面试题及答案
文章转自http://www.cnblogs.com/syfwhu/p/4434132.html 前言本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性. ...
前端常见面试题---flex:1 是什么？
前端常见面试题-flex:1 是什么文章目录前端常见面试题---flex:1 是什么 Flex-grow Flex-shrink Flex-basis flex=1得应用一个高度自适应的div, ...
web前端常见面试题
Vue面试题生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted ...
前端常见面试题之----js单线程，微任务宏任务
js单线程,微任务宏任务前言一.什么是单线程? 二.为什么JS是单线程? 三.任务队列 1. 什么是任务队列 2. 什么是微任务宏任务四.常见面试题例子总结前言他来了他来了,前端必问题之一 ...
前端常见面试题 - JS篇
以下会是JS常见面试题: 面试题将会以系列不定时更新,编写不宜,如有用到,请动动小手关注一下. 1. 简述ES6 1. let: 块级作用域. 2. const: 常量; 块级作用域; 一旦声明, 则 ...
web前端常见面试题总结
人生的路上少不了尝试,人人都是打工人,但愿这份面试题可以帮助到你 H5有哪些新特性? 绘画canvas(随时随地绘制2D图形).svg(描述XML中的2D图形)元素语义化标签header.ment. ...
中级前端常见面试题（附答案），持续更新
文章目录 Q:JS有哪些数据类型? 7种基本类型 1种引用类型 Q:ES6数据结构 Set / Map Set Map Q:call, apply, bind 用法和区别 call() 和 apply ...
2023前端常见面试题大全
1. 什么是作用域? 变量产生作用的区域就叫做作用域 2. 作用域的分类全局作用域局部作用域 3.局部作用域的分类函数作用域块级作用域 4.作用域链作用域链的本质是变量查找机制 5.作用域 ...
【面试】前端常见面试题总结
1.什么是mvvm . mvc 模型? MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型. [模型]指的是后端传递的数据. [视图]指的是所看到的页面. [视图模型 ...

前端常见面试题——闭包

前端常见面试题——闭包相关推荐

最新文章

热门文章