登录  /  注册
首页 > web前端 > js教程 > 正文
javascript的闭包介绍(司徒正美)_javascript技巧
php中文网
发布: 2016-05-16 18:02:06
原创
955人浏览过
闭包的定义非常晦涩——闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义(或创建)时的值(深连结)。简单来说,闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚,闭包就是“属性表”,闭包就是一个数据块,闭包就是一个存放着“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事件都能正确的弹出相应的参数。
复制代码 代码如下:


  • aa

  • aa

  • aa





[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

我的解释是,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)
}
}
}


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

利用事件代理
复制代码 代码如下:

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))
}
}


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

将暂时变量保留于元素节点上。
复制代码 代码如下:

var lists = document.getElementsByTagName("li");
for(var i=0,t=0,el; el = list[i++];){
el.i = t++
el.onclick = function(){
alert(this.i)
}
}


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

使用with语句造成的对象闭包。
复制代码 代码如下:

var els = document.getElementsByTagName("li")
for(var i=0,n=els.length;iwith ({i:i})
els[i].onclick = function() { alert(this.innerHTML+i) };
}


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

使用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)
}
}
}


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

复制代码 代码如下:

var els = document.getElementsByTagName("li");
(''+Array(els.length+1)).replace(/./g,function(a,i){
els[i].onclick=function(){alert(i)}
})
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学