为什么说 calcAverage 不是 function，而它是

Question

我创建了一个简单的 function 来计算 3 个数字的平均值：

let calcAverage = (v1,v2,v3) =>{

calcAverage = v1+v2+v3 / 3;

return calcAverage
}

const d1 = calcAverage(44, 23,71)
const k1 = calcAverage(44, 23,71)
console.log(d1)

如果你注释掉： const k1 = calcAverage(44, 23,71)那么你会注意到const d1 = calcAverage(44, 23,71)有效，但为什么它说'Uncaught TypeError: calcAverage is not a function for这行代码： const k1 = calcAverage(44, 23,71) ? 这对我来说没有任何意义。 我如何使它们都起作用？ 为什么它甚至说 calcAverage 不是 function 我首先？

Answer 1

因为您在这一行中重新分配calcAverage

calcAverage = v1+v2+v3 / 3;

这使得calcAverage成为一个number而不是 function

你为什么不立即返回这个计算

return v1+v2+v3 / 3;

Answer 2

第一次调用calcAverage时，它确实是一个 function。但是，您在 function 本身内将其覆盖为一个number ：

calcAverage = v1+v2+v3 / 3;

只需更改 function 中的变量名称即可使其按预期工作：

const calcAverage = (v1,v2,v3) =>{

    const result = v1+v2+v3 / 3; 

    return result;
}

const d1 = calcAverage(44, 23,71);
const k1 = calcAverage(44, 23,71);
console.log(d1);

---

更新：

要清楚地看到问题，您可以注销每个 function 调用的calcAverage类型：

 let calcAverage = (v1,v2,v3) =>{ calcAverage = v1+v2+v3 / 3; return calcAverage; } console.log("Type before first call: ", typeof calcAverage); const d1 = calcAverage(44, 23,71); console.log("Type before second call: ", typeof calcAverage); const k1 = calcAverage(44, 23,71);

顺便说一下，这很好地展示了使用const相对于使用let作为实际常量的优势。 如果您将calcAverage声明为const ，则不会遇到此问题。

Answer 3

我在 function 中发现了一个与 function 名称相同的变量。 因此，当您第二次调用 calAverage 时，它不是 function，而是某种计算的结果。 我还把 function 作为常数

 const calcAverage = (v1, v2, v3) => { let calcAverageVal = v1 + v2 + v3 / 3 return calcAverageVal } const d1 = calcAverage(44, 23, 71) const k1 = calcAverage(44, 23, 71) console.log(d1)

Answer 4

此问题的解决方案是使用不同的变量名来保存 calcAverage 箭头 function 内的计算值。

let calcAverage = (v1,v2,v3) =>{

   let calcValue = (v1+v2+v3) / 3;
   // it is recommended you bracket your numerator so as not to confuse the calcuation
   // because leaving it as v1+v2+v3 / 3 will solve the maths as v1+v2+(v3/3)

   return calcValue;
}

const d1 = calcAverage(44, 23,71);
const k1 = calcAverage(44, 23,71);
console.log(d1)

至于我，我确实建议你在声明箭头 function 时使用const 。它有助于使 function 不可操作

Answer 5

都是关于 scope 的依赖

1. 第一次将calcAverage定义为 function
2. 然后在这个 function 中你将这个元素重新定义为一个数字

=> 在第一次通话时：它是一个 function
=> 在第二次通话时：它不再是 function（它是一个数字）

您想随时避免此类问题，您必须始终声明所有变量

并且还建议初学者在严格模式下编写代码（'use strict'; directive），这可以帮助你避免这种错误

示例代码：

 'use strict'; // on first line, for all the code let calcAverage = (v1, v2, v3) => { let calcAverage = v1 + v2 + v3 / 3; // define a 'new' locale variable //╙╨╨─────────────────────────────────// within the scope of this function return calcAverage } const d1 = calcAverage(44, 23, 71) const k1 = calcAverage(40, 23, 71) console.log(d1) // 90.666... console.log(k1) // 86.666...