原文链接: 12 Simple (Yet Powerful) JavaScript Tips

其他链接: (译文)12个简单(但强大)的JavaScript技巧(一)

强大的立即调用函数表达式

(什么是立即调用函数表达式, 何时使用它)

IIFE (Immediately Invoked Function Expressions, 发音:“Iffy”)是立即调用函数表达式的缩写形式, 它的语法大概如下:

(function() {
//Do fun stuff
})()

这是一个立即调用的匿名函数, 它在JavaScript中有一些特别重要的作用.

它是如何工作的?
  • 包围匿名函数的一对括号会把它变成函数表达式或者变量表达式.

  • 这就相当于:

    //不带括号:
    ? = function() {}; //带括号:
    (? = function() {});
    //函数被一个不知名的变量引用了, 一对括号把它包围了, 把它变成了一个匿名的函数表达式

    同样的, 我们甚至可以创建一个命名的立即调用函数表达式:

    (showName = function(name) {
    console.log( name || "No Name");
    })(); //No Name showName("Rich"); //Rich
    showName(); //NoName
  • 记住, 当你不用var关键词创建变量的时候, JavaScript会自动判断该变量为全局变量. 在上面的例子中是没有必要使用var关键词的(因为你之后可能会调用它).

  • 我们可以马上或者在这之后使用这个函数

  • 但是我们不可以在之后调用匿名函数. 因为除非你创建匿名函数之后马上调用, 在这之后没有其他办法可以引用它. 这是匿名函数只可以马上调用它的原因.


  • 当把匿名函数包含在一对括号里面时(字面量), 整个字面量会被运算,并且返回匿名函数的返回值. 它的返回值实质上是整个匿名函数自身, 所以我们只需要在这之后加上一对括号来马上调用它.

  • 因此, 后面的一对括号等于告诉JavaScript编译器马上调用这个匿名函数, 所以它才会被称之为"立即调用函数表达式".

  • 因为JavaScript基于函数块的作用域规则, 在匿名函数内声明变量都是局部变量, 所以这些局部变量没办法直接从外部获取.

  • 就像其他函数一样, 你可以向匿名函数设定参数和传递变量. 你可以根据这个特性, 利用匿名函数的作用域扩展它外围函数的作用域(即闭包).

什么时候应该使用它?

  1. 避免污染全局作用域

    IIFE最广泛的用途是避免污染全局作用域. 已经有很多JavaScript库和JavaScript高手正在使用这种技巧, 尤其是在最流行jQuery插件的开发者中. 你也应该把这个技巧应用在你的程序的主要文件中(main.js).

    在这个例子中, 我使用了匿名函数把所有全局作用域的变量变成了局部变量, 所以现在全局作用域中还可以定义新的变量, 不用顾忌是否会和匿名函数内的变量在变量名上发生冲突(还包括其他库或者框架):

    //所有的代码包含在立即调用函数中
    (function() {
    var firstName = "Richard";
    funtion init() {
    doStuff(firstName);
    //在这里开始插入应用程序的代码...
    } function doStuff() {
    //...
    } function doMoreStuff() {
    //...
    } //启动应用程序;
    init();
    })();
  2. 用作条件选择器

    这种使用方式还没有被广泛所知, 但它是相当强大的. 你可以不调用一个命名函数来处理复杂的运算的. 注意在三目运算符(.. ? .. : .. )中的两个匿名函数, 我尽可能多地加入空白来使语句看起来更容易理解:

    var unnamedDocs = [],
    namedDocs = ['a_bridge_runover', 'great_dreamers']; function createDoc(documentTitle) {
    var documentName = documentTitle ? (function(theName) {
    var newNamedDoc = theName.toLocaleLowerCase().replace('', '_');
    nameDocs.push(newNamedDoc); return newNamedDoc;
    })(documentTitle) : (function() {
    var newUnnamedDoc = 'untitled_' + Number(namedDocs.length + 1);
    unnamedDocs.push(newUnnamedDoc);
    return newUnnamedDoc;
    })(); return documentName;
    } createDoc('Over The Rainbow'); //over_the rainbow
    createDoc(); //untitled_4

(译文)12个简单(但强大)的JavaScript技巧(二)的更多相关文章

  1. (译文)12个简单(但强大)的JavaScript技巧(一)

    原文连接: 12 Simple (Yet Powerful) JavaScript Tips 我将会介绍和解析12个简单但是强大的JavaScript技巧. 这些技巧所有的JavaScript程序员都 ...

  2. 让AI简单且强大:深度学习引擎OneFlow技术实践

    本文内容节选自由msup主办的第七届TOP100summit,北京一流科技有限公司首席科学家袁进辉(老师木)分享的<让AI简单且强大:深度学习引擎OneFlow背后的技术实践>实录. 北京 ...

  3. 12个非常有用的JavaScript技巧

    在这篇文章中,我将分享12个非常有用的JavaScript技巧.这些技巧可以帮助你减少并优化代码. 1) 使用!!将变量转换成布尔类型 有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将 ...

  4. TYAttributedLabel——简单,强大的iOS属性文本控件

    本文转载至 http://www.mobile-open.com/2015/86578.html TYAttributedLabel 简单,强大的属性文本的控件(无需了解CoreText),支持图文混 ...

  5. Spring 简单而强大的事务管理功能

    开始之前 关于本教程 本教程将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. 先决条件 本 ...

  6. 12款简化 Web 开发的 JavaScript 开发框架

    前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...

  7. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  8. 一套简单可依赖的Javascript库

    还是[百度]的产品——Tangram不是我偏心,百度不是我亲戚这东西看上去确实不错 Tangram是一套简单可依赖的Javascript库,主要分为Base和Component两部分.Base提供了开 ...

  9. 简单而强大的bitset

    简单而强大的bitset 介绍 有些程序需要处理二进制有序集,标准库提供了bitset 类型,事实上,bitset 是一个二进制容器,容器中每一个元素都是一位二进制码,或为 0,或为 1. 基础 bi ...

随机推荐

  1. V&View更新

    这几天一直在做V&View的更新工作,这次的更新是质的变化,表面界面变化不大,可是内部确有着翻天覆地的改变. 这几天我主要做了一下几件事: 1. 重新构思了vview的文章发布形式,之前使用k ...

  2. powerdesign的license key到期,解决办法

    到2013年9月24日为止我把这文件覆盖了都是行的!不行的请留言说明下! 下载地址:powerdesigner license key 15.1 找到安装目录,直接覆盖就行了!

  3. IComparer接口与

    IComparable比较接口,继承此接口可对lis<T>调用sort进行排序 或者调用sort时可以为sort方法提供继承了IComparer的比较器

  4. leetcode@ [199] Binary Tree Right Side View (DFS/BFS)

    https://leetcode.com/problems/binary-tree-right-side-view/ Given a binary tree, imagine yourself sta ...

  5. hdu 2715 Herd Sums

    Herd Sums Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  6. SQL2005查询所有表的大小

    IF NOT EXISTS (SELECT * FROM [tempdb].sys.objects WHERE object_id = OBJECT_ID(N'[tempdb].[dbo].[tabl ...

  7. NGUI学习笔记(四):动态加载UI和NGUI事件

    动态加载UI 我们进入一个场景后,如果将这个场景所有可能用到的UI都直接放在场景中做好,由于要在进入场景时就部署好所有的UI对象,那么当UI对象较多时会碰到的问题是:1.初始化场景会产生非常明显的卡顿 ...

  8. WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色

    本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html 在B/S开发中,对TreeView控件要改变当前选中节点的 ...

  9. nginx学习七 高级数据结构之动态数组ngx_array_t

    1 ngx_array_t结构 ngx_array_t是nginx内部使用的数组结构.nginx的数组结构在存储上与大家认知的C语言内置的数组有相似性.比方实际上存储数据的区域也是一大块连续的内存. ...

  10. sphinx中过滤的简单介绍

    1.过滤字符串为空的一些记录的话,可以在sql_query中直接加上where来限制,如: sql_query  = \  SELECT a.location_id as id,a.location_ ...