vue3页面空白-普通函数和箭头函数提升的不同

在 JavaScript 中,普通函数(即使用 function 关键字定义的函数)和箭头函数(使用 () 和 => 定义的函数)在作用域和提升(hoisting)行为上有不同的表现。

1. 普通函数(Function Declarations) 普通函数声明会被提升(hoisted),也就是说,它们可以在声明之前被调用。这是因为函数声明会被提升到当前作用域的顶部。例如:

javascript 复制代码
console.log(foo()); // 输出 "Hello"

function foo() {
  return "Hello";
}

在这个例子中,尽管 foo 函数是在调用之后才声明的,但它仍然可以正常工作,因为函数声明会被提升。

2. 箭头函数和其他函数表达式 箭头函数和其他函数表达式(如使用 var, let, const 定义的函数)不会被提升。这意味着它们必须在声明之后才能被调用。例如:

javascript 复制代码
console.log(bar()); // 报错:TypeError: bar is not a function

const bar = () => {
  return "World";
};

在这个例子中,如果尝试在 bar 函数声明之前调用它,会导致错误,因为 bar 在声明之前只是一个未定义的标识符。


错例

javascript 复制代码
watchEffect(() => {
  if(calculateWinner(squareValues.value)){
    status.value = 'Winner: ' + calculateWinner(squareValues.value) + ' ! ';
  }
  else if(!squareValues.value.filter(item => item === '').length){
    status.value = 'Draw !';
  }
  else{
    status.value = 'Next player is ' + (xIsNext.value ? 'X' : 'O');
  }
});

const calculateWinner = (squares) => {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  for(let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if(squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }

  return null;
}
相关推荐
爱看书的小沐8 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc2 天前
Vue3双向数据绑定v-model
前端·vue
知识分享小能手3 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
叫兽~~3 天前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
岁岁岁平安4 天前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
硅谷工具人5 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin6 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
知识分享小能手6 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发