js中函数表达式和自执行函数表达式的用法总结攻略教程_函数入门基础教程

立即调用函数表达式给函数体加大括号,在有变量声明的情形下,没有任何区别但是,如果只是【自动执行】的情形下,就会不同因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的//以下情形并无差别
var count100 = function getCount100(){ return(100) }();//100
var count200 = (func

js中函数表达式和自执行函数表达式的用法总结攻略教程

立即调用函数表达式

  • 给函数体加大括号,在有变量声明的情形下,没有任何区别
  • 但是,如果只是【自动执行】的情形下,就会不同
  • 因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的
//以下情形并无差别
var count100 = function getCount100(){ return(100) }();//100
var count200 = (function getCount200(){ return(200) })();//200,加小括号和count100没有区别
var count = (function getCount(n){ return(n) })(300);//300,传参的情形
//不赋值变量,函数体加小括号,自动执行
(function aaa(){console.log("aaa")})();// aaa
console.log(aaa);//aaa is not defined
//一个匿名函数,函数体不加小括号,是不能自动执行的
function bbb(){console.log("bbb")}();//Unexpected token )

==实际上【自执行函数表达式】可以有很多复杂的情形==,比如下边的复杂例子

js中函数表达式和自执行函数表达式的用法总结攻略教程_函数入门基础教程

//函数声明置于小括号中,没有自执行
( function fn(){console.log("aaa");return "bbb"} );
console.log("fn res is " + fn);// fn is not defined

//函数声明置于小括号中,且自执行
( function fn(){console.log("aaa");return "bbb"}() );//输出aaa
console.log("fn res is " + fn);// fn is not defined

//函数声明置于小括号中,且自执行,注意,负责执行的一对小括号移到了外部
( function fn(){console.log("aaa");return "bbb"} )();//输出aaa
console.log("fn res is " + fn);// fn is not defined

//函数声明置于小括号中,函数未执行但将其赋值给fn
( fn = function aaa(){console.log("aaa");return "bbb"} )
console.log("fn res is " + fn());//fn res is bbb

//函数声明置于小括号中,函数执行,并且将其赋值给fn
( fn = function aaa(){console.log("aaa");return "bbb"}() );//输出aaa
console.log("fn res is " + fn);//fn res is bbb

//函数声明置于小括号中,将其赋值给fn,并且在外部执行之(注意末尾小括号位置)
( fn = function aaa(){console.log("aaa");return "bbb"} )();//输出aaa
console.log("fn res is " + fn());//再次输出aaa,并输出fn res is bbb

// 匿名函数在自执行,注意末尾小括号位置
( function(){console.log("aaa");return "bbb"} )();//输出aaa

// 匿名函数在自执行,可见和上边的例子效果一致
( function(){console.log("aaa");return "bbb"}() );//输出aaa

//在括号外赋值的函数表达式,例一。以下三例的结果是一致的
var fn = function aaa(){return "bbb"}();
console.log("fn is res " + fn);//fn is res bbb
//例二
var fn = (function aaa(){return "bbb"})();
console.log("fn is res " + fn);//fn is res bbb
//例三
var fn = (function(){return "bbb"})();
console.log("fn is res " + fn);//fn is res bbb
-------

//正常的函数,注意fn的name属性自动设置为fn
function fn(){return "bbb"};
console.log(fn.name);//fn
console.log("fn is res " + fn());//fn is res bbb
//函数表达式,注意fn的name属性是fn
var fn = function(){return "bbb"};
console.log(fn.name);//fn
console.log("fn is res " + fn());//fn is res bbb
//函数表达式,注意fn的name属性是aaa
var fn = function aaa(){return "bbb"};
console.log(fn.name);//aaa
console.log("fn is res " + fn());//fn is res bbb

对于如此多的不同情形,可以总结如下:

  • 在不赋值的情形下,在小括号中的函数或者函数表达式,被阻止声明为一个全局的变量,同时其内部是可执行的
  • 但如果其在小括号中,被赋值给了某一变量,那么该函数或者函数表达式就会被曝露出去,可以在外部调用
  • 函数表达式在赋值给一个变量时,该变量会拥有一个name属性,它的值取决于函数表达式是否为匿名函数
  • 如果为匿名函数,则变量的name属性值为自身,如果为具名函数,则变量的name属性值为具名函数的name值
  • 影响表达式执行的末尾的一对小括号,对词法上的影响很小
  • 即,影响函数表达式的因素,由大到小是: 赋值与否 => 匿名与否 => 何时执行

来自:https://www.jianshu.com/p/37bf3c40545f

海计划公众号
(0)
上一篇 2020/03/31 01:52
下一篇 2020/03/31 01:52

您可能感兴趣的内容

  • javascript是弱类型语言吗?新手入门_语言入门指南

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。什么是强类型定义语言和弱类型定义语言?1)、强类型定义语言:强制数据类型定义的语言。也就是说,一旦一个变量被指定了某个数据类型,如果不

    2020/03/31
  • Node.JS应用最佳实践:日志小白攻略_日志使用帮助

    日志记录是每个开发人员从第一天编写代码时就要做的事情,但很少有人知道它可以产生的价值和最佳实践。在本文中,我们将讨论以下主题:什么是日志,为什么很重要性?记录日志的最佳做法日志的重要部分正确使用日志级别为什么选择 Winston?什么是日志,为什么很重要?日志是反映程序各个方面的事件,如果能够正确编写,那么它就是最简单的故障排除和诊断程序的模式。当你启动 N

    2020/03/26
  • 蚂蚁微客零基础入门_众包,赚钱,做任务,发任务,兼职

    蚂蚁微客零基础入门 官方网址:https://wk.alipay.com 简介描述:众包,赚钱,做任务,发任务,兼职 支付宝推出蚂蚁微客这项目,给许多自由职业创造一条新的创业路子。…

    2020/03/06
  • 什么是web前端?前端工程师前景如何使用说明_web菜鸟教程下载

    什么是web前端?Web为你在浏览器、APP、应用程序等设备上提供直观界面,这些界面展现以及用户交互就是前端。从2016年到2018年,web前端岗位从之前的爆发式增长变为平稳的发展。同时,企业不再满足只会HTML,CSS这些简单的页面搭建,而是希望前端成为更健壮,更体系化的东西。所以,Angular与Vue这类JS框架开始火了起来,且发展速度极快,在一年的

    2020/04/03
  • json常用的注解新手入门_json使用教程

    json注解:1、@JsonIgnoreProperties:此注解是类注解,作用是json序列化时将java bean中的一些属性忽略掉,序列化和反序列化都受影响。写法将此标签加在model 类的类名上 ,可以多个属性也可以单个属性//生成json时将name和age属性过滤@JsonIgnoreProperties({“name”},{“age”})pu

    2020/03/24
  • react-bootstrap基础教程_一款基于ReactJS对Bootstrap进行封装前端组件库

    react-bootstrap基础教程 官方网址:https://react-bootstrap.netlify.com GitHub:https://github.com/rea…

    2020/03/06
  • css的具体含义是什么?使用教程_含义基础知识入门

    CSS是Cascading Style Sheet的缩写,是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有

    2020/03/31
  • 与美女聊天软件:什么聊天软件女生多?小白常识_聊天菜鸟攻略

    一般男生想要在网上找人聊天的时候,都想知道哪些软件女生比较多。不然自己在网上聊天的大半天发现对面也是一个抠脚大汉,那得有多尴尬啊!现在的聊天软件有很多,男生女生的比例其实是不一样的,有些聊天软件就是女生会比较多。那么都是些什么软件呢? 社交软件上的小姐姐们,点击下载什么聊天软件女生多?1、探探探探app就是一款典型的女生多男生少的社交软件,在探探app上可

    2020/03/22
  • HTTP中的2XX状态码使用帮助_状态码入门攻略

    HTTP状态码分类1XX ——信息,服务器收到请求,需要请求者继续执行操作2XX——成功,操作被成功接收并处理3XX——重定向,需要进一步的操作以完成请求4XX——客户端错误,请求包含语法错误或者无法完成请求5XX——服务器错误,服务器在处理请求的过程中发生了错误2XX状态码状态码英文名称中文描述200OK请求成功,一般用于GET或者POST请求。201Cr

    2020/03/23
  • Semantic-UI基础入门一款对人类友好的HTML语言构建优雅响应式布局的开发框架。

    Semantic-UI基础入门 官方网址:http://www.semantic-ui.cn/ GitHub:https://github.com/semantic-org/sem…

    2020/03/05
  • 企业网站怎么才能防御DDOS***?菜鸟攻略_安全使用帮助

    昨天一个政府的站长告诉墨者安全,他想要做一个网络安全防护,因为网站设计到了支付这一块的业务,所以要做网络安全防护,想要实时监测,如果有***发生需要第一时间知道情况。墨者安全告诉他可以的,那今天就讲讲企业网站怎么才能防御DDOS***?DDoS***实际是基于传统的DoS***之上演化出来的一种更为高级的***方式。传统DoS***属于单一的一对一方式。DO

    2020/03/30
  • React Hooks 原理入门基础_组件小白攻略

    我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能?React 早期版本,类组件可以通过继承PureComponent来优化一些不必要的渲染,相对于函数组件,React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染,直接 16.6 出来的 React.memo函数。React 16.8 新出来

    2020/03/26
  • vue对象render函数的三种实现零基础入门_render基础入门

    import App from ‘./app.vue’ const root = document.createElement(‘div’);
    document.body.appendChild(root);第一种方式($createElement)://写法三:
    const rootVue = new Vue({ router: vueRouter,r

    2020/03/24
  • Vue 3.0 将从头开始重写!基础指南_vue小白常识

    在上周的 Vue.js 伦敦大会上,Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,不久前,尤雨溪在 medium 个人博客上发布了 Vue 3.0 的开发路线,我们不妨看看 Vue 3.0 将会有怎样的发展。兼容按照尤雨溪的说法,因为 Vue 3.0 是主要版本,所以会包含一些重大变更。不过,开发组会非常重视兼容性问题,他们也将尽快

    2020/04/03
  • 浅谈webpack优化入门指南_webpack入门基础教程

    由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少,脚手架基本上已经为我们做好了相关的开发准备,但是当我们想要做一些定制化的优化操作时,对webpack的优化也需要有一定的了解,否则无从下手,接

    2020/04/03
  • 为什么云端会不断泄漏数据?基础知识教程_数据入门基础

    虽然数据泄露的程度可能会有所不同,并且数据可能因内部威胁、黑客攻击和员工疏忽而丢失,但所有数据泄露都包含了可能会被盗窃者轻易读取的个人身份信息。而云端发生的数据泄露,影响就会放大了,动辄几亿用户数据遭到外泄,这给企业和用户带来了不可估量的严重后果。那么,为什么云端会不断泄露数据呢?Terry Sweenry 采访了安全界的几位大佬,从各方面剖析了云端不断泄露

    2020/03/24