js函数声明和函数表达式的理解

转载于 2025-10-23 17:00:02 发布 · 12 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/IwishIcould/p/19161085

文章标签：

#it

什么是函数声明

以 function 关键字开头，必须指定函数名（如 function greet() {}），且不能作为其他语句的一部分。‌‌

函数声明会被提升

在JS中,函数声明会被提升，这意味着函数可以在声明之前被调用。
当你使用函数声明的方式定义函数: function resizeFn() {...}
整个函数声明会被提升到作用域的顶部。
这意味着在整个作用域内，无论函数在何处声明，都可以在声明前调用。

函数声明会被提升的代码解释

// 因为是函数声明，所以可以在函数声明之前调用。可以正常调用
resizeFn(); 

// 因为这是一个函数声明。
function resizeFn() {
  // 函数体
}

函数表达式

‌函数表达式‌：将函数赋值给变量，函数可匿名或具名
如 const sayHello = function() {}
或 const sayHello = function named() {}
函数表达式适用于赋值、参数传递等场景。‌‌
函数表达式‌：仅变量名被提升，函数体不会提升。
函数表达式：必须先定义后使用(也就是说在使用[调用]前，必须先定义)

函数表达式:必须先定义后使用

sayHello()
const sayHello = function() {}

报错：Uncaught ReferenceError: Cannot access 'sayHello' before initialization

总结：看了上面的函数声明和函数表达式，也许你对函数声明和函数表达式有一定的理解了。
我们来看下面这个，函数表达式一定必须是：先定义后使用嘛？

函数表达式一定是先定义后使用嘛？

mounted () {
  this.myChart = echarts.init(this.$refs.chartContainer)
  const chartContainerElement = this.$refs.chartContainer
  const resizeObserver = new ResizeObserver(() => {
    // 先使用了
    resizeFn()
  })
  // 后定义了
  const resizeFn = this._.debounce(() => {
    this.myChart && this.myChart.resize()
  }, 500)

  chartContainerElement && resizeObserver.observe(chartContainerElement)
  this.$once('hook:beforeDestroy', () => {
    resizeObserver.disconnect()
  })
}

我们的函数表达式 const resizeFn。
目前是：先使用后定义，那么在运行的时候会报错吗？
答案是：不会的。
因为：这里有一个重要的执行时机差。实际上在调用前，已经被定义了。
我们被代码的先后顺序给误导了。
并不是说：定义函数表达式的代码必须要写在函数调用之前。

异步执行时机

const resizeObserver = new ResizeObserver(() => {
  resizeFn()  // 这里不会立即执行！
})

关键点：ResizeObserver 的回调函数不是立即执行的，而是在元素尺寸变化时异步触发的。

代码执行顺序

/* by 01022.hk - online tools website : 01022.hk/zh/generatebchwallets.html */
// 步骤1：定义 ResizeObserver的 回调（此时只是定义，不执行）
const resizeObserver = new ResizeObserver(() => {
  resizeFn()  // 此时 resizeFn 还未定义，但不会报错，因为函数没有立即调用
})

// 步骤2：定义  resizeFn （ 在执行任何 resize 事件前已经定义完成）
const resizeFn = this._.debounce(() => {
  this.echart_alarm && this.echart_alarm.resize()
}, 500)

// 步骤3：开始观察（此时 resizeFn 已经存在）
chartContainerElement && resizeObserver.observe(chartContainerElement)

时间线说明

时间点:
t0: 定义 ResizeObserver 回调函数
t1: 定义 resizeFn 函数表达式  
t2: 开始观察元素尺寸变化
t3: 用户操作导致元素尺寸变化（此时才真正调用 resizeFn）

尾声

如果你看了有收获，请给我点一个推荐
如果给我打赏了，那保证你未来大富大贵

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。