javascript中的匿名函数整理笔记

以下为总结
在开源的JavaScript框架中能看到很多这样语法结构
(function(){
}
)()
比如我最近看的jQuery,及chediter。刚开始的时候我看到这样的结果有点奇怪,它是怎么执行的,并且这是什么样的语法结构,最近偶尔看闭包的时候,才发现原来这是JavaScript种匿名函数(看到这个有点汗,java的匿名类见过,就从来没想到JavaScript中会有匿名函数,也是学的不够牢固)。
现在我们了解到以上是JavaScript匿名函数的语法结构,怎么声明函数,匿名函数JavaScript是怎么执行的,匿名函数的代码模式。这些问题

就是我们接下来要探讨的问题。
第一:怎么声明函数。
方法一  function functionName( arguments ){ body }
在JavaScript函数典型函数,也叫有名函数(因为它存在functionName)。
function fun(){ alert( "test" ) }//  1
fun();//2
第1行这是JavaScript声明有名函数最常见的方法,也是我们个人开发中最常用的声明方式。
该语法结构为声明一个名叫fun的函数(注意JavaScript只会编译该函数,并生成fun函数的对象,不会执行该函数)。
而第二句为调用该函数即执行该函数。
方法二 var fun = function ( arguments  ){ body  } //又称函数字面量
var fun = function( ){ alert( "test" ) }
该函数复制给变量fun,其实后面的函数为一个匿名函数
方法三 var fun=new Function([arguments], Body);
将函数复制给变量fun
注意该种方式会存在性能问题,在执行 new Function方法时它不是静态编译和执行,而是动态编译和执行,即当执行new Function时才编译函数主体,并生成函数对象,每调用一次就执行编译及执行的过程【类似于函数eval()】,它比其他方是多了编译过程【会使用浏览器的编译器

】,如果再循环体中执行效率会比较低;上面三种定义函数方式中,后两种方式是采用匿名函数的方式什么的变量。
第二:匿名函数是怎样执行的。
对于语法结构

  1. (function(){
  2. alert( "test" );
  3. }
  4. )()

其实是由两部分组成
(function(){
    alert( "test" );
}
)表示的为匿名函数的定义。
而对于接在后面的"()"代表的意思为执行定义的匿名函数。
上述的语法结构也等价于以下的语法结构

  1. var test=function(){
  2. alert( "test" );
  3. //函数内容
  4. };//声明匿名类并将匿名函数赋予变量test。
  5. test();//执行test

可以看出匿名类可以直接在类后面接()代表执行,这也是我们在jQuery等开源的框架时,导入相应的包以后就可以直接使用对象的原因。它已经在匿名函数中完成相应的初始化及封装。
知道匿名类是怎么执行的,那我们常用的匿名函数有哪些呢。
第三:匿名函数调的代码模式
hedger wang介绍了几种匿名函数的代码模式:
错误模式:其无法工作,浏览器会报语法错。

  1. function(){
  2. alert(1);
  3. }();

以上错误原因是()能更改表达式的优先级,使用()后,将先执行()里面的代码,而对于表达式()对于JavaScript编译不过去的。
函数字面量:首先声明一个函数对象,然后执行它。 也称为立即执行函数。

  1. (function(){
  2. alert(1);
  3. } ) ( );

编译一定能通过,第一()是函数定义,而第二个()代表执行第一括号里面的内容
优先表达式:由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数。

  1. ( function(){
  2. alert(1);
  3. } ( ) );

Void操作符:用void操作符去执行一个没有用圆括号包围的一个单独操作数。

  1. void function(){
  2. alert(1);
  3. }()

这三种方式是等同的,hedger wang因为个人原因比较喜欢第3种,而在实际应用中我看到的和使用的都是第1种以及上面提到的 new Funtion( )的定义方式。

灵活的配合var关键字,匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染。也能增加代码的可读写行,减少代码量,提高程序的性能。

时间: 2024-08-08 05:59:29

javascript中的匿名函数整理笔记的相关文章

JavaScript中的匿名函数及函数的闭包以及作用域

1. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

JavaScript中的匿名函数及函数的闭包

1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 function double(x){ return 2 * x; } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. var double = new Function('x', 'return 2 * x;'); 第三种

JavaScript中的匿名函数及函数的闭包(转)

https://www.cnblogs.com/wl0000-03/p/6050108.html 1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 function double(x){ return 2 * x; } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. var

javascript中通过匿名函数进行事件绑定

事件绑定,匿名函数中获取当前元素对象直接this.属性

JavaScript中的匿名函数、立即执行函数和闭包

匿名函数是没有函数名的,不能单独使用: 立即执行函数是基于匿名函数实现的,也没有函数名,会在定义后立即执行: 闭包是有权访问另一个函数作用域中的变量的函数.匿名函数.立即执行函数只要满足 有权访问另一个函数作用域中的变量 这一个条件,就成了闭包. 匿名函数 匿名函数:没有函数名的函数 匿名函数不能单独定义与使用 function foo() { console.log('普通函数'); } // 去掉函数名 foo function () { // SyntaxError: Function s

Javascript中的回调函数和匿名函数的回调

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 匿名函数自调的意义: 1.营造了一个封闭的空间 2.防止变量冲突 3.有选择性的对外开发(第三方框架都是对js这样封装的) */ //===

JavaScript中的回调函数

在学习JavaScript的过程中遇到了很多,使用到回调函数的例子,出现了许多疑问,就由一个栗子开始吧: 在JavaScript中接触的第一个回调函数是在setInterval()和setTimeout()中出现的: 1 var num = 10; 2 3 var interValId = setInterval(function (){ 4 console.log(num); 5 num--; 6 if(num==0){ 7 clearInterval(interValId); 8 } 9 }

理解与使用Javascript中的回调函数 -2

在javascript中回调函数非常重要,它们几乎无处不在.像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,或者有一些简短的关于callback的使用示例. 函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用 Function()构造函数创建的Function对象.Function对象包含一个字符串,字符串

Javascript 中的回调函数和递归函数简单实际分析学习

Javascript 中的回调函数和递归函数简单实际分析学习 1 回调函数 所谓回调函数简单理解就是将一个函数做为参数传递给其他的函数供其使用.(只是在js中,因为其它的语言中有指针这个概念). 举一个简单的例子,当我们在统计账单的时候就要整理材料这些,然后就需要计算器,计算器我们想象成为一个可以实现计算的函数.统计账单是另外的另一个函数,当统计账单的时候就会需要计算器这个函数的支持,其实这就是一个简单的回调.可以按这个理解. 下来我借用网上的一个例子: //先定义一个函数fun1 functi