函数的自执行,变量提升和函数提升

其实之前虽然刚开始学习JavaScript的时候经常看到function  add(){}、var add=function(){}、function(){}之类的这种写法,但是具体是什么叫什么却没有去考虑过这个问题……

function add(){}这种写法叫做函数声明

var add=function(){}这种写法叫做函数表达式

function(){}这种是匿名函数

一、函数的自执行

那么有没有办法让它们不用通过我们的调用比如

function add(){};
add();

就可以自我执行呢?

我们来试试看这三种方法

//函数表达式自执行尝试
var add=function(x,y){
console.log(x y);
}(5,6);     //结果:11(正确)
//函数声明自执行尝试
function add(x,y){
console.log(x y);
}(5,6);    //结果:无法执行,也没有抛出错误
//匿名函数自执行尝试
function(){
console.log(arguments[0] arguments[1]);
}(5,6);     //结果:这个的问题就大了,抛出语法错误Uncaught SyntaxError: Unexpected token (

函数表达式后面加括号可以立即执行函数,然而函数声明却不可以!!

很奇怪地,匿名函数也是函数表达式,但是它为什么会抛出语法错误呢?这是因为匿名函数虽然属于函数表达式,但是很明显它没有赋值操作,JavaScript解析引擎会把它当做函数声明,会跟你要一个函数名,但是它是匿名函数,肯定没有名字,JavaScript混了,直接给你个错误让你反省一下。

那要怎么解决匿名函数自执行这个问题?其实很简单,只要告诉JavaScript解析器匿名函数不是函数声明就好了。

//加号
function(){
console.log(arguments[0] arguments[1]);
}(5,6);
//减号
-function(){
console.log(arguments[0] arguments[1]);
}(5,6);
//感叹号
!function(){
console.log(arguments[0] arguments[1]);
}(5,6);
//括号
(function(){
console.log(arguments[0] arguments[1]);
})(5,6);
(function(){
console.log(arguments[0] arguments[1]);
}(5,6));

接下来就是解决函数声明自执行的问题了,其实方法跟匿名函数自执行的方法是一样的,加号,减号,感叹号,括号,都可以解决

!function add(x,y){
console.log(x y);
}(5,6);
 function add(x,y){
console.log(x y);
}(5,6);
-function add(x,y){
console.log(x y);
}(5,6);
(function add(x,y){
console.log(x y);
})(5,6);
(function add(x,y){
console.log(x y);
}(5,6));

二、变量提升、函数提升

函数声明才会提升,函数表达式是属于变量提升

我们先来看一下下面这段代码的结果是什么

console.log(a);
console.log(b);
console.log(c);
var a=1;
function b(){
return 2;
}
var c=function(){
return 3;
}

结果

console.log(c)的结果跟console.log(a)是一样的,说明函数表达式是属于变量提升的。这样证明还是有点草率,我们再来看看下面的代码

console.log(b());
console.log(c());
function b(){
return 2;
}
var c=function(){
return 3;
}

结果

结果很明显了,函数c只是提升了变量名c而已,函数声明才会提升!

那么变量的提升和函数声明的提升哪个提升的优先级比较高呢?

console.log(b);
console.log(b());
var b=1;
function b(){
return 2;
}

结果

结果显示函数声明提升的优先级比变量提升还要高。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python之机器学习-sklearn生成随机数据

sklearn-生成随机数据 import numpy as np import pandas as pd import matplotlib.pyplot as plt from matplotlib.font_manager import FontProperties from sklearn import datasets %matplotlib inline font FontProperties(fname/Library/Fonts/Heiti.ttc) 多标签分类数据…

外汇游乐场

介绍 F X Playground是基于JavaFX的原型制作工具或实时编辑器,它消除了编译Java代码的步骤。 这个概念并不是什么新鲜事物,例如在网络世界中,有许多HTML5 游乐场提供在线编辑器,使开发人员可以快速原型化或尝试各种JavaScript库。…

轻轻松松看懂Spring AOP源码

轻轻松松看懂Spring AOP源码 https://baijiahao.baidu.com/s?id1596466083334197175&wfrspider&forpc 如果对spring的核心容器和JDK动态代理、CGLIB有所了解,接下来再看spring AOP源码会比较容易。文中所有代码片段截图对应的spring版本是5.0。 本文内容曾…

2015年,Web 进入移动时代

最近 Morgan Stanley 发布了一份87页的报告,对 Internet 的未来趋势进行预测,报告显示,移动 Web 目前发展迅猛,包括 Kindle, iPhone, 智能手机,平板电脑,GPS 设备,游戏机在内的无线设备呈爆炸式…

vue2.0移除或更改的一些东西

一、vue2.0移除了$index和$key 虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把…

Java Keystore教程

目录 1.简介 2. SSL及其工作方式 3.私钥 4.公开证书 5.根证书 6.证书颁发机构 7.证书链 8.使用Java keytool的密钥库 9.密钥库命令 10.在Apache Tomcat上使用密钥库和自签名证书配置SSL 1.简介 我们谁没有去ebay,亚马逊买东西或他的个人银行帐户来检查。 您是否认为…

spring AOP源码分析(一)

spring AOP源码分析(一) 对于springAOP的源码分析,我打算分三部分来讲解:1.配置文件的解析,解析为BeanDefination和其他信息然后注册到BeanFactory中;2.为目标对象配置增强行为以及代理对象的生成&#xff…

attr和prop的区别以及在企业开发中应该如何抉择

attr和prop有很多相同的地方,比如都可以操作标签的属性节点,而且获取的时候都只可以获取到相同节点的第一个,例如这样: $(span).attr(class);和$(span).prop(class);都只能返回第一个span的class 同理做属性的修改和添加,删除也都…

从n个数里面找最大的两个数理论最少需要比较

答案是:nlogn-2 过程是这样的:甲乙比甲胜出,丙丁比丙胜出,最后甲丙比较,甲胜出。。。容易得出找出最大数为n-1次。现在开始找出第二大的数字:明显,第二大的数字,一定和甲进行过比较。…

Java抽象– ULTIMATE教程(PDF下载)

编者注 :在本文中,我们提供了Java教程中的全面抽象。 抽象发生在类级别的设计中,目的是隐藏实现API /设计/系统提供的功能的方式的实现复杂性,从某种意义上讲简化了访问底层实现的“接口”。 此过程可以在越来越“更高”的抽象层次…

用递归方式判断字符串是否是回文

题目要求:使用递归方式判断某个字串是否是回文( palindrome )回文”是指正着读、反着读都一样的句子。比如“我是谁是我” 设计思想:首先能实现可输出任意字符串,然后定义返回值数据类型,判断递归结束条件的…

Vue.js 相关知识(动画)

1. 简介 Vue 在插入、更新或移除 DOM 时&#xff0c;提供多种不同方式的过渡效果&#xff0c;并提供 transition 组件来实现动画效果&#xff08;用 transition 组件将需执行过渡效果的元素包裹&#xff09; 语法&#xff1a;<transition name””>元素或组件&#xff…

三个水桶等分8升水的问题

目录 智力题目答案问题分析程序代码&#xff08;PHP&#xff09;运行结果小结推荐阅读智力题目 有三个容积分别为3升、5升、8升的水桶&#xff0c;其中容积为8升的水桶中装满了水&#xff0c;容积为3升和容积为5升的水桶都是空的。三个水桶都没有刻度&#xff0c;现在需要将大水…

使用拦截器分析Java EE应用程序的性能下降/提高

在开发具有某些性能要求的Java EE应用程序时&#xff0c;必须在每个发行版之前验证是否满足这些要求。 您可能会想到&#xff0c;哈德森的一项工作每天晚上在某些特定的硬件平台上执行一系列测试测量。 您可以检查已实现的时间并将它们与给定的要求进行比较。 如果测量值与要求…

子组件上下结构布局自适应父组件宽度高度

1、父级页面 <template><div><div class"parentDiv"><!-- gys-org-navigator 在这里是全局注册组件 --><gys-org-navigator ref"orgNavigator" :org-tree"orgTree" :org-id"orgId" :org-type"orgType…

狸猫换太子:动态替换WinCE的原生驱动!

////TITLE:// 狸猫换太子&#xff1a;动态替换WinCE的原生驱动&#xff01;//AUTHOR:// norains//DATE:// Friday 23-April-2010//Environment:// Windows CE 5.0 TCC7901// 大家应该都知道&#xff0c;WinCE系统的驱动是可以非常方便地动态加载和卸载的&#xff…

mysql批量更新

由于mysql没有top函数&#xff0c;limit也不支持子查询&#xff0c;所以批量修改、查询就显得比较麻烦&#xff0c; 但是我还是想到了一个办法&#xff1b; 即创建一个临时表&#xff0c;用于批量操作&#xff1b; 详细如下&#xff1a; 1 create TEMPORARY TABLE test(cardId …

可缺省的CSS布局——张鑫旭

一、技术不难、意识很难 有些东西的东西的实现&#xff0c;难的不是原料、技术&#xff1b;而是想不到&#xff0c;或者说意识不到。 例如下面这个简单而又神奇的魔术&#xff1a; 是吧。搞通了&#xff0c;才发现&#xff0c;哦~原来这么回事&#xff0c;很简单的嘛&#x…

使用Spring AOP,自定义注释和反射为您的应用审核基础架构

下一篇文章将演示如何使用Spring AOP和注释编写简单的审计。 审核机制将是干净&#xff0c;高效且易于维护的&#xff08;和Kewwl&#xff01;&#xff09;。 我将在用户管理系统上演示我的示例&#xff08;假设您对反射和AOP具有一般知识&#xff09;。 我们从简单的数据库表…

经过几天的Scala回归Java的10个最烦人的事情

因此&#xff0c;我正在尝试使用Scala&#xff0c;因为我想编写一个解析器&#xff0c;而Scala Parsers API似乎非常合适。 毕竟&#xff0c;我可以在Scala中实现解析器并将其包装在Java接口后面&#xff0c;因此除了附加的运行时依赖关系之外&#xff0c;不应该存在任何互操作…