深入理解(function(){... })();

1.他叫做立即运行的匿名函数(也叫立即调用函数)

2.当一个匿名函数被括起来，然后再在后面加一个括号，这个匿名函数就能立即运行起来！有木有很神奇哦~

3.要使用一个函数，我们就得首先声明它的存在。而我们最常用的方式就是使用function语句来定义一个函数

4.Function 对象

　Function对象是JavaScript里面的固有对象，所有的函数实际上都是一个Function对象。

我们先看看，Function对象能不能直接运 用构造函数创建一个新的函数呢？答案是肯定的。

var abc = new Function("x","y","return x*y;");
alert(abc(2,3)); // "6"

5.匿名函数就是没有名字，那么就引申到我们应该如何去调用他们的问题(O_O)?

匿名函数的调用 ①

var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"

上面的操作其实就等于换个方式去定义函数，这种用法是我们比较频繁遇到的。

例如我们在设定一个DOM元素事件处理函数的时候，我们通常都不会为他们定名字，而是赋予它的对应事件引用一个匿名函数。

匿名函数的调用 ②

使用()将匿名函数括起来，然后后面再加一对小括号（包含参数列表）。

alert((new Function("x","y","return x*y;"))(2,3));// "6"

6.小括号的作用？

小括号能把我们的表达式组合分块，并且每一块，也就是每一对小括号，都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。

所以，当我们用一对小括号把匿名函数括起来的时候，实际上小括号对返回的，就是一个匿名函数的Function对象。

因此，小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表，就会实现普通函数的调用形式。

7.函数声明、函数表达式、匿名函数

函数声明：function fnName () {…};使用function关键字声明一个函数，再指定一个函数名，叫函数声明。

函数表达式 var fnName = function () {…};使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。

匿名函数：function () {}; 使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

函数声明和函数表达式不同之处在于

一、Javascript引擎在解析javascript代码时会‘函数声明提升'（Function declaration Hoisting）当前执行环境（作用域）上的函数声明，而函数表达式必须等到Javascirtp引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式

二、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName()形式调用 。

栗子①

fnName();
function fnName(){
...
}
//正常，因为‘提升'了函数声明，函数调用可在函数声明之前
fnName();
var fnName=function(){
...
}
//报错，变量fnName还未保存对函数的引用，函数调用必须在函数表达式之后

栗子②

var fnName=function(){
alert('Hello World');
}();
//函数表达式后面加括号，当javascript引擎解析到此处时能立即调用函数
function fnName(){
alert('Hello World');
}();
//不会报错，但是javascript引擎只解析函数声明，忽略后面的括号，函数声明不会被调用
function(){
console.log('Hello World');
}();
//语法错误，虽然匿名函数属于函数表达式，但是未进行赋值操作，
//所以javascript引擎将开头的function关键字当做函数声明，报错：要求需要一个函数名

要在函数体后面加括号就能立即调用，则这个函数必须是函数表达式，不能是函数声明。

栗子③

(function(a){
console.log(a); //firebug输出123,使用（）运算符
})(123);
(function(a){
console.log(a); //firebug输出1234，使用（）运算符
}(1234));
!function(a){
console.log(a); //firebug输出12345,使用！运算符
}(12345);
+function(a){
console.log(a); //firebug输出123456,使用+运算符
}(123456);
-function(a){
console.log(a); //firebug输出1234567,使用-运算符
}(1234567);
var fn=function(a){
console.log(a); //firebug输出12345678，使用=运算符
}(12345678)

可以看到输出结果，在function前面加！、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果，而（）、！、+、-、=等运算符，都将函数声明转换成函数表达式，消除了javascript引擎识别函数表达式和函数声明的歧义，告诉javascript引擎这是一个函数表达式，不是函数声明，可以在后面加括号，并立即执行函数的代码。

加括号是最安全的做法，因为！、+、-等运算符还会和函数的返回值进行运算，有时造成不必要的麻烦。

不过这样的写法有什么用呢？

javascript中没用私有作用域的概念，如果在多人开发的项目上，你在全局或局部作用域中声明了一些变量，可能会被其他人不小心用同名的变量给覆盖掉，根据javascript函数作用域链的特性，可以使用这种技术可以模仿一个私有作用域，用匿名函数作为一个“容器”，“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。

JQuery使用的就是这种方法，将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中，在全局作用域中调用JQuery代码时，可以达到保护JQuery内部变量的作用。

赞 (0)

相关推荐

  • seajs加载jquery时提示$ is not a function该怎么解决

    jquery1.7以上的都支持模块化加载,只是jquery默认的是支持amd,不支持cmd.所以要用seajs加载jquery时,我们需要稍微做下改动,需要把以下内容做下修改,具体修改方式如下: 把 if (typeof define === "function" && (define.amd)) { define( "jquery", [], function() { return jQuery; }); } 改成 if (typeof defin

  • javascript中$(function() {});写与不写有哪些区别

    javascript中$(function() {....}) 是 jQuery 中的经典用法,等同于 $(document).ready(function() {....}),即在页面加载完成后才执行某个函数,如果函数中要操作 DOM,在页面加载完成后再执行会更安全,所以在使用 jQuery 时这样的写法很常见. $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标

  • FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton

    FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton

    FloatingActionButton项目在github上的主页:https://github.com/futuresimple/android-floating-action-button FloatingActionButton使用简单,而且可以自定义颜色.大小.背景图片 项目构造: 下面是demo的代码(主要见sample): 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&

  • Android 广播大全 Intent Action 事件详解

    具体内容如下所示: Intent.ACTION_AIRPLANE_MODE_CHANGED; //关闭或打开飞行模式时的广播 Intent.ACTION_BATTERY_CHANGED; //充电状态,或者电池的电量发生变化 //电池的充电状态.电荷级别改变,不能通过组建声明接收这个广播,只有通过Context.registerReceiver()注册 Intent.ACTION_BATTERY_LOW; //表示电池电量低 Intent.ACTION_BATTERY_OKAY; //表示电池电

  • js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?

    没有区别. 你需要明白 IIFE 的原理,我简单说一下: 复制代码 代码如下: function foo() {...}     // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo();                   // 这是语句,Statement:解释器遇到语句是会运行它的. IIFE 并非必须,传统一点可以这么写: 复制代码 代码如下: function foo() {...} foo(); 那么为什么要 IIFE? 1.传统的方法啰嗦,定义

  • 使用.NET中的Action及Func泛型委托深入剖析

    使用.NET中的Action及Func泛型委托深入剖析

    委托,在C#编程中占有极其重要的地位,委托可以将函数封装到委托对象中,并且多个委托可以合并为一个委托,委托对象则可以像普通对象一样被存储.传递,之后在任何时刻进行调用,因此,C#中函数回调机制的实现基本上依赖于委托.C#的delegate关键字用于声明委托,它具有将声明委托类型映射到System.Delegate类的能力,System.Delegate类位于mscorlib.dll中,是.NET的基础核心类之一.使用delegate关键字声明一个委托,实质上创建了System.Delegate的

  • jQuery中$(function() {});问题详解

    $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,当然如果你把script标签放到页面最后面那么就没问题了,此时和ready效果一样. $(document).ready(function(){})可以简写成$(function(){}); 点击段落后,此段落隐藏: <html> <head

  • 用JS动态改变表单form里的action值属性的两种方法

    方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

  • 详解在Java的Struts2框架中配置Action的方法

    在Struts2中Action部分,也就是Controller层采用了低侵入的方式.为什么这么说?这是因为在Struts2中action类并不需要继承任何的基类,或实现任何的接口,更没有与Servlet的API直接耦合.它通常更像一个普通的POJO(通常应该包含一个无参数的execute方法),而且可以在内容定义一系列的方法(无参方法),并可以通过配置的方式,把每一个方法都当作一个独立的action来使用,从而实现代码复用. 例如: package example; public class U

  • PHP register_shutdown_function()函数的使用示例

    通过 register_shutdown_function 方法,可以让我们设置一个当执行关闭时可以被调用的另一个函数. 也就是说,当我们的脚本执行完成或者意外死掉导致 php 执行即将关闭时,我们的这个函数会被调用. [使用场景] ① 页面被(用户)强制停止 ② 程序代码意外终止或超时 ③ php4 中没有析构函数,可以使用该函数模拟析构函数 shutdown.php <?php header("content-type:text/html;charset=utf-8"); c

  • SQL Function 自定义函数详解

    SQL Function 自定义函数详解

    目录 产生背景(已经有了存储过程,为什么还要使用自定义函数) 发展历史 构成 使用方法 适用范围 注意事项 疑问 内容 产生背景(已经有了存储过程,为什么还要使用自定义函数) 与存储过程的区别(存在的意义): 1.     能够在select等SQL语句中直接使用自定义函数,存储过程不行. 2.     自定义函数可以调用其他函数,也可以调用自己(递归) 3.     可以在表列和 CHECK 约束中使用自定义函数来实现特殊列或约束 4.       自定义函数不能有任何副作用.函数副作用是指对

  • C#中Action和Func的区别

    本文实例分析了C#中Action和Func的区别,有助于读者牢固掌握并对其准确使用.具体分析如下: 先来看下面这段代码: //测试使用的公共值 int num = 10; //测试Func委托 Func<int, int> f; f = (int tempf) => { return tempf + 1; }; Response.Write(f(num).ToString()+"<br />"); //调用f委托,并打印相应的值! //测试Action委托

  • JavaScript获取function所有参数名的方法

    我写了一个 JavaScript函数来解析函数的参数名称, 代码如下: function getArgs(func) { // 先用正则匹配,取得符合参数模式的字符串. // 第一个分组是这个: ([^)]*) 非右括号的任意字符 var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1]; // 用逗号来分隔参数(arguments string). return args.split(",").map(functi

  • php实现表单多按钮提交action的处理方法

    表单内有两个提交按钮,要实现当点击不同的提交按钮时,分别进行两个不同的处理过程,在这里有实现表单多按钮提交action的处理方法分享给大家. 用PHP判断,一个表单两个按钮,按钮的name属性设为相同,但值设为不同,表单提交后,只需要判断提交上来的值就可以转到不同的处理过程去,这个方法比较合理,适合多个按钮在一个表单里. PHP方法,代码如下: <?php echo "$sub<br>\n"; if ("s1"==$sub) { ... } els

  • 详解Func<T>与Action<T>区别

    Func<T>.Action<T> 的区别于说明 一.Func Func是一个.Net内置的委托. Func<Result>,Func<T1,Result>是一个.Net内置的泛型委托. Func<TResult> Func<T,TResult> Func<T1,T2,TResult> Func<T1,T2,T3,TResult> Func<T1,T2,T3,T4,TResult> 它有5种形式,只

  • JavaScript function函数种类详解

    本篇主要介绍普通函数.匿名函数.闭包函数 目录 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. 闭包函数:介绍闭包函数的特性. 1. 普通函数 1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 =

  • 详解Python中的装饰器、闭包和functools的教程

    装饰器(Decorators) 装饰器是这样一种设计模式:如果一个类希望添加其他类的一些功能,而不希望通过继承或是直接修改源代码实现,那么可以使用装饰器模式.简单来说Python中的装饰器就是指某些函数或其他可调用对象,以函数或类作为可选输入参数,然后返回函数或类的形式.通过这个在Python2.6版本中被新加入的特性可以用来实现装饰器设计模式. 顺便提一句,在继续阅读之前,如果你对Python中的闭包(Closure)概念不清楚,请查看本文结尾后的附录,如果没有闭包的相关概念,很难恰当的理解P

  • 动态设置form表单的action属性的值的简单方法

    用jQuery时,可如下设置: form表单: <form name="myform" id="myform" action="ssss" method="post" onsubmit="getUrl();"> javascript方法: <script type="text/javascript"> function getUrl(){ $('form').at

  • Javascript自执行匿名函数(function() { })()的原理浅析

    函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hello'); })(); 这段代码的执行效果就是在页面再载入时弹出:"hello" 是什么促使它自动执行的?,来看下面的代码 // 在传统写法上去掉小括号,并在前面加上运算符 ~,!,+,- ~function(){

  • Codeigniter框架的更新事务（transaction）BUG及解决方法

    由于ci事务判断出错回滚的条件是语句是否执行成功,而更新操作时,就算影响的条数为0,sql语句执行的结果过仍然为1,因为它执行成功了,只是影响的条数为0. 下面介绍解决这个问题的方法: 对于一次要执行许多的语句的事务 只需在更新操作下根据影响条数是否为0来决定是否会滚即可,下面假设第二条语句为更新操作. 复制代码 代码如下: //采用 Codeigniter 事务的手动模式     $this->db->trans_strict(FALSE);     $this->db->tra

随机推荐