面向对象的 Javascript 闭包

面向对象的 Javascript 闭包 收藏 闭包 　　闭包意味着内层的函数可以引用存在于包绕它的函数的变量，即使外层的函数的执行已经终止。这一特殊的论题可能是非常强大又非常复杂的。我强烈推荐你们参考本节后面将提及的站点，因为它有一些关于闭包这一话题的精彩的信息。 　　我们先来看程序2-13所示的闭包的两个简单例子。 　　 　　程序2-13. 闭包改善的代码清晰性的两例 //得到id为"main"的元素 var obj = document.getElementById("main"); //改变它的边框样式 obj.style.border = "1px solid red"; //初始化一个1秒钟以后被调用的回调函数 setTimeout(function(){ //此函数将隐藏该元素 obj.style.display = 'none'; }, 1000); //用来延迟显示消息的通用函数 function delayedAlert( msg, time ) { //初始化一个被封套的函数 setTimeout(function(){ //此函数使用了来自封套它的函数的变量msg alert( msg ); }, time ); } //调用函数delayedAlert，带两个参数 delayedAlert( "Welcome!", 2000 ); 　　第一个对setTimeout的函数调用，展示了一个的JavaScript新手遇到问题的通俗的例子。在JavaScript新手的程序里像这样的代码时常可以看到： setTimeout("otherFunction()", 1000); //或者甚至 setTimeout("otherFunction(" + num + "," + num2 + ")", 1000); 　　使用闭包的概念，完全可能的把这种混乱的代码清理掉。第一个例子很简单；有一个回调函数在调用setTimeout函数以后1000微秒以后被调用，而它仍引用了变量obj（定义在全局范围，指向id为"main"的元素）。定义的第二个函数，delayedAlert，展示了一种解决出现的 setTimeout混乱的方案，以及函数作用域内可以有闭包的能力。 　　你们应该可以发现，当在代码中使用这种简单的闭包时，你所写的东西的清晰性将会提高，免于陷入语法的迷雾之中。 　　我们来看一个闭包可能带来的有有趣的副作用。在某些函数化的编程语言里，有一个叫做currying 的概念。本质上讲，currying是就是为函数的一些参数预填入值，创建一个更简单的新函数的方法。代码2-14里有一个简单的currying的例子，创建了向另一个函数预填一个参数而得的新函数。 　　代码2-14. 使用闭包的函数currying //生成做加法的新函数的函数 function addGenerator( num ) { //返回一个简单函数用来计算两个数的加法， //其中第一个数字从生成器中借用 return function( toAdd ) { return num + toAdd }; } //addFive现在是接受一个参数的函数， //此函数将给参数加5，返回结果数字 var addFive = addGenerator( 5 ); //这里我们可以看到，当传给它参数4的时候 //函数addFive的结果为9 alert( addFive( 4 ) == 9 ); 　　闭包还能解决另一个常见的JavaScript编码方面的问题。JavaScript新手趋向于在全局作用域里放置许多变量。这一般被认为是不好的习惯，因为那些变量可能悄悄地影响其它的库，导致令人迷惑的问题的产生。使用一个自执行的、匿名的函数，你可以从根本上隐藏所有的通常的全局变量，使它们对其它代码不可见，如程序2-15所示。 　　 　　代码2-15. 使用匿名函数从全局作用域隐藏变量的例子 //创建一个用作包装的匿名函数 (function(){ //这个变量通常情况下应该是全局的 var msg = "Thanks for visiting!"; //为全局对象绑定新的函数 window.onunload = function(){ //使用了“隐藏”的变量 alert( msg ); }; //关闭匿名函数并执行之 })(); 　　最后，让我们来看使用闭包时出现的一个问题。闭包允许你引用存在于父级函数中的变量。然而，它并不是提供该变量创建时的值；它提供的是父级函数中该变量最后的值。你会看到这个问题最通常是在一个for循环中。有一个变量被用作迭代器(比如i)，在for内部新的函数被创建，并使用了闭包来引用该迭代器。问题是，当新的闭包函数被调用时，它们将会引用该iterator最后的值(比如，一个数组的最后位置)，而不是你所期望的那个。程序2-16的例子说明，使用匿名函数激发作用域，在其中创建一个合乎期望的闭包是可能的。 　　程序2-16. 使用匿名函数激发一个创建多个闭包函数所需的作用域的例子 //id为"main"的一个元素 var obj = document.getElementById("main"); //用来绑定的items数组 var items = [ "click", "keypress" ]; //遍历items中的每一项 for ( var i = 0; i < items.length; i++ ) { //用自执行的匿名函数来激发作用域 (function(){ //在些作用域内存储值 var item = items[i]; //为obj元素绑定函数 obj[ "on" + item ] = function() { //item引用一个父级的变量， //该变量在此for循环的上文中已被成功地scoped(?) alert( "Thanks for your " + item ); }; })(); } 　　闭包的概念并非轻易可以掌握的；我着实花了大量的时间和精力才彻底弄清闭包有多么强大。幸运的是，有一个精彩的资源解释了JavaScript 中的闭包是怎么工作的：Jim Jey的"JavaScript闭包"，网址是http://jibbering.com/faq/faq_notes/closures.html。 　　最后，我们将研究上下文的概念，这是许多JavaScript的面向对象特性赖以建立的基石。