Question

我想了解

function test() {
  return 'foo';
}

console.log(test());

test = function() {
  return 'bar';
}

console.log(test());

function test(a, b) {
  return 'baz';
}

console.log(test());
console.log(test(true));
console.log(test(1, 2));

上面的控制台代码

巴兹
酒吧
酒吧
酒吧
酒吧

但是作为JavaScript，我期望的是单线程语言和函数重载概念

foo
酒吧
酒吧
baz
巴兹

谁能解释为什么会这样？

Answer 1

是的。我认为发生了以下情况：

用function test(...) { ... }声明的函数被提升到当前作用域的顶部。因此，使用该语法的函数的两个定义都被提升到顶部，但是定义的第二个覆盖了第一个，因此覆盖了结果“ baz”。
函数表达式未悬挂，例如test = function (...) {...}。因此，当您将标识符test重新分配给该函数表达式时，它将成为脚本其余部分的test的值。

正如已经指出的那样，您不能在JavaScript中重载var或函数。您可以使用新值覆盖var，这是您在示例中所做的。令人困惑的是JavaScript提升的工作方式。

如果要避免吊装，请使用let myFn = function (...) { ... }。

据我了解，这是一行一行的内容：

// `test` defined with func declaration, hoisted to top
function test() {
  return 'foo';
}

console.log(test);
console.log(test());

// `test` overwritten with function expression, hoisting has already occurred,
// `test` identifier will have this value for remainder of script
test = function() {
  return 'bar';
}

console.log(test);
console.log(test());

// `test` overwritten with new func declaration, hoisted to top, but after first declaration
function test(a, b) {
  return 'baz';
}

console.log(test);
console.log(test());
console.log(test(true));
console.log(test(1, 2));

Answer 2

逐步：

function test() {
  return 'foo';
}

这是一个函数声明。 test变量在运行时被解释时声明。

test = function() {
  return 'bar';
}

这是一个函数表达式。执行此行时，test变量将被覆盖。

function test(a, b) {
  return 'baz';
}

这是另一个函数声明。再次在运行时之前，test变量将被覆盖。

这就是为什么永远不会调用测试功能的第一个版本的原因。因为第二个函数声明在运行时之前覆盖了它。

More about function declaration vs. function expressions.

Answer 3

JavaScript函数不能有重载，它们只会被覆盖。为了获得相同的效果，您需要区分方法内部的不同重载。

function test(a, b) {
  if(b)
     return 'baz';
  return 'foo';
}

JavaScript函数重载/覆盖

3 个答案: