javascript的闭包介绍(司徒正美)_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript的闭包介绍(司徒正美)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:02 PM

閉包

闭包的定义非常晦涩——闭包，是指语法域位于某个特定的区域，具有持续参照（读写）位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义（或创建）时的值（深连结）。简单来说，闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量（键值对），而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚，闭包就是“属性表”，闭包就是一个数据块，闭包就是一个存放着“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(nif(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 lists[i].onclick = (function(i){//保存于外部函函数 
return function(){ 
alert(i); 
} 
})(i); 
} 

复制代码代码如下:

 
var lists = document.getElementsByTagName("li"); 
for(var i=0,l=lists.length; 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 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)} 
}) 

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles