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

合集下载

javaScriptFunction(函数)闭包匿名函数this对象

javaScriptFunction(函数)闭包匿名函数this对象

javaScriptFunction(函数)闭包匿名函数this对象1. Function函数接受的参数类型、个数没有限定。

参数在内部是⽤数组arguments来存储的。

因此函数没有重载。

可以提供arguments【i】来表⽰传⼊的参数4.1创建使⽤函数声明和函数表达式创建,也可以使⽤Function()构造函数Function sum(num1,num2){函数声明}Var sum = function(num1,num2){函数表达式}解析器会率先读取函数声明,并使其在执⾏任何代码之前可⽤;因为在代码执⾏之前,解析器就已经通过⼀个名为函数声明提升的过程,读取并将函数声明添加到执⾏环境,js引擎在第⼀遍会声明函数并将它们放到源代码树的顶部。

函数表达式须等到解析器执⾏到它所在代码⾏,才会真正被解析。

4.2函数内部属性Arguments指代参数Callee:arguments.callee指代拥有这个arguments对象的函数。

在递归调⽤时,⾮常有⽤。

Caller:保存着调⽤当前函数的函数的引⽤Function outer(){Inner();}Function inner(){Alert(inner.caller);//警告框中显⽰outer()函数的源代码,等价于arguments.callee.caller}This:this引⽤的是函数据以执⾏的环境对象。

4.3 call()和apply()扩⼤函数赖以运⾏的作⽤域每个函数都包含这两个⾮继承⽽来的⽅法。

这两个⽅法⽤途都是在特定的作⽤域⾥调⽤函数,实际上是设置函数体内的this值。

Apply()接受2个参数,⼀个是其中函数运⾏的作⽤域,另⼀个是参数数组Call()接受多个参数,⼀个是其中函数运⾏的作⽤域,其他是传递给函数的参数必须逐个列举出来Window.color = “red”;Var o = {Color:”blue”};Function sayColor(){Alert(this.color);}sayColor(); //redsayColor.call(window); //redsayColor.call(this); //redsayColor(o); //blue4.4java与js创建函数Java是:修饰符返回类型函数名(参数类型参数名){函数体}Js是:函数声明和函数表达式函数声明:function 函数名(参数名){函数体}函数表达式:var 函数名 = function(参数名){函数体}4.5匿名函数在function后⾯没有跟函数名的函数称为匿名函数。

详解JavaScript匿名函数和闭包

详解JavaScript匿名函数和闭包

详解JavaScript匿名函数和闭包概述在JavaScript前端开发中,函数与对其状态即词法环境(lexical environment)的引⽤共同构成闭包(closure)。

也就是说,闭包可以让你从内部函数访问外部函数作⽤域。

在JavaScript,函数在每次创建时⽣成闭包。

匿名函数和闭包可以放在⼀起学习,可以加深理解。

本⽂主要通过⼀些简单的⼩例⼦,简述匿名函数和闭包的常见⽤法,仅供学习分享使⽤,如有不⾜之处,还请指正。

普通函数普通函数由fucntion关键字,函数名,() 和⼀对{} 组成,如下所⽰:function box(){return 'Hex';}alert(box());匿名函数顾名思义,匿名函数就是没有实际名字的函数。

单独的匿名函数⽆法运⾏,如下所⽰:function (){return 'Hex';}//以上,会报错:缺少标识符如何解决匿名函数不能执⾏的问题呢?有如下⼏种⽅法:1. 把匿名函数赋值给变量,如下所⽰://把匿名函数赋值给变量var box=function(){return 'Hex';}alert(box());2. 通过⾃我执⾏来调⽤函数,格式如下:(匿名函数)()(function(){alert('Hex');})();3. 把匿名函数⾃我执⾏的返回值赋值给变量,如下所⽰:var box=(function(){return 'Hex';})();alert(box);//注意:此处不带括弧4. 或者省去变量,如下所⽰:alert((function() {return 'Hex';})());⾃我执⾏匿名函数如何传递参数呢?如下所⽰:(function(age) {alert('Hex--' + age);})(30);闭包(closure)闭包是由函数以及创建该函数的词法环境组合⽽成。

JavaScript匿名函数(anonymousfunction)与闭包(closure)

JavaScript匿名函数(anonymousfunction)与闭包(closure)

JavaScript匿名函数(anonymousfunction)与闭包(closure)引⼊匿名函数闭包变量作⽤域函数外部访问函数内部的局部变量⽤闭包实现私有成员引⼊闭包是⽤匿名函数来实现。

闭包就是⼀个受到保护的变量空间,由内嵌函数⽣成。

“保护变量”的思想在⼏乎所有的编程语⾔中都能看到。

先看下 JavaScript 作⽤域:JavaScript 具有函数级的作⽤域。

这意味着,不能在函数外部访问定义在函数内部的变量。

JavaScript 的作⽤域⼜是词法性质的(lexically scoped)。

这意味着,函数运⾏在定义它的作⽤域中,⽽不是在调⽤它的作⽤域中。

这是 JavaScript 的⼀⼤特⾊,将在后⾯说明。

把这两个因素结合在⼀起,就能通过把变量包裹在匿名函数中⽽对其加以保护。

你可以这样创建类的私有变量:var baz;(function() {var foo = 10;var bar = 2;baz = function() {return foo * bar;};})();baz();尽管在匿名函数外执⾏,但 baz 仍然可以访问 foo 和 bar。

说明:1,第 1 ⾏,baz 是全局变量;2,第 3 ~第 9 ⾏,定义⼀个匿名函数;3,第 4 和 5 ⾏,foo 和 bar 是匿名函数内的局部变量;第 6 ~ 8 ⾏,在匿名函数内定义⼀个匿名函数,并将其赋值给全局变量 baz;4,第 10 ⾏,调⽤ baz。

若改成 "alert(baz());",将显⽰ 20;5,按理说,在匿名函数外不能访问 foo 和 bar,但是现在可以。

在说明闭包前,先了解⼀下匿名函数。

匿名函数匿名函数是指那些⽆需定义函数名的函数。

匿名函数与 Lambda 表达式(拉姆达表达式)是⼀回事。

唯⼀的不同——语法形式不同。

Lambda 表达式更进⼀步。

本质上,它们的作⽤都是:产⽣⽅法——内联⽅法,也就是说,省去函数定义,直接写函数体。

详谈JavaScript 匿名函数及闭包

详谈JavaScript 匿名函数及闭包

详谈JavaScript 匿名函数及闭包1、匿名函数函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。

匿名函数:就是没有函数名的函数。

1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式第一种:这也是最常规的一种代码如下:function double(x){return 2 * x;}第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用。

代码如下:var double = new Function('x', 'return 2 * x;');第三种:var double = function(x) { return 2* x; }注意“=”右边的函数就是一个匿名函数,创造完毕函数后,又将该函数赋给了变量square。

1.2 匿名函数的创建第一种方式:就是上面所讲的定义square函数,这也是最常用的方式之一。

第二种方式:代码如下:(function(x, y){alert(x + y);})(2, 3);这里创建了一个匿名函数(在第一个括号内),第二个括号用于调用该匿名函数,并传入参数。

2、闭包闭包的英文单词是closure,这是JavaScript中非常重要的一部分知识,因为使用闭包可以大大减少我们的代码量,使我们的代码看上去更加清晰等等,总之功能十分强大。

闭包的含义:闭包说白了就是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕(这点涉及JavaScript作用域链)。

示例一代码如下:function checkClosure(){var str = 'rain-man';setTimeout(function(){ alert(str); } //这是一个匿名函数, 2000);}checkClosure();这个例子看上去十分的简单,仔细分析下它的执行过程还是有许多知识点的:checkClosure 函数的执行是瞬间的(也许用时只是0.00001毫秒),在checkClosure的函数体内创建了一个变量str,在checkClosure执行完毕之后str并没有被释放,这是因为setTimeout内的匿名函数存在这对str的引用。

【深入】深入研究JavaScript的匿名函数

【深入】深入研究JavaScript的匿名函数

【关键字】深入jQuery片段:(function(){//这里忽略jQuery所有实现})();(function(){ //这里忽略jQuery所有实现})();半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的。

然而,在看到源码的第一眼,我就迷糊了。

为什么只有一个匿名函数又没看到运行(当然是运行了……),就能有jQuery这么个函数库了?于是,我抱着疑问来到CSDN。

结果相信现在很多人都很清楚了(因为在我之后也不乏来者,呵呵~)。

当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!真神奇哦!嘿嘿!胡闹到此为止。

在这一节,我们碰到的jQuery片段是一组立即运行的匿名函数。

而这种用法在论坛上也曾引起过激辩——这段代码究竟属不属于闭包呢?带着这个疑问,我们从基础开始,分析每个关键要素,寻找属于自己的答案。

(没错,自己的答案!在我看来,所有理论只是形式,只要它有利于我们的应用实现,就是可取的——黑猫白猫,抓到老鼠的就是好猫!)要说匿名函数,我们首先要由函数本身说起。

函数的定义如下:函数是将唯一的输出值赋予给每一输入的“法则”。

当然,这只是数学上的定义。

但是,在计算机编程语言中,函数的定义也八九不离十。

因为,我们都知道,计算机中的函数,也类似数学定义中的描述,它是将输入的若干数据,经过代码设定的逻辑操作处理后,返回唯一的输出的一组代码组合块。

——当然,特例是,输入的数据为空或输出的数据为空,或者两者都为空。

下面,我们先初步了解一下和匿名函数相关的概念。

函数声明(function 语句)要使用一个函数,我们就得首先声明它的存在。

而我们最常用的方式就是使用function 语句来定义一个函数,如:function abc(){// code to process}function abc(){ // code to process }当然,你的函数也可以是带参数的,甚至是带返回值的。

JavaScript学习之自定义函数与匿名函数

JavaScript学习之自定义函数与匿名函数
文链接:/wiki/js/function/
var myFunction=function(a,b){return a+b;};
注意
以上两种方式是等价的 尽量避免使用 new 关键字
源代码 <!DOCTYPE html> <html> <head> <meta charSet="utf-8"> <title></title> </head> <body> <Script type="text/javaScript"> // teSt(); function teSt(){ alert('thiS iS a teSt'); } // teSt(); //函数名称严格区分大小写 function TEST(){ alert("hello king"); } // TEST(); //函数名称重复会产生覆盖 // teSt(); function teSt(){ alert('hello maizi'); } // teSt(); function teSt1(){ alert('thiS iS teSt1 function'); } // alert(teSt1()); function teSt2(){ return null; return undefined; return; return true; return 'thiS iS king'; return 1.2; alert('thiS iS a teSt');
自定义函数
通过 function 关键字

JS中的匿名函数、回调函数、匿名回调函数

JS中的匿名函数、回调函数、匿名回调函数

JS中的匿名函数、回调函数、匿名回调函数⼯欲善其事必先利其器在学习JavaScript设计模式⼀书时,遇到了“匿名回调函数”这个概念,有点疑惑,查找了些资料重新看了下函数的相关知识点之后,对这个概念有了认识。

九层之台,起于垒⼟。

在熟悉这⼀系列的概念之前,我们先来认识下JavaScript中函数吧。

⼀、定义函数的⽅式有两种:函数声明函数表达式函数声明格式如下: function functionName(arg0,arg1,arg2,...){ //函数体}function是关键字,然后functionName是函数的名字,这就是指定函数名的⽅式。

这个函数的name属性是functionName。

函数表达式最常见的⼀种格式如下:var varfun=function(){//函数体}创建⼀个函数并将它赋值给变量varFun,这种情况下创建的函数叫匿名函数(拉姆达函数)。

匿名函数的name属性是空字符串。

以下代码测试两种定义⽅式的name属性值:function fun(){}console.log();//funvar varfun=function(){}console.log();//空的⼆、函数调⽤⽅式匿名函数的⾃调⽤⽅式://⽆参(function(){})();//带参(function(a,b){alert(a+b);})(3,5);函数的回调⽅式:(通过函数指针调⽤函数)//firstfunction math(num1,num2){return minus(num1,num2);// return add(num1,num2);}function add(num1,num2){return num1 + num2;}function minus(num1,num2){return num1-num2;}alert(math(1,2));匿名回调函数:函数声明采⽤表达式形式,通过变量名调⽤。

JavaScript匿名函数

JavaScript匿名函数

JavaScript匿名函数匿名函数就是没有名字的函数,有时候也称为拉姆达(lambda)函数。

匿名函数是⼀种强⼤的令⼈难以置信的⼯具,其⽤途⾮常之多,来看看下⾯这个典型的函数声明:function functionName(arg0, arg1, arg2) {//函数体}既可以像上⾯这样声明函数,也可以像下⾯这样以函数表达式的形式定义函数:var functionName = function(arg0, arg1, arg2) {//函数体};虽然这两个例⼦在逻辑上等价,但它们之间还是存在⼀些区别。

当然,函数声明与函数表达式之间的主要区别,就是前者会在代码执⾏以前被加载到作⽤域中,⽽后者则是在代码执⾏到哪⼀⾏的时候才会有定义。

另⼀个重要的区别是函数声明会给函数指定⼀个名字,⽽函数表达式则是创建⼀个匿名函数,然后将这个匿名函数赋给⼀个变量。

换句话说,上⾯第⼆个例⼦创建了带有三个参数的匿名函数,然后把这个匿名函数赋给了变量functionName,但是,并没有给匿名函数指定名字。

像下⾯这样写⼀个匿名函数也是可以的:function(arg0, arg1, arg2) {//函数体}这些代码完全有效,但问题是,谁也不可能调⽤这个函数,因为没有指向这个函数的指针。

不过,在将函数作为参数传⼊另⼀个函数,或者从⼀个函数中返回另⼀个函数时,通常都要使⽤以这种形式来定义匿名函数。

下⾯是曾经使⽤过的⼀个createComparisonFunction()函数的例⼦:function createComparisonFunction(propertyName) {return function(object1, object2) {var value1 = object1[propertyName];var value2 = object2[propertyName];if (value1 < value2) {return -1;} else if (value1 > value2) {return 1;} else {return 0;}};}createComparisonFunction()就返回了⼀个匿名函数,返回的函数可能会被赋值给⼀个变量,或者以其他⽅式被调⽤,不过,在createComparisonFunction()函数内部,它是匿名的,在把函数当成值的情况下,都可以使⽤匿名函数。

JS:深入理解函数、匿名函数、自执行函数

JS:深入理解函数、匿名函数、自执行函数

JS:深⼊理解函数、匿名函数、⾃执⾏函数转载原⽂地址:基础概念:定义函数的⽅式⼀般定义函数有两种⽅式:1:函数的声明2:函数表达式函数的声明如下代码就是函数声明的代码结构:function sum(x,y){alert(x+y);}sum(1,2); //3关于函数声明,它最重要的⼀个特征就是函数声明提升,意思是执⾏代码之前先读取函数声明。

这意味着可以把函数声明放在调⽤它的语句之后。

如下代码可以正确执⾏:sum(1,2); //3function sum(x,y){alert(x+y);}函数表达式函数表达式中有⼏种不同的语法。

最常见和最具代表性的⼀种如下代码所⽰:var ss = function(x,y){alert(x+y);};ss(1,2);这种形式看起来好像是常规的变量赋值语句。

但是函数表达式和函数声明的区别在于,函数表达式在使⽤前必须先赋值。

所以⼀下代码执⾏的时候就会出错:ss(1,2); //报错,显⽰undefined is not a functionvar ss = function(x,y){alert(x+y);};造成这种现象是因为解析器在向执⾏环境中加载数据时,解析器会率先读取函数声明,并使其在执⾏任何代码前可⽤;⾄于函数表达式,则必须等到解析器执⾏到它的所在的的代码⾏,才会真正的被解析。

函数表达式中,创建的函数叫做匿名函数,因为function关键字后⾯没有标识符。

匿名函数的调⽤⽅式匿名函数,顾名思义就是没有名字的函数。

上⾯的函数表达式中的创建,即创建⼀个匿名函数,并将匿名函数赋值给变量ss,⽤ss来进⾏函数的调⽤,调⽤的⽅式就是在变量ss后⾯加上⼀对括号(),如果有参数传⼊的话就是ss(1,2),这就是匿名函数的⼀种调⽤⽅式。

还有⼀种匿名函数的调⽤⽅式是:使⽤()将匿名函数括起来,然后后⾯再加⼀对⼩括号(包含参数列表)。

我们再看⼀下以下⼀个例⼦:alert((function(x,y){return x+y;})(2,3));//5alert(( new Function("x","y","return x+y;"))(2,3));//5在javascript中,是没有块级作⽤域这种说法的,以上代码的这种⽅式就是模仿了块级作⽤域(通常成为私有作⽤域),语法如下所⽰:(function(){//这⾥是块级作⽤域})();以上代码定义并⽴即调⽤了⼀个匿名函数。

javascript匿名函数的用法

javascript匿名函数的用法

javascript匿名函数的⽤法javascript匿名函数的⽤法 摘要: 本⽂讲解的是javascript最基础也是最重要的东西--函数,之所以写这篇⽂章,是因为⾯试的时候问到了,也算是温故⽽知新了。

先上个例⼦,如果你看懂了,说明你已经理解了本⽂要讲的。

复制代码代码如下:var f = (function() { function f() {return 10;} return f(); function f() {return 20;} var f = 30; })(); console.log(f); javascript⾼级程序设计中这样描述函数--可以封装任意多条语句,⽽且可以在任何地⽅、任何时候调⽤执⾏。

之前介绍过了strict mode,严格模式对函数有⼀些限制: ①不能把函数命名为eval或arguments ②不能把参数命名为eval或arguments ③不能出现两个命名参数同名的情况 发⽣以上情况就会导致语法错误,代码⽆法执⾏。

函数定义 函数定义分为三种 1、构造函数 复制代码代码如下:var fun = new Funciton(); 2、普通定义 复制代码代码如下:function fun() {} 3、函数式定义 复制代码代码如下:var fun = function() {}; 这三种⽅式都可以定义函数fun。

参数 函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型。

即便你定义的函数只接收两个参数,在调⽤这个函数时也未必⼀定要传递两个参数。

可以传递⼀个、三个甚⾄不传递参数。

原因是参数在内部是⽤⼀个数组来表⽰的.。

在函数体内可以通过arguments对象来访问参数数组,举个例⼦ 复制代码代码如下:function sayHi() { alert("Hello " + arguments[0] + "," + arguments[1]); } 通过访问arguments对象的length属性来获知有多少个参数。

js的匿名函数

js的匿名函数

js的匿名函数
JS的匿名函数是指没有任何名称的函数,它们在定义时不需要指定特定的名称,可以用一个表达式代表。

使用匿名函数的主要优点是代码的简洁性,它可以实现一些简单的功能,而不用创建整个函数。

这也可以帮助减少代码编写和测试的时间,并节省内存空间。

另一个优点是,它不会占用空间,并且在不需要时可以被销毁。

使用匿名函数的一个重要缺点是它不能够重复使用或支持递归调用,因为它无法实现重复调用。

例如,如果要创建一个可以多次调用的函数,可以使用一个带名称的函数,而不是一个匿名函数。

匿名函数通常用于调用小型函数,例如在JavaScript中使用forEach()或map()等函数时,可以使用匿名函数来指定对每个元素所要执行的操作。

```
var array = [1,2,3,4];
array.forEach(function(element) {
console.log(element * 2);
});
// 输出
// 2
// 4
// 6
// 8
```
上面的代码使用forEach()函数迭代数组,并传入一个匿名函数,根据需要在每个元素上执行操作。

javascript 中(function{})()这种写法什么意思?

javascript 中(function{})()这种写法什么意思?

最近在整理javascript 学习,发现这个问题了,在网上发现这么个解释最清楚最明白;(function(){})()相当于先定义 function xx(){},后调用 xx();()是最高优先级的,所以先执行function(){},这个定义了一个匿名函数,等于xx=function(){}接着就是调用xx()了;给个例子JScript codefunctionf1(a){ alert(a);}functionf2(a){ returnfunction(){ alert(a); }}这里的var x=f2 就等于把函数传递给了f2,然后要执行这个函数,就必须加() 也就是x();也就是f2()还是(function f2(a){return function(){alert(a);})();另外还有一个问题就是命名空间的问题YY = YY||{};---声明一个叫YY的命名空间(定义一个全局的变量)(function() {ng=function() {------声明一个叫ng的命名空间(通过全局变量的增加属性的方式把闭包里的对象传到全局变量中,实现代码封装的效果)isUndefined: function(o) {return typeof o === 'undefined';},isString: function(o) {return typeof o === 'string';}};})();---调用方法alert(ng.isString('test me'));这时候就有人不明了,楼上为什么要加(function() { 和)(); 最外面的这两行,有什么用啊?J Script codeYY=YY||{}; //---声明一个叫YY的命名空间(定义一个全局的变量)//(function() { ng=function() {//------声明一个叫ng的命名空间(通过全局变量的增加属性的方式把闭包里的对象传到全局变量中,实现代码封装的效果)isUndefined:function(o) {returntypeofo==='undefi ned'; },isString:function(o) {returntypeofo==='string'; } }; }//)();//---调用方法alert(ng.isString('test me'));疑问在这:注释掉这两行有什么不一样的呢?不就是申明吗,为什么要用()()执行一下啊?答:(functionaa(){..};//只是定义了一个叫aa的函数,但是并没有执行alert(ng.isString('test me'));//执行的时候会报找不到isString的方法。

js匿名函数和命名函数

js匿名函数和命名函数

js匿名函数和命名函数JavaScript是一种具有灵活性和互动性的编程语言,它可以帮助我们创建动态和交互式的网页和应用程序。

在JavaScript中,函数是非常重要的概念。

在函数中,我们可以封装一些代码以便以后重复使用,或者我们可以将代码在程序中分成更小的、可管理的部分。

在JavaScript中,有两种类型的函数:匿名函数和命名函数。

1. 匿名函数匿名函数是没有名称的函数。

它们被创建并存储在变量中,通常作为另一个函数的参数传递。

例如,我们可以使用匿名函数来指定JavaScript中的回调函数。

以下是一个使用匿名函数的示例:```setTimeout(function() {alert('Hello, world!');}, 1000);```上面的代码将等待1000毫秒,然后显示一个弹出消息框。

在这里,我们传递了一个匿名函数作为第一个参数,它将在计时器完成后执行。

另一个示例是在DOM事件处理程序中使用匿名函数。

以下是一个用于单击按钮的HTML元素的示例:```<button id="myButton">Click me!</button>```我们将在JavaScript中创建一个事件处理程序,当用户单击按钮时将在控制台中记录一条消息。

我们可以使用匿名函数完成这个任务,如下所示:```var myButton = document.getElementById('myButton');myButton.addEventListener('click', function() {console.log('Button clicked!');});```在这里,我们使用addEventListener方法将匿名函数作为事件处理程序传递给按钮元素。

2. 命名函数命名函数是命名了的函数。

它们是在JavaScript中定义并存储在变量中,以便稍后在程序中使用。

Javascript的匿名函数和匿名类,以及原生类

Javascript的匿名函数和匿名类,以及原生类

Javascript的匿名函数和匿名类,以及原⽣类1.关于匿名类var class1={p1:value1,p2:value2};这个也可以写成var class1={};class1.p1=value1;class1.p2=value2;⾸先所有的匿名类都是继承与Object核⼼对象的,var class1={} 意味着实例化了⼀个Object对象,它拥有Object对象的原⽣属性和原⽣⽅法。

但是你不能为匿名类添加原⽣⽅法,例如这样写是错误的:class1.prototype.func1=function(){};你也不能尝试⽤new() ⽅法来构造⼀个新的与class1有相同的属性的新对象,因为它已经实例化了。

以下写法也是错的:var classB=new classA();这是⽆法构造的,准确的说,匿名类实际上是继承与Object的某⼀个半实例,相当于C#中的静态类。

你可以为他添加⽅法和属性例如:class1.func1=function(){}调⽤的时候就这样:class1.func1(); 酷似C#中的静态类但是你可以为Object添加原⽣函数,这样你的匿名类(实际上是所有的类)都有这个⽅法例如:var class1={};class1.p1=value1;class1.p2=value2;Object.prototype.func1=function(){ alert("1") };class1.func1();是没有问题的,但是这样⼀来,所有的实例化对象都有了func1()⽅法。

实际应⽤中应该避免给Object类添加原⽣⽅法。

2.关于匿名函数先说说关于Javascript的函数:可以这样说,JavaScript中⼀切皆是对象,function⾃然不例外,function可以作为函数,类,也可以当成⼀个被函数对象返回看下⾯的例⼦:function a(){alert("Hello Febird!");this.aa="aa";this.show=function (){alert(this.aa);};this.sayHello=function(){return function() {alert("hello"); } ;};}var aaa=new a();aaa.show();aaa.sayHello();其中最外⾯的⼀个function是定义了⼀个类 a ,他有属性aa,⽅法show(),sayHello();这两个都是匿名函数,⽽sayHello中的function便是函数作为⼀个返回值的例⼦。

深入理解Javascript中自执行匿名函数

深入理解Javascript中自执行匿名函数

深入理解Javascript中自执行匿名函数
格式:
(function(){//代码})();
解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。

来个带参数的例子:
(function(arg){alert(arg+100);})(20);//这个例子返回120。

回来看看jquery的*件编写
(function($){//Codegoeshere})(jQuery);
这样代码等同于
vara=functon($){//code};a(jQuery);
以上这篇深入理解Javascript中的自执行匿名函数就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

js中(function(){…})()立即执行函数写法理解

js中(function(){…})()立即执行函数写法理解

js中(function(){…})()⽴即执⾏函数写法理解javascript和其他编程语⾔相⽐⽐较随意,所以javascript代码中充满各种奇葩的写法,有时雾⾥看花,当然,能理解各型各⾊的写法也是对javascript语⾔特性更进⼀步的深⼊理解。

( function(){…} )()和( function (){…} () )是两种javascript⽴即执⾏函数的常见写法,最初我以为是⼀个括号包裹匿名函数,再在后⾯加个括号调⽤函数,最后达到函数定义后⽴即执⾏的⽬的,后来发现加括号的原因并⾮如此。

要理解⽴即执⾏函数,需要先理解⼀些函数的基本概念。

函数声明、函数表达式、匿名函数函数声明:function fnName () {…};使⽤function关键字声明⼀个函数,再指定⼀个函数名,叫函数声明。

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

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

函数声明和函数表达式不同之处在于,⼀、Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration Hoisting)当前执⾏环境(作⽤域)上的函数声明,⽽函数表达式必须等到Javascirtp引擎执⾏到它所在⾏时,才会从上⽽下⼀⾏⼀⾏地解析函数表达式,⼆、函数表达式后⾯可以加括号⽴即调⽤该函数,函数声明不可以,只能以fnName()形式调⽤。

以下是两者差别的两个例⼦。

1 2 3 4 5 6 7 8 9 10 11fnName();function fnName(){...}//正常,因为‘提升’了函数声明,函数调⽤可在函数声明之前fnName();var fnName=function(){...}//报错,变量fnName还未保存对函数的引⽤,函数调⽤必须在函数表达式之后12 3 4 5 6 7 8 9 10 11 12 13var fnName=function(){alert('Hello World');}();//函数表达式后⾯加括号,当javascript引擎解析到此处时能⽴即调⽤函数function fnName(){alert('Hello World');}();//不会报错,但是javascript引擎只解析函数声明,忽略后⾯的括号,函数声明不会被调⽤function(){console.log('Hello World');}();//语法错误,虽然匿名函数属于函数表达式,但是未进⾏赋值操作,//所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要⼀个函数名在理解了⼀些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种⽴即执⾏函数的写法,最初我以为是⼀个括号包裹匿名函数,并后⾯加个括号⽴即调⽤函数,当时不知道为什么要加括号,后来明⽩,要在函数体后⾯加括号就能⽴即调⽤,则这个函数必须是函数表达式,不能是函数声明。

JS中的匿名函数自执行、函数声明与函数表达式

JS中的匿名函数自执行、函数声明与函数表达式

JS中的匿名函数⾃执⾏、函数声明与函数表达式先看⼀段jQuery源码中匿名函数⾃执⾏的例⼦:(function( window, undefined ) {// jquery code})(window);另外⼀种常见的写法:+function( $ ) {// jquery code})(window.jQuery);这两种写法该如何理解呢?第⼆种写法前⾯为何要加“+”号,不加会是什么结果呢?function( $ ) {// jquery code})(window.jQuery); // 报错: Uncaught SyntaxError: Unexpected token (先理解⼀些概念性的东西函数表达式(Function Expression)将函数定义为表达式语句(通常是变量赋值)的⼀部分通过 Function Expression 定义的函数可以是命名的,也可以是匿名的Function Expression 不能以“function”开头,只⽤通过函数左侧的变量来调⽤a(); // 错误调⽤ Uncaught TypeError: a is not a functionvar a = function(){alert('Function expression');}a(); // 正确函数声明(Function Declaration)可以定义命名的函数变量,⽽⽆需给变量赋值函数声明在JS解析时进⾏函数提升,因此在同⼀个作⽤域内,不管函数声明在哪⾥定义,该函数都可以进⾏调⽤JS将function当作⼀个函数声明的开始,⽽函数声明后⾯不能跟圆括号直接进⾏调⽤a(); // 这⾥可以正确调⽤function a(){alert('Function declaration');}a(); // 这⾥可以正确调⽤错误原因解析function( $ ) {// jquery code})(window.jQuery); // 报错: Uncaught SyntaxError: Unexpected token (当js编译器开始执⾏的时候,碰见function之后,看到它周围没有任何东西。

javascript匿名函数自执行(function(window,document,un。。。

javascript匿名函数自执行(function(window,document,un。。。

javascript匿名函数⾃执⾏(function(window,document,un。

使⽤匿名⾃执⾏函数的作⽤: (function(window,document,undefined){})(window,document);1.⾸先匿名函数 (function(){}) (); 避免函数体内外变量的冲突(js执⾏表达式顺序为圆括号⾥到圆括号外);2.后⾯的圆括号中(window,document)的window为实参,接受window对象(window对象是全局环境下的);⽽function后⾯的圆括号function(window,document,undefined){}中的window为局部变量,不是全局的window对象。

所以这样写可以提⾼js性能,减少作⽤域链查询时间.(如果在函数体内多次使⽤到window对象。

把window对象当成实参传进去,是⼗分必要的;如果函数内部不需要,那么就⽆需传递该参数.);3.function后⾯的形参undefined⼜有什么⽤呢?其实在⼀些⽼的浏览器中,undefined不被⽀持,直接使⽤会导致错误,所以考虑兼容性,就增加⼀个形参undefined;4.(function() {})()主要⽤于存放开发插件的代码,执⾏其中的代码时DOM不⼀定存在,所以直接⾃动执⾏DOM操作的代码,请放⼼使⽤;简化成()(); 表⽰匿名函数⾃执⾏(function(window,document,undefined) {//do somethingconsole.log("我是匿名函数,会⾃⼰执⾏奥!");})(window,document);// (function(){})()------------->匿名函数没有赋值给任何变量⽆法随时调⽤,在定义完成后就会⽴刻调⽤// (事件处理程序,创建闭包,创建函数)//作⽤:---------->主要利⽤函数内的变量作⽤域,避免产⽣全局变量,影响整体页⾯环境,增加代码的兼容性。

javascript中(function{})()写法解析

javascript中(function{})()写法解析

javascript中(function{})()写法解析javascript中(function{})()写法解析javascript 中(function{})()这种写法什么意思?最近在整理javascript 学习,发现这个问题了,在网上发现这么个解释最清楚最明白;(function(){})()相当于先定义 function xx(){},后调用 xx();()是最高优先级的,所以先执行function(){},这个定义了一个匿名函数,等于xx=function(){}接着就是调用xx()了;给个例子JScript codefunctionf1(a){ alert(a);functionf2(a){ returnfunction(){ alert(a); }}这里的var x=f2 就等于把函数传递给了f2,然后要执行这个函数,就必须加() 也就是x();也就是f2()还是(function f2(a){return function(){alert(a);另外还有一个问题就是命名空间的问题YY = YY||{};---声明一个叫YY的命名空间(定义一个全局的变量)(function() {ng=function() {------声明一个叫ng的命名空间(通过全局变量的增加属性的方式把闭包里的对象传到全局变量中,实现代码封装的效果)isUndefined: function(o) {return typeof o === 'undefined';isString: function(o) {return typeof o === 'string';---调用方法alert(ng.isString('test me'));这时候就有人不明了,楼上为什么要加(function() { 和)(); 最外面的这两行,有什么用啊?JScript codeYY=YY||{}; //---声明一个叫YY的'命名空间(定义一个全局的变量)function() { ng=function() {//------声明一个叫ng的命名空间(通过全局变量的增加属性的方式把闭包里的对象传到全局变量中,实现代码封装的效果)isUndefined:function(o) {returntypeofo==='undefined'; }, isString:function(o) {returntypeofo==='string'; } }; }//---调用方法alert(ng.isString('test me'));疑问在这:注释掉这两行有什么不一样的呢?不就是申明吗,为什么要用()()执行一下啊?答:(function(){})()意思是立即执行前一个括号里的function,相当于是一个匿名函数;由于里面的代码的执行,定义了ng这个对象,所以可以执行alert(ng.isString('test me'));调用isString方法。

你了解javascript中的function吗?(0)

你了解javascript中的function吗?(0)

你了解javascript中的function吗?(0)Function作为Javascript的核⼼技术之⼀,清晰的理解function的机制和⽤法,对我们进⾏javascript开发⾮常重要.今天本⼈就结合⾃⼰的实践为⼤家介绍⼀些function在javascript中的⼀些浅显⽤法.1. Function是什么从Javascript对function的定义, function是⼀个由代码集合⽽成的对象.从中我们可看出,我们可以使⽤向C语⾔中的函数那样使⽤function,也可以对function进⾏⾯向对象编程.当然Javascript中function的强⼤还不⽌如此.2. 如何使⽤function2.1定义function myfunc(param) {//code}注意Javascript中的这两个function被认为是同⼀个:在运⾏时到底调⽤哪⼀个function取决于加载顺序,后⼀个加载的function会覆盖前⼀个.function func1() {return 'func1'; }function func1(name) { return name;}换句话说就是,function的参数都是可选参数,因此funciton的识别是不包括如参的,⽽函数⼊参处的声明是为了引⽤⽅便以及可读性.以上的代码也等价于:function func1() {return arguments[0] || 'func1';}func(); //return 'func1'func('function'); //return 'function'2.2 function当作对象是的没错,在javascript中function就是对象,我们可以向使⽤⼀个对象那样使⽤function.它可以有⾃⼰的属性和⽅法.有如下的⼀个funciton:function nameOf(name) {return name.toUpperCase();}2.2.1 function作为对象进⾏赋值var person = person || {};Of = nameOf;Of('yang dong') // return "YANG DONG"2.2.2 定义function的属性看看以下的代码, 你能从中的到什么信息:function nameOf() {return nameOf.blogger;}nameOf.blogger = "YANG_DONG";没错,function可以拥有⾃⼰的属性.考虑这样⼀种场景, 假如我们要统计某个function被调⽤的次数.那么我们有两种⽅式来实现:1.设定⼀个全局变量来记录,该funciton被调⽤的次数,每调⽤⼀次,该变量加1:var globalNameOfCounter = 0;nameOf();globalNameOfCounter ++;这样做看起来是没有问题的,在代码还是⽐较简单的时候,它可以⼯作的很好,但是随着代码越来越复杂,维护这段逻辑的成本会直线上升.主要是因为:globalNameOfCounter污染的global命名空间,并且破坏了代码的封装性.2.使⽤function的属性看看以下代码:function nameOf() {nameOf.counter++;return nameOf.blogger;}nameOf.blogger = “YANG_DONG"nameOf.counter = 0;nameOf(); //nameOf.counter = 1nameOf(); //nameOf.counter = 2显⽽易见,第⼆种⽅式有着很好的封装性和维护性.function的属性的应⽤还不⽌如此.请看下⽂.2.3 function作为名字空间Javascript不⽀持名字空间(本⼈不太理解如此强⼤的语⾔为什么不⽀持名字空间呢,这是为什么呢?),不过我们依然可以使⽤其强⼤的funciton为我们⽀持名字空间.从上节我们知道function可以定义⾃⼰的属性,我们就可以利⽤该特性来⽣成名字空间.请看以下代码:nameOf.getBloggerName = function() {return nameOf.blogger;}此时在nameOf名字空间之下已经包含了:blogger,counter属性和function getBloggerName.2.4 function作为method在javascript中function和method其实是没有什么本质区别的,如果⾮的区分两者的话,我想也就是this变量不同吧. function g() {return this;}var local = local || {};local.method = g; //修改this指向locallocal.method(); //返回local对象g(); //返回DOMWindow对象2.5 function皆为closure在Javascript中所有的function都绑定了⼀个scope chain,因此它是⼀个保存了调⽤上下⽂的函数.看看下⾯的实例代码: var variable = 'global';function getVariable(){var variable = 'local',func = function() {return variable;};return func;}getVariable()(); //return local;当func被调⽤的时候,它所取的varible的值是调⽤上下⽂中的变量⽽并⾮与之同名的全局变量.3. 总结如果⽤⼀句话概括今天对funciton的介绍,那么我想应该是: function是可以被调⽤执⾏的代码集对象.以上是function的⼀些应⽤场景,当然它还不⽌这些.⽐如: function作为构造函数(也就是funciton作为类),继承等.这些内容将在以后的blog中为⼤家介绍,敬请期待.。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Javascript自执行匿名函数(function
{ }) 的原理浅析
匿名函数就是没有函数名的函数。

这篇文章主要介绍了Javascript自执行匿名函数(function { }) 的原理浅析的相关资料,需要的朋友可以参考下
函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。

匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数
下面是一个最常见的自执行函数:
// 传统匿名函数
(function {
alert('hello');
}) ;
这段代码的执行效果就是在页面再载入时弹出:"hello"
是什么促使它自动执行的?,来看下面的代码
// 在传统写法上去掉小括号,并在前面加上运算符~,!,+,-
~function {
alert('hello');
} ;
!function {
alert('hello');
} ;
+function {
alert('hello');
} ;
-function {
alert('hello');
} ;
这些写法与上文所说的传统方式执行起来并无区别,
我发现,这些写法的共同点是运算符,其实传统方式的小括号也属于运算的一种,出现在:a=b*(c+d),运算符 + 传递给自生的参数 = 函数自动执行?但有些符号也不支持,比如“=,*,/”号,它自执行的原因还是很神秘,网上也找不到像样的答案
然后我发现了一个神奇的现象,这些运算符可以无限叠加。

// function前面是特定符号可以无限叠加...
~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+ -+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+ -~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-
!~!+-~!+-+-!~!+-~!+-+-!~~~~~~~~+-!!!!!!+function a(b) {
alert('hello');
} ;
程序正常运行!!!!!!
但是,有两种情况会报错
如果连续出现三个及以上的“+”或“-”符号,则会出错;
如果连续出现两个“+”或“-”符号再接上其他符号,则会出错,例如“++~”,“--+”;
错误提示:Uncaught ReferenceError: Invalid left-hand side expression in prefix operation (意思是左侧表达式错误)
然后我用同样的符号来运算一个变量,发现一模一样,这或许已经可以说明是javascript的运算促使函数的自动执行,也可以理解为通过运算来调用这个函数!
并不是函数自己执行了,而是通过运算来调用这个函数!,但只支持部分运算方式!
此外,这个自执行函数,未必是匿名函数!看上方的代码,我在运算符后的函数中,定义了函数名称a,并没有什么异常,但也没什么卵用- -!,这个a依然无法被其他方法调用,但我觉得很多人都称其为匿名函数有点不妥!
以上所述是给大家介绍的Javascript自执行匿名函数(function { }) 的原理浅析,希望对大家有所帮助!。

相关文档
最新文档