JavaScript 匿名函数几种执行方式[通俗易懂]

JavaScript 匿名函数几种执行方式[通俗易懂]参考1、javascript自执行匿名函数  http://blog.csdn.net/jbgtwang/article/details/6608265其中说到了self-executinganonymousfunctions,有几种方式,最常见也比较容易理解的是:(function(){//dosomethinghere;})();格式:     (fun

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

 参考1、

javascript自执行匿名函数  http://blog.csdn.net/jbgtwang/article/details/6608265

其中说到了 self-executing anonymous functions,有几种方式,最常见也比较容易理解的是:

(function(){
//do something here;
})();
格式:
      (function(){
          //代码
        })();
解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。 来个带参数的例子:         (function(arg){            alert(arg+100);         })(20);         这个例子返回120。

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法

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

https://my.oschina.net/u/2331760/blog/468672?p=%7B%7BcurrentPage+1%7D%7D

最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。要理解立即执行函数,需要先理解一些函数的基本概念。


函数声明、函数表达式、匿名函数


函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。


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


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


函数声明和函数表达式不同之处在于,一、Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式,二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。以下是两者差别的两个例子。

实例:

JavaScript 匿名函数几种执行方式[通俗易懂]

在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数,并后面加个括号立即调用函数,当时不知道为什么要加括号,后来明白,要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。


JavaScript 匿名函数几种执行方式[通俗易懂]

可以看到输出结果,在function前面加!、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、+、-、=等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。

还有一种方式为:

!function(){
  
  
// do something
}();

在这里开头要加上
 !
 或者 
~
 , 

 和
 +
。(note:都是英文符号)

加括号是最安全的做法,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

不过这样的写法有什么用呢?

javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/186211.html原文链接:https://javaforall.net

(0)
上一篇 2022年10月3日 下午11:36
下一篇 2022年10月3日 下午11:46


相关推荐

  • 使用Chrome Frame插件解决IE浏览器兼容问题

    使用Chrome Frame插件解决IE浏览器兼容问题时不时碰到客户的浏览器为IE7,IE8,甚至IE6的,他们不能升级浏览器,因为升级后,机器中其它的重要系统无法访问。而新系统的前端又需要浏览器的支持,比如H5,SVG等等,换框架结构,成本无疑是巨大的,而且风险不可控。针对此种情况,安装GoogleFrame是相对非常完美的解决方案,不要求升级浏览器,只安装一个插件,且对原系统无任何干扰,新系统也可根据情况对是否使用GoogleFrame插件进…

    2022年7月16日
    16
  • Virtualbox下使用virt-p2v

    Virtualbox下使用virt-p2v1虚拟机迁移参考:http://www.ibm.com/developerworks/cn/linux/l-cn-mgrtvm1/index.html2物理机到虚拟机的迁移virt-p2vredhat官方文档:https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/6/html/V2V_Guide/cha

    2022年7月26日
    14
  • WebJars介绍

    WebJars介绍参考文章 WebJars web 端静态资源的 jar 包 1 WebJars 介绍 Web 前端使用了越来越多的 JS 或 CSS 如 jQuery Backbone js 和 Bootstrap 一般情况下 我们是将这些 Web 资源拷贝到 JavaWeb 项目的 webapp 相应目录下进行管理 这种通过人工方式管理可能会产生版本误差 拷贝版本错误 漏拷等现象 导致前端页面无法正确展示 版本不一致 文件混乱等 导致出现一些莫

    2026年3月19日
    1
  • 「机械工程」力矩,转矩,扭矩的理解

    「机械工程」力矩,转矩,扭矩的理解1.力矩定义:力矩在物理学里是指作用力使物体绕着转动轴或支点转动的趋向。力矩的单位是牛顿-米。力矩希腊字母是tau。力矩的概念,起源于阿基米德对杠杆的研究。转动力矩又称为转矩或扭矩。力矩能够使物体改变其旋转运动。推挤或拖拉涉及到作用力,而扭转则涉及到力矩。力矩等于径向矢量与作用力的叉积。力矩在物理学里是指作用力使物体绕着转动轴或支点转动的趋向,是力对物体产生转动作用的物理量。可以分…

    2022年5月15日
    79
  • charles导致mac无法上网_charles手机设置代理后上不了网

    charles导致mac无法上网_charles手机设置代理后上不了网前言charles关闭后,发现网页突然打开了,那大概率是设置了代理,但明明已经关闭了charles,这是由于mac网络偏好设置中,使用的是手动代理,将其改为自动即可解决方法1打开网络偏好设置,

    2022年7月30日
    115
  • 怎么html文字下划线,HTML怎么设置下划线?html文字加下划线方法

    怎么html文字下划线,HTML怎么设置下划线?html文字加下划线方法HTML中的下划线曾经是将文本包含在标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS。一般来说,下划线被认为是引起人们对文本注意的一种方式,那么HTML怎么设置下划线?html文字加下划线方法?下面我们来总结一下。1.使用“text-decoration”CSS样式属性,使用标签不再是强调文本的正确方法。而是使用“text-decoration”CSS属性,语法为:<sp…

    2022年6月3日
    52

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号