专栏首页FEWYJavaScript立即执行函数的解释分析(2)—函数表达式与函数声明的区别

JavaScript立即执行函数的解释分析(2)—函数表达式与函数声明的区别

说明

上次我们聊了聊表达式与语句的区别,这次我们说说函数表达式与函数声明,上次虽然提到过这两点,但是并没有很详细的讲,这次要专门聊聊了!

函数表达式(函数定义表达式)

函数定义表达式定义一个JavaScript函数。表达式的值就是这个新定义的函数。 比如,像这样 var a=function (x){ console.log(x) }

函数声明

说函数声明,就要提到上次我们说过的声明语句了,声明语句用来声明新变量或定义新函数,var和function都是声明语句,它们声明或定义变量或函数。 像这样

var i;      //一个简单的变量
var j=2;    //一个带有初始值的变量
function f(j){ return j+1;} 	//函数声明语句定义函数(函数声明)

区别

js程序在正式执行之前,会将所有 var 声明的变量和 function 声明的函数,预读到所在作用域的顶部,var 声明只是将声明提前,赋值仍然保留在原位置,function 声明,会将函数名称和函数体都提前,这个过程也被叫做,“预解析”或者“预编译”。 代码

var a=function (){
	console.log("a");
}
function a(){
	console.log("b");	
}
a();

上面这段代码会输出 a,根据上面提到的概念,代码其实是这样执行的

var a;		//var 声明只是将声明提前,赋值仍然保留在原位置
function a(){		//function 声明,会将函数名称和函数体都提前
	console.log("b");
}
a=function(){
	console.log("a");
}
a();

所以,最后的结果就是 a 了,如果你对声明提前还是不太理解可以看这里 谈谈 JavaScript 中的 声明提前(hoisting) 好的我们继续说别的区别。

代码

var a=function a (){
	console.log(1);
}();
//这段代码会输出1   
function a (){
	console.log(1);
}
a();
//这段代码会输出1
function a (){
	console.log(1);
}();
//这段代码会报错,如图

也许你会奇怪,到底发什么了什么,还记得上次我们说的调用表达式吗? 调用表达式是一种调用(或者执行)函数或方法的语法表示。

f(0)     //f是一个函数表达式

函数在定义的时候是不执行的,要执行的话就要调用函数,就是用 函数表达式 +(),来调用,所以你明白了,第一段代码后面直接写(),是因为它本来就是函数表达式,后面写(),那自然就是调用了,而第二段代码,是函数声明,所以用了 函数名+()来调用,函数名在这就是函数表达式,但是最后一段代码报错了,因为它不是函数表达式,是函数声明,所以不能用直接加()的方式调用。

最后我们再说一点,先看代码

var a=1;
function b(){
	function a(){
	}
	console.log(a);
}
b();
console.log(a);
//最后输出什么

结果

最后会输出 函数a 和 1,可能有朋友会奇怪,函数a 为什么没有覆盖全局变量a,解释一下。

一条函数声明语句实际上声明了一个变量,并把一个函数对象赋值给它。 也就是说在函数b 中声明了一个变量 a,这个变量a,就是函数b中的一个局部变量,所以,它不会影响外面的全局变量a,但是要是改成下面这样就会影响了。

var a=1;
function b(){
	a=function (){
	}
	console.log(a); //输出一个函数
}
b();
console.log(a); //输出一个函数

结果

因为这样,在函数b中,没有声明a,但是给它赋值了,就相当于在全局对象中创建一个a,但是全局对象中已经有a了,所以会覆盖原来a的值,所以最后会输出两次函数

总结

简单说,函数表达式与函数声明的区别主要是两个方面,一方面是声明提前的区别,虽然都提前,但函数表达式只是将声明提前,赋值仍然保留在原位置,函数声明,会将函数名称和函数体都提前,另一方面就是调用的区别,函数表达式后面可以直接写()来调用函数,而函数声明不可以。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript立即执行函数的解释分析(4)—总结篇

    这次来对立即执行函数 Immediately-Invoked Function Expression (IIFE) ,做最后的总结,会把前面几篇提到的内容做一个...

    FEWY
  • 谈谈 JavaScript 中的 声明提前(hoisting)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn...

    FEWY
  • JavaScript立即执行函数的解释分析(1)—表达式与语句的区别

    也许你知道,这是立即执行函数,但为什么这样能立即执行呢?也许是该好好聊聊了!但是,我们先来聊点其他的。

    FEWY
  • 函数(function)的前世今生

    函数就是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。

    江米小枣
  • 九、函数与函数式编程

    纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学时最容易忽视的知识点。可能会有很多人、很多文章告诉你面向对象很重要,原型很重要,可是却很...

    用户6901603
  • JAVASCRIPT FUNCTIONS 详解

    本文是@堂主 对《Pro JavaScript with Mootools》一书的第二章函数部分知识点讲解的翻译。该书的作者 Mark Joseph Obcen...

    政采云前端团队
  • JavaScript 函数的定义

    JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句。

    WEBING
  • 《JavaScript 模式》读书笔记(4)— 函数5

    这部分我们主要讨论Curry化和部分函数应用的内容。但是在深入讨论之前,我们需要先了解一下函数应用的含义。

    zaking
  • 一个合格的中级前端工程师要掌握的JavaScript 技巧

    使用 Object.prototype.toString 配合闭包,通过传入不同的判断类型来返回不同的判断函数,一行代码,简洁优雅灵活(注意传入 type 参数...

    Nealyang
  • 灵活使用JS函数声明与函数表达式要弄清哪两点?

    要弄清函数声明和函数表达式的区别,首先要明白在JS中声明和表达式的行为存在十分微妙而又十分重要的差别。

    前端_AWhile

扫码关注云+社区

领取腾讯云代金券