JS 经典闭包面试题

1.带参闭包问题

function foo(x) {var tmp = 3;return function f2(y) {alert(x + y + (++tmp));};
}
var bar = foo(3); // bar 现在是一个闭包
bar(10);

注：首先执行var bar = foo(3);那么foo就执行了，参数3也传进去了，但是执行完毕后，tmp变量以及参数x就已经被释放回收了吗？
并没有，因为返回值里面还等待使用这些变量，所以此时，foo虽然执行了，但是foo的变量并没有被释放，在return中等待继续使用这些变量，这时bar就是一个闭包。

2.事件闭包问题
例：很多元素绑定一个点击事件
点击每个按钮时拿到当前按钮所对应的索引值
CSS样式如下：

<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>

首先看拿不到在for循环里当前对象的i值的写法：

var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {btn[i].onclick = function () {alert(i);}
}

注：网页初始化时，每个按钮的事件都已经绑好了，用户触发都是后续触发的，后续触发说明事件有了，事件有了说明for循环执行完成，i就已经拿到最大值。
问题：怎样在for循环里拿到当前对象的i值
解决：索引对索引
写法一：参数的传递

var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {//参数的传递  桥梁btn[i].index = i;btn[i].onclick = function () {alert(this.index);}
}

写法二：自执行函数的闭包自执行函数的参是后面跟括号里的参数传的

var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {(function (x) {btn[i].onclick = function () {alert(x);}})(i);  //这个i是for循环的i
}

注：for循环每一次都执行一个自执行函数，每一次变量i被当做参数传到IIEF（自执行函数）中去，那么这个IIEF中创建了一个变量参数x，然后元素节点btn绑定了一个onclick事件，执行函数里面需要用到这个参数x，但是你又没点，那么这个变量x就没有被清理，就一直在参数里面被保存着，每一个IIEF都做一样的事情，所以这个时候就产生了闭包，变量x并没有被回收，依然在等待使用。

3.面向对象

function fun(n, o) {console.log(o)return {fun: function (m) {return fun(m, n);}};
}
var a = fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);
c.fun(2);
c.fun(3);

4.首先解释arguments
arguments指当前函数的参数列表，类似于数组的集合，使用索引值取;
arguments.length返回当前参数列表的长度

function f1(a, b, c) {console.log(arguments[0]);  //4console.log(arguments.length);  //3
}
f1(4, 5, 6);

例：

function f1(a, b, c) {/*arguments 是当前函数的参数列表  类似于数组的集合  使用索引值来取*/console.log(arguments.length);
}
f1(1, 2, 3);
var sum = function () {var cache;if (arguments.length === 1) {cache = arguments[0];  //如果arguments对象的长度为1，也就是参数只有1个时，将这个参数赋值给cache，暂存return function (number) {  //返回一个函数，函数里的参数（也就是第二个括号里的参数）与之前第一个括号里的参数相加return cache + number}} else {return arguments[0] + arguments[1];  //如果arguments对象的长度不为1，那么两个参数相加}
}
console.log(sum(2, 3));  //5
console.log(sum(2)(3));  //5

JS 经典闭包面试题相关推荐

分享一道JS前端闭包面试题
输出以下代码的结果 1 function fun(n,o){ 2 console.log(o); 3 return { 4 fun:function(m){ 5 return fun(m,n);//[ ...
js经典试题之ES6
js经典试题之ES6 1:在ECMAScript6 中,Promise的状态答案:pending resolved(fulfilled) rejected 解析: Promise对象只有三种状态: ...
js经典试题之数据类型
js经典试题之数据类型 1:输出"B" + "a" + + "B" + "a"的值: 答案:BaNaNa. 分析:因为+ ...
2018经典PHP面试题大全
2018PHP经典面试题大全汇总 2018/2/28 13:49:56 点击次数:4913 1.PHP语言的一大优势是跨平台,什么是跨平台? PHP的运行环境最优搭配为Apache+MySQL+PHP ...
由浅入深 65个JS常考面试题
由浅入深逐个击破 JS常考面试题(上篇) 1. 介绍一下JS的基本数据类型,值是如何存储的? JavaScript一共有8种数据类型,其中有7种基本数据类型:Undefined.Null.Boolea ...
jQuery 一次定时器_史上最全的js、jQuery面试题
js.jQuery面试题整理 1.数据类型基本类型:除Object.String.Number.boolean.null.undefined. 引用类型:object.里面包含的 function. ...
50道经典计算机网络面试题
50道经典计算机网络面试题 1. 说说HTTP常用的状态码及其含义? 思路: 这道面试题主要考察候选人,是否掌握HTTP状态码这个基础知识点. 不管是不是面试需要,我们都要知道,日常开发中的这几个状态 ...
js、jQuery面试题整理
js.jQuery面试题整理 1.数据类型基本类型:String.Number.boolean.null.undefined.Symbol.BigInt. 引用类型:object.里面包含的 fun ...
【Vue面试专题】50+道经典Vue面试题详解！
目录前言相关学习资源 01-Vue组件之间通信方式有哪些 02-v-if和v-for哪个优先级更高? 03-能说一说双向绑定使用和原理吗? 04-Vue中如何扩展一个组件 05-子组件可以直接改变 ...

JS 经典闭包面试题

JS 经典闭包面试题相关推荐

最新文章

热门文章