javascript - ES6 - 在闭包内部定义的变量与父作用域中的变量同名会产生未定义

Question

我花了几个小时看这段代码:

1:   const { services, lists } = this.props;
2: 
3:   const List = _.map(lists.list, (list) => {
4:     const services = _.filter(services.list, (service) => lists.services.indexOf(service.id) > -1);
5:     ...
120:   ...
121: });

在第 4 行，我收到一个错误:

Cannot read property list of undefined

在第 4 行，显然 services 正在引用属性列表。而且，它是未定义的。但是，在第 1 行，它被定义为可以通过记录它的值来检查。

我知道 services 的值在闭包中变成了 undefined 因为 JS 有它的方法首先找到变量声明并在执行给定函数之前将 undefined 赋值给它们。我担心的是，考虑到它是使用 Babel 预编译的，它应该是给定代码段的行为吗？

Answer 1

编辑:我意识到这是您的实际问题:

My concern is that, should it be the behavior with the given piece of code considering it's being pre-compiled using Babel?

答案是否定的，Babel 的工作是将代码转换成旧的等价物，这里的等价物是 var 语句。您拥有的 const 语句在语法上完全有效，但注定会在语义上引发错误(注意:如果您在支持 const 的环境中实际执行了该 const 语句，它会在您尝试访问 service 的 list 属性之前抛出错误。

---

原答案:

如果您在使用它的同一行中定义一个变量，那么在该语句第一次尝试访问它时它始终是未定义的，即使在外部作用域中有一个同名的变量也是如此:

const a = 2;

function f() {
    const a = a + 1;    // error
    console.log(a);    
}

f();

解决方案:不要在内部作用域中重复使用变量名。只需为您的变量想出新名称即可:

const filteredServices = _.filter(services.list, (service) => lists.services.indexOf(service.id) > -1);