javascript - 同名变量声明

Question

如果我有以下代码:

var greeting = 'Hola';

(function(spanishGreeting, name){
    var spanishGreeting = 'Como estas!';
    spanishGreeting = 'HOLA!'
    console.log(spanishGreeting);
}(greeting,'John'));

console.log(greeting);

你能解释一下我对上面代码的理解是否正确吗？ 所以首先在 IIFE 中:

var spanishGreeting = 'HOLA!!'; 

该行代码创建了一个与传递到 IIFE 的参数同名的全新变量(这个新变量声明与传递到 IIFE 的参数 spanishGreeting 无关，对吗？)。

还有:

spanishGreeting = 'Como estas!'

将在 IIFE 的当前执行上下文中查找 spanishGreeting 变量。现在的问题是当前执行堆栈中有两个 spanishGreeting 变量。 IIFE 参数中的那个和我刚刚创建的那个:

var spanishGreeting = 'HOLA!!';

JS 引擎如何知道使用哪一个？

Answer 1

That line of code creates a whole new variable with the same name as the parameter

不，实际上不是。只有一个作用域(函数作用域)具有一个名称为 spanishGreeting 的变量(以及第二个名为 name 的变量)。

var 被忽略，它不会在参数已经引入它之后创建第二个变量。

当您调用该函数时，该变量首先填充参数 ('Hola')，然后用值 'Como estas!' 覆盖它，然后使用值 'HOLA!'。

---

但是，在某些情况下，您可以拥有两个同名的不同变量 - 当它们位于不同的范围内时:

var greeting = "Hello outer!";
function greet() {
    var greeting = "Hello inner!";
    console.log(greeting);
}
greet();

How does the JS engine know which one to use?

在这里，JS 引擎只是在当前范围内使用 local 变量(可以通过 var 声明或作为参数，没有区别) .据说内部变量遮蔽外部变量。

---

顺便说一句，如果你使用 ES6 let keyword声明你的变量，如果你试图重新声明一个已经定义的变量(在相同的范围内)，引擎将抛出一个错误。