javascript函数声明和函数表达式的区别分析

通常，用js编写函数时，用函数fn () {}的常规方式来声明函数。阅读一些优秀的插件时，不禁会看到var fn=function () {}的创建。它们之间有什么区别？今天本着打破砂锅问到底的精神，我们来谈谈这个引人入胜的函数声明。

函数声明

函数声明的示例代码

复制代码如下： function fn(){ console . log(' fn function execution . ');//代码.}

这样，我们声明了一个名为fn的函数。这里有一个想法。你认为在这个函数上面调用它会被执行吗？还是会报错？

复制代码如下： fn()；//调用我们声明的fn函数fn () {console.log('fn函数执行.')之前；//代码.}

控制台输出结果：

是的，此时可以调用fn函数。以下是原因总结。

总结：

1:此时fn函数是变量的结果，默认存储在全局上下文的变量中(可以通过window验证。函数名)

2:这个方法是一个函数声明，在全局上下文阶段创建，在代码执行阶段可用。PS: JavaScript每次进入一个方法时都会初始化上下文环境(从全局到局部)

3:它可以影响变量对象(只有存储在上下文中的变量)

函数表达式

函数表达式示例代码

复制的代码如下： VARFN=function(){ console . log(' fn function[expression]声明执行.')//代码.}

这样，我们声明了一个匿名函数，并将其引用指向变量fn？

在表达式声明的函数的上方和下方再次调用，查看控制台的输出。

复制的代码如下：//为了清楚地看到控制台的输出，我们在每次调用前后都做了标记，以提高可读性。Console.log('调用在.之前开始');fn()；Console.log('呼叫在.之前结束');var fn=function(){ console . log(' fn function[expression]声明执行.')//代码.}console.log('呼叫在.之后开始');fn()；Console.log('调用开始于.');

控制台打印结果：

可以看到，代码第一次调用fn()函数时，提示：fn不是函数(fn不是方法)，遇到错误停止运行。

这说明第一次调用fn()时，var fn变量并不作为全局对象的属性存在，fn引用的匿名函数上下文也没有初始化，所以在他之前调用失败。

复制代码如下：//现在注释掉前面的调用逻辑，然后查看控制台输出//console . log(‘调用在.之前开始’);//fn()；//console.log('调用在.之前结束');var fn=function(){ console . log(' fn function[expression]声明执行.')//代码.} console.log('呼叫在.之后开始');fn()；//在表达式后调用console.log在.后调用start’);

控制台打印结果：

可见在表达式函数之后调用是可以的，来总结一下为什么？

总结：

1:首先，变量本身不是作为函数存在的，而是对匿名函数的引用(值类型不属于引用)

2.在代码执行阶段，初始化全局上下文时，它不作为全局属性存在，所以不会造成变量对象的污染

3.这种类型的声明通常在插件开发中很常见，也可以用作闭包中回调函数的调用

因此，函数fn () {}不等于var fn=function () {}，两者有本质区别。

以上就是本文的全部内容。思路很清晰，对比很清晰。这是一篇非常好的文章。我的朋友们必须仔细研究它