JS中的函数定义之函数声明与函数表达式

我们一般见到的函数可能是这样的

function love(name){
  console.log(`爱你，${name}`)
}
love('chuichui');

你可能还见过这样的函数

var love = function(name){
   console.log(`爱你，${name}`)
}
love('chuichui');

其实，这是函数定义的两种方式，一种是函数声明，另一种是函数表达式
那他们有什么不同呢？

函数声明和函数表达式

要搞清楚他两的差别，我们先需要研究一下浏览器在如何处理代码的

var dream = true
var speak = function(){
    console.log('好像大声说：')
}
function love(name){
   console.log(`爱你，${name}`)
}

if(dream){
  speak()
  love('chuichui')
}

下面我们还原一下浏览器分析和执行上述代码过程

1. 在分析阶段，会从上到下扫描代码，在其中查找函数声明，这里找到了love函数
2. 浏览器创建love函数，并将得到的函数引用赋给与函数同名的变量
3. 等处理完所有的函数声明之后，浏览器会回头开始执行代码
4. 当看到speak时，首先会创建一个名为speak的变量，然后看到右边是一个函数表达式，这时候浏览器会将这个函数存储起来，并将这个函数的引用赋给speak变量

在这个过程过程你可能发现一些不同，总结一下：

• 使用函数声明时，函数在代码执行前创建；使用函数表达式时，函数在运行阶段创建
• 使用函数声明时，会创建一个与函数同名的变量，并让它指向函数；使用函数表达式时，一般不需要给函数指定名称

这些不同会带来什么样的影响呢？
因为浏览器在代码执行前查找一遍函数声明，所以使用函数声明定义的函数，不需要关心函数定义位置，在任何地方都可以调用；而函数表达式则是在代码执行是按照顺序定义的，所以在函数定义之前调用会报错

love('chuichui')
function love(name){
   console.log(`爱你，${name}`)
}
// ✅爱你，chuichui

speak()
var speak = function(){
    console.log('好像大声说：')
}
// ❌speak is not a function

最后 🙌

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~