匿名函数

匿名函数顾名思义就是没有名字的函数，在实际开发中经常会用到，也是JavaScript的重点。匿名函数又叫立即执行函数。

由于这种函数是匿名的，所以它不能被调用。由于它不能被调用，所以如果它不立即执行的话就没有了意义。由于它需要立即执行，所以在执行完之后匿名函数就会被销毁。匿名自执行函数的作用就是用于闭包和创建独立的命名空间两个方面。

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

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

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

匿名自执行函数的作用

1.匿名自执行函数最常见的作用是用于实现闭包的情况中。闭包:闭包是JavaScript的一种特性，我们可以通过闭包实现函数内外部的连接，并且可以使得函数的局部变量始终存在于内存中。

2.匿名自执行函数还可以用于在JavaScript中模拟创建块级作用域. 使用匿名自执行函数将某些代码包裹起来可以实现块级作用域的效果，减少全局变量的数量，在匿名自执行函数执行结束后变量就会被内存释放掉，从而也会节省了内存。

小括号 包着函数的小括号的作用：小括号能把我们的表达式组合分块，并且每一块，也就是每一对小括号，都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以，当我们用一对小括号把匿名函数包起来的时，实际上小括号对返回的，就是一个匿名函数的Function 对象。因此，小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表，就会实现普通函数的调用形式。

小括号有返回值，就是小括号内的函数或者表达式的返回值，所以小括号内的function返回值等于小括号的返回值。

写法匿名函数的写法 1.先定义一个普通函数Cat()

function Cat(){ 
   

    alert("喵喵喵~~");
}

2.去掉函数的名字构建匿名函数不包裹一个括号不符合语法要求，会报错！需要给匿名函数外边包裹一个括号才能运行。

(function (){ 
   

    alert("喵喵喵~~");
})()                        //()可省略

3.当匿名函数需要传值，将参数写到括号内

!(function (data){ 
   

    alert("喵喵喵~~"+data);
})("汪汪汪~~")

4种实现方式

//常见匿名函数：
//1，匿名函数的第一种实现方式
(function(cat){ 

alert(cat);
})("喵喵喵~~");
//2.匿名自执行函数的第二种实现方式（常用）jQuery 
(function(){ 

alert("cat");
}());
//3.匿名自执行函数的第三种实现方式
!function(cat){ 

alert(cat);
}("喵喵喵~~");
//4.匿名自执行函数的第四种实现方式
var fun=function(cat){ 

alert(cat);
}("喵喵喵~~");
//不常见匿名函数：
~(function(){ 
 
alert('cat'); 
})();
//效率最高
void function(){ 
 
alert('cat'); 
}();
+function(){ 
 
alert('cat'); 
}();
-function(){ 
 
alert('cat'); 
}();
~function(){ 
 
alert('cat'); 
}();
!function(){ 
 
alert('cat'); 
}();
//强制执行
(function(){ 
 
alert('cat'); 
}());

匿名函数的应用 1.绑定事件

<input type="button" value="点击" id="btn">
```javascript
var btn=document.querySelector("#btn");    //querySelector是H5中新增的查找dom元素的方法 btn.οnclick=function(){ 

alert("");
}

2.应用对象

var obj={ 

animal:"汤姆猫",
voice:"喵喵喵~~",
CAT:function(){ 

return "我是"+this.animal+"，我会"+this.voice+"叫！";
}
};
alert(obj.CAT());

3.应用函数表达式

//将匿名函数赋值给变量cat
var cat=function(){ 

return "喵喵喵~~"
}
//调用方式与调用普通函数一样
alert(cat());

4、回调函数的应用

setInterval(function(){ 

console.log("我是每5秒执行一次的回调函数");
},5000);

5、返回值

function cat(){ 

//返回匿名函数
return function(){ 

return "喵喵喵~~";
}
}
//调用匿名函数
alert(cat()());
//或
var mao=cat();
alert(mao());

6.链式调用

(function(animal) { 
 
alert(animal); 
return arguments.callee; 
})('cat')('dog')('pig');

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186161.html原文链接：https://javaforall.cn

原文地址：https://cloud.tencent.com/developer/article/2157270

JavaScript匿名函数理解及应用[通俗易懂]

匿名函数

相关推荐