( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,要理解立即执行函数,需要先理解一些函数的基本概念。

1,函数声明,函数表达式,匿名函数

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

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

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

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

1,javascript引擎在解析javascript代码时会函数声明提升(function declaretion hoisting)当前执行环境(作用域)上的函数声明。而函数表达式必须等到Javascript引擎执行到他所在行时,才会从上而下一行一行的解析函数表达式。

2,函数表达式后面可以加括号立即调用函数,函数声明不可以,只能以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函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

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

深入理解立即执行函数(function(){})();的更多相关文章

  1. JavaScript 函数声明,函数表达式,匿名函数的区别,深入理解立即执行函数(function(){…})()

    function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) f ...

  2. 理解javascript中的立即执行函数(function(){})()

    之前看了好多代码,都有用到这种函数的写法,但是都没认真的去想为什么会这样写,今天开始想学习下jquery的源码,发现jquery也是使用这种方式,用(function(window, undefine ...

  3. 深入理解javascript中的立即执行函数(function(){…})()

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

  4. 深入理解js中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...

  5. 【转】深入理解javascript中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...

  6. js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( ))

    ( function(){…} )() ( function (){…} () ) 是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达 ...

  7. javascript中的立即执行函数(function(){…})()

    javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...

  8. JavaScript匿名自执行函数~function(){}

    原博客:https://blog.csdn.net/yaojxing/article/details/72784774 1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: ...

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

    没有区别. function foo() {...} // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo(); // 这是语句,Statement:解释器遇到语 ...

随机推荐

  1. 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  2. C++点滴20130802

    1.sprintf与printf,fprintf为三兄弟.其中printf输出到屏幕,fprintf输出到文件,而sprintf输出到字符串中.通常情况下,屏幕是可以输出的,文件也可以写的(除非磁盘满 ...

  3. PhiloGL学习(3)——程序员的法宝—键盘、鼠标

    前言 上一篇文章中介绍了如何让对象动起来,本文介绍如何让场景响应我们的鼠标和键盘以控制场景的缩放及对象的转动和移动等. 一. 原理分析 有了上一篇文章的基础,我们已经知道了如何让场景和对象动起来.本文 ...

  4. web service实例

    一.准备工作(以下为本实例使用工具) 1.MyEclipse10.7.1 2.JDK 1.6.0_22 二.创建服务端 1.创建[Web Service Project],命名为[TheService ...

  5. DataTable数据修改,换列

    增加列             DataTable table= new DataTable();             table.Columns.Add("ID", type ...

  6. Asp.net Api中使用OAuth2.0实现“客户端验证”

    一.实现继承自OAuthAuthorizationServerProvider的类,实现以"客户端验证"方式传入的相关认证和access_token发放. public class ...

  7. 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

    上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from '@an ...

  8. 变量值a交换b,b交换a....

    package day01; public class Test1 { public static void main(String[] args) { //不利用其它变量时期A和B的值交换 Inte ...

  9. Be the Winner

    Be the Winner Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  10. 使用sklearn进行数据挖掘-房价预测(6)—模型调优

    通过上一节的探索,我们会得到几个相对比较满意的模型,本节我们就对模型进行调优 网格搜索 列举出参数组合,直到找到比较满意的参数组合,这是一种调优方法,当然如果手动选择并一一进行实验这是一个十分繁琐的工 ...