在 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;
}