前端面试题—

什么是闭包?以下代码点击<p> 会输出什么?为什么?能大概说明白的话继续问能想出几种解决办法。

==========

出错：获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。

出错原因：初学者并未理解JavaScript的闭包特性。通过element.οnclick=function(){alert(i);}方式给元素添加点击事件。响应函数function(){alert(i);}中的 i 并非每次循环时对应的 i（如0，1，2，3，4）而是循环后最后 i 的值5。或者说循环时响应函数内并未能保存对应的值 i，而是最后一次i++的值5。

解决方法：见html代码注释部分

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css"> p {background:gold;}
</style>
<script type="text/javascript">
/* 网上的七种方法//将变量 i 保存给在每个段落对象上
function init() {      var pAry = document.getElementsByTagName("p");      for( var i=0; i<pAry.length; i++ ) {  pAry[i].i=i;     pAry[i].onclick = function() {      alert(this.i);      }   }
}//将变量i保存在匿名函数自身
function init(){var pAry=document.getElementsByTagName("p");for (var i = 0; i <pAry.length; i++) {(pAry[i].οnclick=function(){alert(arguments.callee.i)}).i=i;};
}  //加一层闭包，i以函数参数形式传递给内层函数
function init(){var pAry=document.getElementsByTagName("p");for (var i = 0; i < pAry.length; i++) {(function(arg){pAry[i].οnclick=function(){alert(arg);};})(i);//调用时参数};
}//加一层闭包，i 以局部变量形式传递给内层函数
function init(){var pAry=document.getElementsByTagName("p");for (var i = 0; i < pAry.length; i++) {(function(){var temp=i;//调用时局部变量pAry[i].οnclick=function(){alert(temp);}})();};
}//加一层闭包，返回一个函数作为响应事件
function init(){var pAry=document.getElementsByTagName("p");for (var i = 0; i < pAry.length; i++) {pAry[i].οnclick=function(arg){return function(){alert(arg);}}(i);};
}function init(){var pAry=document.getElementsByTagName("p");for (var i = 0; i < pAry.length; i++) {pAry[i].οnclick=new Function("alert("+i+");");//new一次就产生一个函数实例};
}function init(){var pAry=document.getElementsByTagName("p");for (var i = 0; i < pAry.length; i++) {pAry[i].οnclick=Function("alert("+i+");");};
}*/
function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = function() { alert(i); } }
} </script>
</head>
<body οnlοad="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>

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

2023前端面试题------JS 面试题(2) es6
2023前端面试题------es6 面试题三. JS高频面试题 15. 事件循环 16. 微任务和宏任务 17. http相关 18. 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生 ...
初级前端面试题 - js
前言:众所周知,HTML,CSS,JS是学习前端所必备的.js的基础学好了,框架类的vue,react等都会接受的很快,因此js是前端很总要的一个部分,这篇文章将会结合面试题,对js的知识点进行总结 ...
前端面试题js篇，持续更新
1.解释重绘与回流,以及如何优化? 重绘与回流: 在页面加载时,浏览器会把获取到的html代码解析成dom树,dom树中包含html所有标签以及js动态生成的元素等.浏览器会把所有的样式(即css ...
2023前端面试题——JS篇
1.判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 ' ...
前端面试题 - JS 运算符优先级
建议先看一下运算符分类,可以参考这篇文章:js运算符与优先级,基本上把所有的运算符以及分类都总结了出来. 借用文章的一个表格,该表格包含了所有的运算符,优先级自上而下逐渐降低,同一行优先级相同: 我们 ...
详细前端面试题javascript篇--持续更新
最新前端面试题汇总大全(超详细含vue,react,css,js,webpack,性能优化等)–持续更新点击查看前端HTML篇前端CSS篇前端面试题js篇--持续更新 1. JS 数据类型 ?存 ...
腾讯云前端面试题及答案
腾讯云前端面试题 js数据类型 js语言特性闭包产生的原因 CSS盒模型行内元素和块级元素区别重排和重绘事件的捕获和冒泡,冒泡的使用场景 cookie,localstorage,session ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
前端面试题汇总（JS 基础篇）
前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...

前端面试题——js闭包

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

最新文章

热门文章