为什么我可以在 if 语句中重新声明与函数参数同名的变量？

Question

下面是我在尝试实现 Jquery CSS 函数版本时遇到的解决方案的简单版本。

function CSS(prop, value) {
   ...

        if (value === undefined) {
          // No matching elements.
          if (element == null) {
            return undefined;
          }

          const value = element.style[prop]; // <-- Why is this allowed?
          return value === "" ? undefined : value;
        }

   ...
}

我注意到函数参数

value

被重新声明，并自动对解决方案感到惊讶。我把它放入代码沙箱中并且它起作用了。我检查了 docs 并发现了我所期望的：

“JavaScript 中不允许使用 let 在同一函数或块作用域内重新声明同一变量。”

现在指定了

let

但即使更改为 仍然有效。

如果我将声明从 if 语句中取出，我会收到预期的重复错误，因此这显然与 if 语句的块作用域有关。但是，因为它继承了包含同名变量的函数范围之外的函数范围，所以redeclartion仍然是非法的，不是吗？

我错过了什么？

Answer 1

这是有效的，因为 let 和 const 确实允许您在嵌套代码块中重新声明变量/常量。它们被视为不同的变量，因此一旦退出 if 语句，

value

将再次引用函数参数及其具有的任何值。重新声明的变量将超出范围。

查看代码的修改版本：

function CSS(prop, value) {
    const element = document.getElementById('#someElement');

    // assigning i here
    let i = 1;
    if(value === undefined) {
        // this works
        let i = 2;

        if (element == null) {
            return undefined;
        }

        const value = element.style[prop];
        return value === "" ? undefined : value;
    } else {
        // this still works
        const i = 3;
    }

    // i === 1 here
    console.log(i);
}

注意

i

在最后如何等于 1，因为它唯一一次被设置（在该范围内）是在 if 语句之前。

显然，这是奇怪的行为，它会使代码难以阅读，所以你应该避免它。