试图更好地理解“可变阴影”[重复]

Question

我知道这是一个全局变量（例如函数内部的原始变量）（局部变量）的问题。全局变量不会被局部变量覆盖。 喜欢：

let a = 10;
function increase1(a){ 
a++; }
increase1(a);
console.log('a = ',a);

所以这行不通。它给了我们 a = 10 下面的代码有效，它给了我们a = 11：

let a = 10;
function increase2(){
a++;}
increase2(a);
console.log('a = ',a);

因为它是一样的：

let a = 10;
a++;
console.log('a = ',a);

但为什么这与 increase1 的行为方式相同？

let a = 10;
function increase3(x){ 
x++; }
increase3(a);
console.log('a = ',a);

为什么当我尝试这个时，我得到“undefined”？

console.log('a = ',increase3(a));

谢谢。

Answer 1

首先，您需要了解这里有 2 个作用域，一个是全局的，另一个是功能性的。 将作用域想象成一个对象，其中定义的每个变量都作为属性附加到该对象。这里函数作用域嵌套在全局范围内。

现在变量查找从运行范围（上下文）开始。如果那里不存在变量，它将继续查看外部范围（而不是内部），直到找到变量或到达全局范围

现在案例1：

let a = 10;             //[[globalScope]] = {a: 10}
function increase1(a){  //[[increase1Scope]] = {a : 10} as parameters are local variable to function
a++; }                  //[[increase1Scope]] = {a: 11}
increase1(a);           //here u have passed 10 as a **value**  to increase1 param a(you havent passed global variable **"a"**  but its value)
console.log('a = ',a);  //takes value from its running scope i.e [[globalScope]] which is 10

案例 2：

let a = 10;            //[[globalScope]] = {a: 10}
function increase2(){  //no parameters so [[increase2Scope]] = {}
a++;}                  //[[increase2Scope]] don't have a, so look into next outerscope i.e. [[globalScope]] and alter its value to [[globalScope]] = {a: 11}
increase2(a);         //as increase2() has no defined parameter so this argument of 10 wont do anything
console.log('a = ',a); //same from [[globalScope]] = {a: 11}

案例 3：

let a = 10;             //[[globalScope]] = {a: 10}
function increase3(x){  //[[increase1Scope]] = {x: 10}
x++; }                  //[[increase1Scope]] = {x: 11}
increase3(a);           //value 10 get passed to increase3 -> x
console.log('a = ',a);  //this time [[globalScope]] = {a: 10}, so 10

现在，由于 increase3() 函数没有返回任何内容，所以你得到了 undefined

console.log('a = ',increase3(a));  //undefined

要获得所需的结果，请在函数定义中包含 return 语句：

function increase3(x){  
  x++; 
  return x;
} 

希望它会有所帮助。我试图把一些东西放在眼里。 我强烈建议您阅读以下在线 JS 书籍。肯定会有帮助的。

https://javascript.info/closure

Answer 2

案例 1： 这将运行并给出值 10，因为您知道在函数内部更改的值（对象/数组除外） - 因为这些是按值调用而不是引用.

let a = 10;
function increase1(a){ 
a++; }
increase1(a);
console.log('a = ',a);

案例 2： 这将产生错误，因为您没有在任何地方定义 a。您会得到价值增加的虚张声势/海市蜃楼，因为您使用相同的控制台窗口，a 的值来自 chrome-tab 的缓存。它应该给出错误。

function increase2(){
a++;}
increase2(a);
console.log('a = ',a);

案例 3： 这也会出错。只是在使用值进行测试时不要使用相同的 chrome-tab-console。尝试一个新的。你还没有定义a，那么你如何期望值甚至增加？

function increase3(x){ 
x++; }
increase3(a);
console.log('a = ',a);