javascript - JavaScript中变量的范围是什么？(What is the scope of variables in JavaScript?)

Question

What is the scope of variables in javascript?

(javascript中变量的范围是什么？)

Do they have the same scope inside as opposed to outside a function?

(它们在函数内部和外部的作用域是否相同？)

Or does it even matter?

(还是有关系吗？)

Also, where are the variables stored if they are defined globally?

(另外，如果变量是全局定义的，这些变量将存储在哪里？)

  ask by lYriCAlsSH translate from so

Answer 1

I think about the best I can do is give you a bunch of examples to study.

(我认为我能做的最好的就是给您一些例子来学习。)

Javascript programmers are practically ranked by how well they understand scope.

(实际上，JavaScript程序员是根据他们对范围的理解程度来排名的。)

It can at times be quite counter-intuitive.

(有时可能会违反直觉。)

1. A globally-scoped variable

   (全局范围的变量)

    // global scope var a = 1; function one() { alert(a); // alerts '1' } 

2. Local scope

   (当地范围)

    // global scope var a = 1; function two(a) { // passing (a) makes it local scope alert(a); // alerts the given argument, not the global value of '1' } // local scope again function three() { var a = 3; alert(a); // alerts '3' } 

3. Intermediate : No such thing as block scope in JavaScript (ES5; ES6 introduces let and const )

   (中级 ： JavaScript中没有块作用域 （ES5； ES6引入let和const ）)

   a.

   (一种。)

    var a = 1; function four() { if (true) { var a = 4; } alert(a); // alerts '4', not the global value of '1' } 

   b.

   (b。)

    var a = 1; function one() { if (true) { let a = 4; } alert(a); // alerts '1' because the 'let' keyword uses block scoping } 

   c.

   (C。)

    var a = 1; function one() { if (true) { const a = 4; } alert(a); // alerts '1' because the 'const' keyword also uses block scoping as 'let' } 

4. Intermediate : Object properties

   (中级 ： 对象属性)

    var a = 1; function Five() { this.a = 5; } alert(new Five().a); // alerts '5' 

5. Advanced : Closure

   (高级 ： 关闭)

    var a = 1; var six = (function() { var a = 6; return function() { // JavaScript "closure" means I have access to 'a' in here, // because it is defined in the function in which I was defined. alert(a); // alerts '6' }; })(); 

6. Advanced : Prototype-based scope resolution

   (高级 ： 基于原型的范围解析)

    var a = 1; function seven() { this.a = 7; } // [object].prototype.property loses to // [object].property in the lookup chain. For example... // Won't get reached, because 'a' is set in the constructor above. seven.prototype.a = -1; // Will get reached, even though 'b' is NOT set in the constructor. seven.prototype.b = 8; alert(new seven().a); // alerts '7' alert(new seven().b); // alerts '8' 

   ---

7. Global+Local : An extra complex Case

   (全球+本地 ： 一个额外的复杂案例)

    var x = 5; (function () { console.log(x); var x = 10; console.log(x); })(); 

   This will print out undefined and 10 rather than 5 and 10 since JavaScript always moves variable declarations (not initializations) to the top of the scope, making the code equivalent to:

   (因为JavaScript总是将变量声明（而不是初始化）移到范围的顶部，所以这将打印出undefined和10而不是5和10 ，这使得代码等效于：)

    var x = 5; (function () { var x; console.log(x); x = 10; console.log(x); })(); 

8. Catch clause-scoped variable

   (捕获子句作用域变量)

    var e = 5; console.log(e); try { throw 6; } catch (e) { console.log(e); } console.log(e); 

   This will print out 5 , 6 , 5 .

   (这将打印出5 ， 6 ， 5 。)

   Inside the catch clause e shadows global and local variables.

   (在catch子句内部， e遮盖了全局变量和局部变量。)

   But this special scope is only for the caught variable.

   (但是，此特殊作用域仅适用于捕获的变量。)

   If you write var f;

   (如果您写var f;)

   inside the catch clause, then it's exactly the same as if you had defined it before or after the try-catch block.

   (在catch子句中，则与在try-catch块之前或之后定义它完全相同。)