举例说明一个匿名函数的典型用例

最新推荐文章于 2023-09-13 15:28:54 发布

薛跳跳

最新推荐文章于 2023-09-13 15:28:54 发布

阅读量2.9k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

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

 
 匿名函数的基本形式为(function(){...})(); 

 
 前面的括号包含函数体，后面的括号就是给匿名函数传递参数并立即执行之 

 
 匿名函数的作用是用于闭包和避免全局变量的污染以及函数名的冲突 

函数的定义，大致可分为三种方式：

第一种：函数申明，这也是最常规的一种

function double(x){ 
return 2 * x; 
}

第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。

var double = new Function('x', 'return 2 * x;');

第三种：

var double = function(x) { return 2* x; }

匿名函数的代码模式

错误模式：其无法工作，浏览器会报语法错。

function(){ alert(1); }();

函数字面量：首先声明一个函数对象，然后执行它。

(function(){ alert(1); } ) ( );

优先表达式：

( function(){ alert(2); } ( ) );

void操作符：

void function(){ alert(3); }()这三种方式是等同的，hedger wang因为个人原因比较喜欢第3种，而在实际应用中我看到的和使用的都是第1种。

为什么(function（） {// code})();可以被执行, 而function（） {// code}();却会报错?

(1). 首先, 要清楚两者的区别:(function {// code})是表达式, function {// code}是函数声明.(2). 其次, js"预编译"的特点:js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;

当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一个函数, 故而遇到();时, 便会被执行.

function checkClosure(){ 
var str = 'rain-man'; 
setTimeout( 
function(){ alert(str); } //这是一个匿名函数 
, 2000); 
} 
checkClosure();

//普通函数
function box() {                    //函数名是box       
    return 'Lee';
}

//匿名函数
function () {                       //匿名函数，会报错
    return 'Lee';
}

//通过表达式自我执行
(function () {                      //封装成表达式
    alert('Lee');
})();   

(function (age) {                   //封装成表达式
    alert(age);
})(100);                            //()表示执行函数，并且传参
//第一圆括号放匿名函数，第二个圆括号执行；

//把匿名函数赋值给变量
var box = function () {             //将匿名函数赋给变量
    return 'Lee';
};
alert(box());                      //调用方式和函数调用相似
//注意上面的括号     

//函数里的匿名函数
function box () {
    return function () {                        //函数里的匿名函数，产生闭包
        return 'Lee';
    }
}
alert(box()());                             //调用匿名函数

function Foo() {
    var a = 123;
    this.a = 456;
    (function() {
        console.log(a); // 123
        console.log(this.a); // undefined
    })();
};
var f = new Foo();

结果：
undefined

（1）匿名函数可以直接访问到外层署名函数（Foo）中的变量（使用关键字var定义的），但不能访问外层署名函数的属性（使用关键字this定义的）；

(function() {
    var a = 123;
    this.a = 456;
    (function() {
        console.log(a); // 123
        console.log(this.a); // 456
    })();
})();

结果：
456

（1） 匿名函数既可以直接访问外层匿名函数中的变量，又直接可以访问外层匿名函数中的属性，而匿名函数却不可以直接访问外层已命名函数中的属性；

匿名函数与闭包

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。

闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕

//通过闭包可以 返回局部变量
function box() {
    var user = 'Lee';
    return function () {//通过匿名函数返回box()局部变量
        return user;
};
}
alert(box()());//通过box()()来直接调用匿名函数返回值

var b = box();
alert(b());//另一种调用匿名函数返回值

使用闭包有一个优点，也是它的缺点：就是可以把局部变量驻留在内存中，可以避免使用全局变量。(全局变量污染导致应用程序不可预测性，每个模块都可调用必将引来灾难，所以推荐使用私有的，封装的局部变量)。

//通过全局变量来累加
var age = 100;                              //全局变量
function box() {
    age ++;                             //模块级可以调用全局变量，进行累加
}
box();                                  //执行函数，累加了
alert(age);                             //输出全局变量

//通过局部变量无法实现累加
function box() {
    var age = 100;
    age ++;                             //累加
    return age;
}

alert(box());                               //101
alert(box());                               //101，无法实现，因为又被初始化了

//通过闭包可以实现局部变量的累加
function box() {
    var age = 100;
    return function () {
        age ++;
        return age;
    }
}
var b = box();                              //获得函数
alert(b());                                 //调用匿名函数
alert(b());                                 //第二次调用匿名函数，实现累加
    b = null         //解除引用 等待回收内存；

由于闭包里作用域返回的局部变量资源不会被立刻销毁回收，所以可能会占用更多的内存。过度使用闭包会导致性能下降，建议在非常有必要的时候才使用闭包

作用域链的机制导致一个问题，在循环中里的匿名函数取得的任何变量都是最后一个值。

/** 
* <body> 
* <ul> 
* <li>one</li> 
* <li>two</li> 
* <li>three</li> 
* <li>one</li> 
* </ul> 
*/
var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
lists[ i ].onmouseover = function(){ 
alert(i); 
}; 
}

你会发现当鼠标移过每一个<li>元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
(function(index){ 
lists[ index ].onmouseover = function(){ 
alert(index); 
}; 
})(i); 
}

薛跳跳

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
举例说明一个匿名函数的典型用例

匿名函数：就是没有函数名的函数。匿名函数的基本形式为(function(){...})();前面的括号包含函数体，后面的括号就是给匿名函数传递参数并立即执行之匿名函数的作用是用于闭包和避免全局变量的污染以及函数名的冲突函数的定义，大致可分为三种方式：第一种：函数申明，这也是最常规的一种function double(x){ return 2 * x; }第二种：这种方法使用了Function构...
复制链接

扫一扫