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

JavaScript学习笔记(十四) 立即执行函数

 
阅读更多
源:http://blog.csdn.net/qq838419230/article/details/8030078
评:
立即执行函数(Immediate Functions)
立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,比如:
[javascript] view plaincopy

    (function () { 
        alert('watch out!'); 
    }()); 

这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行;
立即执行函数(immediate function)术语不是在ECMAScript标准中定义的,但它很短有助于描述和讨论模式;

这种模式有一些几部分组成:

    使用函数表达式定义一个函数(函数声明不能起作用)
    在结尾加上一对括号,让函数立即被执行
    将整个函数包裹在一对括号中(只有在你不将函数赋值给一个变量的时候才需要)

下面这种可选的语法形式也是很常见的(注意结尾的一对括号),但JSLint趋向于第一种:
[javascript] view plaincopy

    (function () { 
        alert('watch out!'); 
    })(); 


这种模式是非常有用的,因为它为你初始化代码提供了一个作用域的沙箱;
考虑一下下面这种常见的场景:
你的代码在页面代码加载完成之后,不得不执行一些设置工作,比如附加时间处理器,创建对象等等,
所有的这些工作只需要执行一次,所以没有理由创建一个可复用的命名的函数,
但这些代码也需要一些临时的变量,但初始化过程结束后,就再也不会被用到了,
所以将这些变量作为全局变量不是个好主意,所以我们需要立即执行函数——去将我们所有的代码包裹在它的局部作用域中,不会让任何变量泄露成全局变量;
[javascript] view plaincopy

    (function() { 
        var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
        today = new Date(), 
        msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate(); 
        alert(msg); 
    } ()); // "Today is Fri, 13" 

如果代码没有被包裹在立即执行函数中,那么局部变量days,today和msg都将成为全局变量,初始化代码的遗留产物。

立即执行函数的参数(Parameters of an Immediate Function)
你也可以给立即执行函数传递参数,就像下面的例子一样:
[javascript] view plaincopy

    // prints: 
    // I met Joe Black on Fri Aug 13 2010 23:26:59 GMT-0800 (PST) 
    (function(who, when) { 
        console.log("I met " + who + " on " + when); 
    } ("Joe Black", new Date())); 

通常,全局变量被作为一个参数传递给立即执行参数,这样它在函数内部不使用window也可以被访问到:这种方式可以让代码在环境(除了浏览器)中更加通用:
[javascript] view plaincopy

    (function (global) { 
    // access the global object via `global` 
    }(this)); 

记住:通常你不应该给立即执行函数传递太多的函数,因为它很快会成为一个负担——为了理解代码是如何工作的,你不得不经常上下滚动源代码。

立即执行函数的返回值(Returned Values from Immediate Functions)
就像其它任何函数一样,一个立即执行函数也能返回值并且可以复制给其它变量:
[javascript] view plaincopy

    var result = (function () { 
        return 2 + 2; 
    }()); 

另外一种实现相同的功能的方法是省略包裹函数的括号,因为当你将立即执行函数的返回值赋值给一个变量时它们不是必需的;
[javascript] view plaincopy

    var result = function () { 
        return 2 + 2; 
    }(); 

这种语法是非常简单的,但它可能看起来有点令人误导;
如果没有注意到函数结束的括号,一些人可能就会认为result指向一个函数;
实际上result指向立即执行函数的返回值,在这种情况下是数字 4 。

还有另一种语法可以实现相同的功能:
[javascript] view plaincopy

    var result = (function () { 
        return 2 + 2; 
    })(); 


在前面的例子中返回一个基本类型的整数作为立即执行函数的返回值;
但是除了基本类型值,立即执行函数也能返回任何类型的值,包括其它的函数;
那么,你可以利用立即执行函数的作用域为返回的内部函数私下里存储一些数据。

在接下来的例子中,立即执行函数的返回值是一个函数——被赋值给了变量getResult,这个函数简单的返回了res的值,这个值事先被计算并被储存在立即执行函数的闭包中:
[javascript] view plaincopy

    var getResult = (function() { 
        var res = 2 + 2; 
        return function() { 
            return res; 
        }; 
    } ()); 

立即执行函数也可以用来定义对象的属性;
假如,你需要定义一个很可能在对象生命周期中都不会改变的属性,但在你定义之前,你需要做一下工作去计算出正确的值;
你可以使用立即执行函数去封装这些工作,并且立即执行函数的返回值将会成为属性的值,下面的代码:
[javascript] view plaincopy

    var o = { 
        message: (function() { 
            var who = "me", 
            what = "call"; 
            return what + " " + who; 
        } ()), 
        getMsg: function() { 
            return this.message; 
        } 
    }; 
    // usage 
    o.getMsg(); // "call me" 
    o.message; // "call me" 

在这个例子中,o.message是一个字符串类型的属性,不是一个函数,但它需要一个函数在脚本被载入时被执行并帮忙定义属性。

好处和用法(Benefits and Usage)
立即执行函数模式被广泛使用,它可以帮你封装大量的工作而不会在背后遗留任何全局变量。
你定义的所有变量都会成员立即执行函数的局部变量,所以你不用担心这些临时变量会污染全局空间。

这种模式经常被使用在书签工具(bookmarklets)中,因为书签工具在任何页面上运行并且保持全局命名空间干净是非常必要的;

这种模式也可以让你将独立的功能封装在自包含模块中(self-contained modules)。
假如你的页面是稳定的并且在没有JavaScript情况下能正常工作,然后本着逐步加强的想法,你加入了一些代码加强页面某个方面;
你可以将这些代码封装进一个立即执行函数中,并且确保页面没有它的情况下也能正常工作。
然后你可以添加更多的加强模块,移除它们,单独测试它们,允许用户去禁用它们等等。

你可以使用下面的模板去定义一个函数模块,让我们叫它module1:
[javascript] view plaincopy

    // module1 defined in module1.js 
    (function () { 
    // all the module 1 code ... 
    }()); 
分享到:
评论

相关推荐

    JavaScript学习笔记

    它们也可以作为值传递,并且JavaScript支持匿名函数和立即执行函数表达式。 4. **对象与原型** JavaScript的对象是键值对的集合,可以通过字面量语法或构造函数创建。原型是JavaScript实现继承的一种方式,每个...

    Javascript学习笔记___自学实用

    JavaScript学习笔记——深入理解基础与函数 在JavaScript中,学习基础知识是至关重要的,因为它是所有进一步编程技巧的基础。首先,我们需要了解JavaScript中的数据类型。在JavaScript中,有五种简单的数据类型:...

    javascript and jquery学习笔记与资料

    最后,`javascript学习笔记.zip`和`Javascript中Eval函数的详细解释.zip`专注于JavaScript学习和个人的理解,特别是`Eval函数`的深入解析。Eval函数是一个强大的但也有潜在危险的函数,它可以将字符串作为JavaScript...

    JavaScript-学习笔记.docx

    JavaScript是一种广泛应用...以上就是JavaScript学习笔记中的主要知识点,理解和掌握这些内容对于深入学习JavaScript至关重要。在实际编程中,还需要结合具体的场景灵活运用,并不断实践和探索更高级的特性和最佳实践。

    Javascript学习笔记

    ### JavaScript学习笔记知识点详解 #### 一、JavaScript基础篇:数据类型 JavaScript是一种弱类型语言,它具有自动类型转换的特点,使得开发过程中更加灵活但也容易出现类型错误。本节主要介绍JavaScript中的基本...

    我的javascript学习笔记记录

    ### JavaScript 学习笔记知识点详解 #### 在HTML中使用JavaScript - **`<script>`元素**: HTML文档中插入JavaScript的主要方式。它可以放置在文档的`<head>`部分或`<body>`部分。 - **内联脚本**: 直接在`...

    javascript学习笔记

    ### JavaScript学习笔记知识点详解 #### 一、JavaScript基础语法与文档对象模型(DOM) 1. **输出语句**: `document.write("")` 是一种常见的在HTML文档中输出文本的方法。但通常建议使用更现代的方法,如修改DOM...

    JavaScript 笔记

    总的来说,JavaScript的学习涵盖了许多方面,包括语法、数据类型、控制结构、函数、对象、数组、正则表达式,以及DOM操作等等。本笔记重点关注了JavaScript脚本的放置位置和Date对象的使用,这两个方面是JavaScript...

    JavaScript入门学习笔记.pdf

    JavaScript是一种广泛应用于网页和网络应用的轻量级、解释型的编程语言,主要用来增加网页的交互性和...学习JavaScript不仅涉及语法和基本概念,还需要熟悉DOM操作、事件处理、AJAX请求、函数、对象、闭包等高级特性。

    JavaScript从入门到精通学习笔记

    ### JavaScript从入门到精通学习笔记 #### 一、JavaScript简介 **1.1 JavaScript是什么** JavaScript 是一种轻量级的编程语言,主要被用于客户端(浏览器端)的脚本语言,能够实现动态网页效果,增强用户体验。...

    Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式

    因此,在函数表达式被赋值给变量之前,变量的值会是`undefined`,而如果尝试在赋值之前执行函数表达式,将会引发类型错误。 值得一提的是,函数表达式能够提供比函数声明更多的灵活性,特别是在需要动态创建函数或...

    Ajax学习笔记个人总结

    ### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心,它负责在客户端与服务器之间发送异步请求,无需刷新整个页面即可实现局部数据更新。要使用 ...

    javascript设计模式之模块模式学习笔记.docx

    模块模式可以通过立即执行函数表达式(IIFE)来实现,它可以确保内部的变量和函数不会被外部访问到,从而实现了私有化的效果。下面是一个具体的例子: ```javascript var application = (function () { // 定义...

    Javascript笔记和源码

    以上是对标题为“JavaScript笔记和源码”以及描述中提到的知识点的详细解释。这些知识点覆盖了JavaScript的基础语法、数据类型、数组对象、脚本组织、控制结构、输出错误处理以及与HTML的交互等方面,是学习...

    Javascript学习笔记之 函数篇(三) : 闭包和引用

    为了避免这种错误,可以使用立即执行函数表达式(IIFE)为每次循环创建一个新的作用域,保持每次循环的`i`值不变: ```javascript for (var i = 0; i ; i++) { (function(e) { setTimeout(function() { console....

    JavaScript 学习笔记之基础中的基础

    这种方式的JavaScript代码在页面加载时会立即执行。 2. 外部引用JavaScript文件:可以将JavaScript代码存储在外部文件中,并通过标签的src属性引入到HTML页面中。例如: ```html <script type="text/javascript...

    JavaScript 精粹读书笔记(1,2)

    相反,应该利用那些有实际用途和强大表达能力的特性,比如立即执行函数表达式(IIFE)、闭包、回调函数等,这些都是让JavaScript成为一门强大编程语言的关键元素。 在实际开发中,开发者应该致力于编写简洁、可读性...

    JavaScript学习笔记整理_setTimeout的应用

    `setTimeout`的一个重要特点是,它不是立即执行函数,而是将其添加到事件队列中,待当前执行上下文完成后再进行。因此,JavaScript的单线程性质意味着,即使设置了1毫秒的延迟,也不能保证函数会在精确的时间点执行...

Global site tag (gtag.js) - Google Analytics