javascript的闭包介绍(司徒正美)
发布时间：2024-06-05 09:12:21
标签：闭包
闭包的定义非常晦涩——闭包，是指语法域位于某个特定的区域，具有持续参照（读写）位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义（或创建）时的值（深连结）。简单来说，闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量（键值对），而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚，闭包就是“属性表”，闭包就是一个数据块，闭包就是一个存放着“Name=Value”的对照表。就这么简单。但是，必须强调，闭包是一个运行期概念。
在Javascript中闭包(Closure)，有两个特点：
作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
现在比较让人认同的闭包实现有如下三种
with(obj){
//这里是对象闭包
}
(function(){
//函数闭包
})()
try{
//...
} catch(e) {
//catch闭包 但IE里不行
}
几个有用的示例
//*************闭包uniqueID*************
uniqueID = (function(){ //这个函数的调用对象保存值
var id = 0; //这是私有恒久的那个值
//外层函数返回一个有权访问恒久值的嵌套的函数
//那就是我们保存在变量uniqueID里的嵌套函数.
return function(){return id++;}; //返回,自加.
})(); //在定义后调用外层函数.
document.writeln(uniqueID()); //0
document.writeln(uniqueID()); //1
document.writeln(uniqueID()); //2
document.writeln(uniqueID()); //3
document.writeln(uniqueID()); //4
//*************闭包阶乘*************
var a = (function(n){
if(n<1){ alert("invalid arguments"); return 0; }
if(n==1){ return 1; }
else{ return n * arguments.callee(n-1); }
})(4);
document.writeln(a);
function User( properties ) {
//这里一定要声明一个变量来指向当前的instance
var objthis = this;
for ( var i in properties ) {
(function(){
//在闭包内，t每次都是新的，而 properties[i] 的值是for里面的
var t = properties[i];
objthis[ "get" + i ] = function() {return t;};
objthis[ "set" + i ] = function(val) {t = val;};
})();
}
}
//测试代码
var user = new User({
name: "Bob",
age: 44
});
alert( user.getname());
alert( user.getage());
user.setname("Mike");
alert( user.getname());
alert( user.getage());
user.setage( 22 );
alert( user.getname());
alert( user.getage());
附上今天在无忧看到的问题：
要求：
让这三个节点的Onclick事件都能正确的弹出相应的参数。
<ul>
<li id="a1">aa</li>
<li id="a2">aa</li>
<li id="a3">aa</li>
</ul>
<script type="text/javascript">
for(var i=1; i < 4; i++){
var id = document.getElementById("a" + i);
id.onclick = function(){
alert(i);//现在都是返回4
}
}
</script>
<!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ for(var i=1; i < 4; i++){ var id = document.getElementById("a" + i); id.onclick = function(){ alert(i);//现在都是返回4 } } } </script> <h1>javascript闭包 by 司徒正美</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
我的解释是，onclick的绑定函数 function(){alert(i)}的作用域为对应li对象，它里面alert的i的作用域为window，每次循环都是在重写window.i的值，因此循环完，i已是4，点击哪一个li元素都是4。
解决方法：
使用函数闭包。
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
lists[i].onclick = (function(i){//保存于外部函函数
return function(){
alert(i);
}
})(i);
}
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
lists[i].onclick = new function(){
var t = i;
return function(){
alert(t+1)
}
}
}
<!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0,l=lists.length; i < l; i++){ lists[i].onclick = function(){ var t = i; return function(){ alert(t+1) } }() } } </script> <h1>javascript闭包 by 司徒正美（函数闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
利用事件代理
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function(){
var e = arguments[0] || window.event,
target = e.srcElement ? e.srcElement : e.target;
if(target.nodeName.toLowerCase() == "li"){
alert(target.id.slice(-1))
}
}
<!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var ul = document.getElementsByTagName("ul")[0]; ul.onclick = function(){ var e = arguments[0] || window.event, target = e.srcElement ? e.srcElement : e.target; if(target.nodeName.toLowerCase() == "li"){ alert(target.id.slice(-1)) } } } </script> <h1>javascript闭包 by 司徒正美（事件代理）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
将暂时变量保留于元素节点上。
var lists = document.getElementsByTagName("li");
for(var i=0,t=0,el; el = list[i++];){
el.i = t++
el.onclick = function(){
alert(this.i)
}
}
<!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0,t=1,el; el = lists[i++];){ el.i = t++ el.onclick = function(){ alert(this.i) } } } </script> <h1>javascript闭包 by 司徒正美（将临时变量变成某一个对象的属性）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
使用with语句造成的对象闭包。
var els = document.getElementsByTagName("li")
for(var i=0,n=els.length;i<n;i++){
with ({i:i})
els[i].onclick = function() { alert(this.innerHTML+i) };
}
<!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var els = document.getElementsByTagName("li") for(var i=0,n=els.length;i<n;i++){ with ({i:i}) els[i].onclick = function() { alert(i) }; } } </script> <h1>javascript闭包 by 司徒正美（对象闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
使用try...catch语句构造的异常闭包：
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
try{
throw i;
}catch(i){
lists[i].onclick = function(){
alert(i)
}
}
}
<!doctype html> <title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript闭包 by 司徒正美" /> <meta name="description" content="javascript闭包 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0,l=lists.length; i < l; i++){ try{ throw i; }catch(i){ lists[i].onclick = function(){ alert(i) } } } } </script> <h1>javascript闭包 by 司徒正美（异常闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
var els = document.getElementsByTagName("li");
(''+Array(els.length+1)).replace(/./g,function(a,i){
els[i].onclick=function(){alert(i)}
})
0
投稿猜你喜欢
简单说明，代码太难懂，先做此记录留待来日在看步骤：1，pip install pyzbar安装好该模块。pyzbar模块是Python一个开- 数据类型计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、
- expand表示是否把series类型转化为DataFrame类型下面代码中的ｎ表示去掉下划线"_"的数量代码如下：im
- 当我们修改一份代码的时候，也许会碰到修改后的代码还不如修改之前的代码能够满足自己的需求，那么这个时候我们就需要对代码进行回滚，下面我们来看一
- 这次代码主要是实现列表的排序，使用sort函数实现，sort函数是对列表中的元素按照特定顺序进行排序，默认reverse，为false，从小
- 之前在转换数据集格式的时候需要将json转换到xml文件，用lxml包进行操作非常方便。1. 写xml文件a) 用etree和objecti
- 本文实例讲述了Python利用神经网络解决非线性回归问题。分享给大家供大家参考，具体如下：问题描述现在我们通常使用神经网络进行分类，但是有时
- 程序流程分析图：传播过程：代码展示：创建环境使用<pip install+包名>来下载torch，torchvision包准备数
- MySQL是一个开源的关系型数据库管理系统，支持多种操作语言，其中最基础、最常用的命令之一就是SELECT语句。在本篇文章中，这里将详细介绍
- 1.Python的基本数据类型数据类型想必大家都知道是什么含义，指的是输入数据的类型，任何数据都有明确的数据类型，例如我们输入100，这个数
- 目的获得一个首尾不含多余空格的字符串方法 可以使用字符串的以下方法处理：string.lstrip(s[, chars])Return a
- 希望这是window.open()打开fullscreen全屏窗口时无提示关闭父窗口的完美解决方案：我们通常都是用控件法，在父窗口文件里放一
- 引言在 Golang 中，将 URL 打包用于从服务器获取数据非常重要。只需了解您是否正在处理任何应用程序并且您想从任何外部位置或服务器获取
- 一、安装库首先我们需要安装PIL和pytesseract库。PIL：（Python Imaging Library）是Python平台上的图
- 在开发过程中，有时遇到由于缓存问题导致页面不能及时更新，有时页面引入了不必需的样式脚本文件，有时由于文件太多，字节过大导致页面的性能缓慢，为
- 1、创建索引对于查询占主要的应用来说，索引显得尤为重要。很多时候性能问题很简单的就是因为我们忘了添加索引而造成的，或者说没有添加更为有效的索
- 可是，其体积仍然很庞大。所以，在日常工作中，如何给SQL Server的备份文件瘦身，就是很多数据库管理员所关心的问题了。 也许微软的数据库
- python logging日志模块的详解日志级别日志一共分成5个等级，从低到高分别是：DEBUG INFO WARNING ERROR C
- 查询到效率低的 SQL 语句 后，可以通过 EXPLAIN 或者 DESC 命令获取 MySQL 如何执行 SELECT 语句的信息，包括在
- Python3 使用pillow库生成随机验证码的代码如下所示：import random# pillow 包的使用from PIL imp
