基于javascript 闭包基础分享 |
|
本文标签：javascript,闭包 如果对作用域，函数为独立的对象这样的基本概念理解较好的话，理解闭包的概念并在实际的编程实践中应用则颇有水到渠成之感 。 复制代码 代码如下: var outter = []; function clouseTest() { var array = ["one", "two", "three", "four"]; for (var i = 0; i < array.length; i++) { var x = {}; x.no = i; x.text = array[i]; x.invoke = function () { print(i); } outter.push(x); } } //调用这个函数 clouseTest(); print(outter[0].invoke()); print(outter[1].invoke()); print(outter[2].invoke()); print(outter[3].invoke()); 运行的结果如何呢？很多初学者可能会得出这样的答案： 0 1 2 3 然而，运行这个程序，得到的结果为： 4 4 4 4 其实，在每次迭代的时候，这样的语句x.invoke = function(){print(i);}并没有被执行，只是构建了一个函数体为”print(i);”的函数对象，如此而已 。而当i=4时，迭代停止，外部函数返回，当再去调用outter[0].invoke()时，i的值依旧为4，因此outter数组中的每一个元素的invoke都返回i的值：4 。如何解决这一问题呢？我们可以声明一个匿名函数，并立即执行它： 复制代码 代码如下: var outter = []; function clouseTest2() { var array = ["one", "two", "three", "four"]; for (var i = 0; i < array.length; i++) { var x = {}; x.no = i; x.text = array[i]; x.invoke = function (no) { return function () { print(no); } }(i); outter.push(x); } } clouseTest2(); </script> 这个例子中，我们为x.invoke赋值的时候，先运行一个可以返回一个函数的函数，然后立即执行之，这样，x.invoke的每一次迭代器时相当与执行这样的语句： 复制代码 代码如下: //x == 0 x.invoke = function(){print(0);} //x == 1 x.invoke = function(){print(1);} //x == 2 x.invoke = function(){print(2);} //x == 3 x.invoke = function(){print(3);} 这样就可以得到正确结果了 。闭包允许你引用存在于外部函数中的变量 。然而，它并不是使用该变量创建时的值，相反，它使用外部函数中该变量最后的值 。 闭包的用途： 现在，闭包的概念已经清晰了，我们来看看闭包的用途 。事实上，通过使用闭包，我们可以做很多事情 。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率 。 缓存： 再来看一个例子，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可 。 闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留 。 复制代码 代码如下: var CachedSearchBox = (function () { var cache = {}, count = []; return { attachSearchBox: function (dsid) { if (dsid in cache) {//如果结果在缓存中 return cache[dsid];//直接返回缓存中的对象 } var fsb = document.getElementById(dsid);//新建 cache[dsid] = fsb;//更新缓存 if (count.length > 100) {//保正缓存的大小<=100 delete cache[count.shift()]; } return fsb; }, clearSearchBox: function (dsid) { if (dsid in cache) { cache[dsid].clearSelection(); } } }; })(); var obj1 = CachedSearchBox.attachSearchBox("input1"); //alert(obj1); var obj2 = CachedSearchBox.attachSearchBox("input1"); 实现封装： 复制代码 代码如下: var person = function(){ //变量作用域为函数内部，外部无法访问 var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }(); print(person.name);//直接访问，结果为undefined print(person.getName()); person.setName("jack"); print(person.getName()); 得到结果如下： undefined default jack 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制，这样不同的对象(类的实例)拥有独立的成员及状态，互不干涉 。虽然JavaScript中没有类这样的机制，但是通过使用闭包，我们可以模拟出这样的机制 。还是以上边的例子来讲： 复制代码 代码如下: function Person(){ var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }; var john = Person(); print(john.getName()); john.setName("john"); print(john.getName()); var jack = Person(); print(jack.getName()); jack.setName("jack"); print(jack.getName()); 运行结果如下： default john default jack javascript闭包应该注意的问题： 复制代码 代码如下: $(function(){ var con = $("div#panel"); this.id = "content"; con.click(function(){ alert(this.id);//panel }); }); 此处的alert(this.id)到底引用着什么值呢？很多开发者可能会根据闭包的概念，做出错误的判断： content 理由是，this.id显示的被赋值为content,而在click回调中，形成的闭包会引用到this.id，因此返回值为content 。然而事实上，这个alert会弹出”panel”，究其原因，就是此处的this,虽然闭包可以引用局部变量，但是涉及到this的时候，情况就有些微妙了，因为调用对象的存在，使得当闭包被调用时(当这个panel的click事件发生时)，此处的this引用的是con这个jQuery对象 。而匿名函数中的this.id = “content”是对匿名函数本身做的操作 。两个this引用的并非同一个对象 。 如果想要在事件处理函数中访问这个值，我们必须做一些改变： 复制代码 代码如下: $(function(){ var con = $("div#panel"); this.id = "content"; var self = this; con.click(function(){ alert(self.id);//content }); }); 这样，我们在事件处理函数中保存的是外部的一个局部变量self的引用，而并非this 。这种技巧在实际应用中多有应用，我们在后边的章节里进行详细讨论 。关于闭包的更多内容，我们将在第九章详细讨论，包括讨论其他命令式语言中的“闭包”，闭包在实际项目中的应用等等 。 附：由于本身水平有限，文中难免有纰漏错误等，或者语言本身有不妥当之处，欢迎及时指正，提出建议 。本文只为抛砖引玉，谢谢大家！ |
