2026/5/26 8:35:26
网站建设
项目流程
响应式网页设计网站建设,阿里巴巴怎么做企业网站,建设银行网站为什么进不去,吉林省建设厅网站查询在JS中,函数声明会被提升#xff0c;这意味着函数可以在声明之前被调用。当你使用函数声明的方式定义函数: function resizeFn() {...}整个函数声明会被提升到作用域的顶部。这意味着在整个作用域内#xff0c;无论函数在何处声明#xff0c;都可以在声明前调用。函数声明会…在JS中,函数声明会被提升这意味着函数可以在声明之前被调用。当你使用函数声明的方式定义函数: function resizeFn() {...}整个函数声明会被提升到作用域的顶部。这意味着在整个作用域内无论函数在何处声明都可以在声明前调用。函数声明会被提升的代码解释// 因为是函数声明所以可以在函数声明之前调用。可以正常调用resizeFn();// 因为这是一个函数声明。function resizeFn() {// 函数体}函数表达式函数表达式将函数赋值给变量函数可匿名或具名如 const sayHello function() {}或 const sayHello function named() {}函数表达式适用于赋值、参数传递等场景。函数表达式仅变量名被提升函数体不会提升。函数表达式必须先定义后使用(也就是说在使用[调用]前必须先定义)函数表达式:必须先定义后使用sayHello()const sayHello function() {}image报错Uncaught ReferenceError: Cannot access sayHello before initialization总结看了上面的函数声明和函数表达式也许你对函数声明和函数表达式有一定的理解了。我们来看下面这个函数表达式一定必须是先定义后使用嘛函数表达式一定是先定义后使用嘛mounted () {this.myChart echarts.init(this.$refs.chartContainer)const chartContainerElement this.$refs.chartContainerconst 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 的回调函数不是立即执行的而是在元素尺寸变化时异步触发的。代码执行顺序// 步骤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尾声如果你看了有收获请给我点一个推荐如果给我打赏了那保证你未来大富大贵