试图更好地理解 "variable shadowing"

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

案例 1： 这将运行并给出值 10，如您所知，值在函数内部更改（除了 object/array 不会持续存在) - 因为这些是按值调用而不是引用。

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

Case-2: 这会出错，因为你没有定义 a。你得到 bluff/mirage 值增加了，因为你对控制台使用相同的 window，而 a 的值来自 chrome-tab 的缓存。它应该会报错。

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

Case-3: 这也会报错。只是在使用值进行测试时不要使用相同的 chrome-tab-console。试穿一个新的。您还没有定义 a，那么您希望该值如何增加？

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

Answer 2

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

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

现在 案例 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() 函数没有 returning 任何东西，所以你变得未定义

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

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

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

希望对您有所帮助。我试图正确看待某些事情。我强烈建议你阅读下面的在线 JS 书。一定会有帮助。

https://javascript.info/closure

试图更好地理解 "variable shadowing"

Trying to understand better "variable shadowing"

javascript

variables

undefined

shadowing