`
mrzhanghuzi
  • 浏览: 25966 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

面向对象的 Javascript 语言特性:闭包(转)

阅读更多
转自(http://www.cnblogs.com/zitiger/archive/2007/06/08/776777.html)
闭包

  闭包意味着内层的函数可以引用存在于包绕它的函数的变量,即使外层的函数的执行已经终止。这一特殊的论题可能是非常强大又非常复杂的。我强烈推荐你们参考本节后面将提及的站点,因为它有一些关于闭包这一话题的精彩的信息。
  我们先来看程序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的面向对象特性赖以建立的基石。
分享到:
评论
1 楼 我不说话 2010-10-25  
把精通javascript上的完完整整的抄来了.

相关推荐

    面向对象JavaScript开发

    面向对象JavaScript开发是现代Web开发中不可或缺的一部分,它使得JavaScript能够构建复杂、可维护的应用程序。 面向对象编程是一种基于对象和类的编程范式,它强调数据和操作数据的方法的封装。在JavaScript中,...

    JavaScript面向对象编程指南

    如何应用适当的编程模式,发挥JavaScript语言特有的优势;如何应用设计模式解决常见问题等。, 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的...

    JavaScript面向对象编程指南.pdf

    JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库

    Javascript面向对象编程.

    面向对象编程(Object-Oriented Programming,OOP)是编程的一种重要范式,JavaScript也完全支持这一特性,尽管它并非一种传统的静态类型语言。这篇博客文章可能详细讨论了如何在JavaScript中实现面向对象编程。 在...

    JavaScript语言精粹完整版

    《JavaScript语言精粹》是一部深入剖析JavaScript语言特性的专业书籍,它不仅适合初学者快速入门,也适合有一定基础的开发者进阶提升。通过阅读本书,你将获得对JavaScript语言更深层次的理解,掌握其实现复杂功能的...

    javascript面向对象编程

    JavaScript作为一门浏览器语言的核心思想;...如何实现JavaScript中缺失的面向对象特性,如对象的私有成员与私有方法;如何应用适当的编程模式,发挥JavaScript语言特有的优势;如何应用设计模式解决常见问题等。

    JAVASCRIPT 面向对象编程精要

    JavaScript是一种基于原型的语言,这意味着它不像传统的面向对象语言(如Java或C++)那样拥有类的概念。在JavaScript中,对象是核心,一切都可以视为对象。JavaScript的对象是动态的,即可以在运行时添加或删除属性...

    javascript in action:javascript 实战源码

    6. **面向对象编程**:了解如何通过类(class)和实例(instance)进行面向对象编程,包括类的定义、方法的继承和封装。 7. **ES6新特性**:如箭头函数、模板字符串、let和const、解构赋值、Promise、async/await等...

    JavaScript面向对象的支持

    JavaScript是一种广泛应用于Web开发的脚本语言,它虽然支持面向对象编程,但其面向对象的实现方式与其他传统面向对象语言(如Java或C++)有所不同。JavaScript中的面向对象特性主要体现在以下几个方面: 1. **基于...

    2008年图书:面向对象的JavaScript

    随着Web开发的日益复杂,JavaScript的面向对象特性变得越来越重要,它允许开发者创建更可维护、可扩展的代码结构。 在书中,作者详细介绍了JavaScript的面向对象特性,包括但不限于以下关键知识点: 1. **原型链...

    JavaScript面向对象编程指南 有书签

    如何应用适当的编程模式,发挥JavaScript语言特有的优势;如何应用设计模式解决常见问题等。 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的...

    JavaScript面向对象编程指南(第2版).rar

    本指南的第二版深入探讨了JavaScript的面向对象特性,旨在帮助开发者更好地理解和应用这一编程范式。 JavaScript的面向对象主要基于三个核心概念:封装、继承和多态。封装是将数据和操作这些数据的方法结合在一起,...

Global site tag (gtag.js) - Google Analytics