搜索
首页web前端js教程如何理解JS匿名函数
如何理解JS匿名函数Mar 19, 2018 pm 04:24 PM
javascript函数匿名的

匿名函数的基本形式为(function(){...})();前面的括号包含函数体,后面的括号就是给匿名函数传递参数并立即执行之匿名函数的作用是避免全局变量的污染以及函数名的冲突。

1.小括号的作用

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

简单来说就是小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值

2.匿名函数的写法

方式1,调用函数,得到返回值。强制运算符使函数调用执行

(function(x,y){

alert(x+y);

return x+y;

}(3,4)); 

方式2,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用再去调用执行

(function(x,y){

alert(x+y);

return x+y;

})(3,4); 

这种方式也是很多库爱用的调用方式,如jQuery,Mootools。

方式3,使用void

void function(x) {

x = x-1;

alert(x);

}(9);

方式4,使用-/+运算符

-function(x,y){

alert(x+y);

return x+y;

}(3,4);

+function(x,y){

alert(x+y);

return x+y;

}(3,4);

--function(x,y){

alert(x+y);

return x+y;

}(3,4);

++function(x,y){

alert(x+y);

return x+y;

}(3,4); 

方式5,使用波浪符(~)

~function(x, y) {

alert(x+y);

return x+y;

}(3, 4); 

方式6,匿名函数执行放在中括号内

[function(){

console.log(this) // 浏览器得控制台输出window

}(this)] 

方式7,匿名函数前加typeof

typeof function(){

console.log(this) // 浏览器得控制台输出window

}(this) 

方式8,匿名函数前加delete

delete function(){

console.log(this) // 浏览器得控制台输出window

}(this) 

方式9,匿名函数前加void

void function(){

console.log(this) // 浏览器得控制台输出window

}(this) 

方式10,使用new方式,传参

new function(win){

console.log(win) // window

}(this) 

方式11,使用new,不传参

new function(){

console.log(this) // 这里的this就不是window了

方式12,逗号运算符

 function(){

console.log(this) // window

}(); 

方式13,按位异或运算符

^function(){

console.log(this) // window

}(); 

方式14,比较运算符

function(){

console.log(this) // window

}(); 

最后看看错误的调用方式

function(x,y){

alert(x+y);

return x+y;

}(3,4); 

匿名函数的N种写法如下所示

匿名函数没有实际名字,也没有指针,怎么执行?

关于匿名函数写法,很发散~ 

+号是让函数声明转换为函数表达式。汇总一下

最常见的用法: 

代码如下:

(function() { 

alert('water'); 

})(); 

当然也可以带参数: 

代码如下:

(function(o) { 

alert(o); 

})('water'); 

想用匿名函数的链式调用?很简单: 

代码如下:

(function(o) { 

console.log(o); 

return arguments.callee; 

})('water')('down'); 

常见的匿名函数都知道了,看看不常见的: 

代码如下:

~(function(){ 

alert('water'); 

})();//写法有点酷~ 

代码如下:

void function(){ 

alert('water'); 

}();//据说效率最高~ 

代码如下:

+function(){ 

alert('water'); 

}(); 

代码如下:

-function(){ 

alert('water'); 

}();

代码如下:

~function(){ 

alert('water'); 

}();

代码如下:

!function(){ 

alert('water'); 

}(); 

代码如下:

(function(){ 

alert('water'); 

}());//有点强制执行的味道~

相关推荐:

PHP回调函数及匿名函数详解

JS匿名函数概念与用法分享

PHP匿名函数和匿名类详解

以上是如何理解JS匿名函数的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版