JavaScript变量作用域与变量提升机制详解

JavaScript变量作用域与变量提升机制详解

变量作用域定义了变量存在的上下文环境，它决定了代码中可以访问哪些变量以及是否拥有访问权限。

在JavaScript中，变量作用域主要划分为全局作用域和局部作用域两种类型。

局部作用域与函数级作用域特性

局部变量通常处于函数级别的作用域中。与其他面向对象编程语言（如C++、Java）不同，JavaScript传统上不具备块级作用域（即由花括号包围的代码块不会形成独立的作用域），而是采用函数级作用域。这意味着在函数内部定义的变量，仅能在该函数内部或其嵌套的子函数（闭包）中访问。

以下代码展示了函数级作用域的具体表现：

var name = "Richard";
function showName () {
var name = "Jack"; // local variable; only accessible in this showName function
console.log (name); // Jack
}
console.log (name); // Richard: the global variable

由于JavaScript缺乏块级作用域，if语句中的代码块不会为变量创建局部上下文。

var name = "Richard";
// the blocks in this if statement do not create a local context for the name variable
if (name) {
name = "Jack"; // this name is the global name variable and it is being changed to "Jack" here
console.log (name); // Jack: still the global variable
}
// Here, the name variable is the same global name variable, but it was changed in the if statement
console.log (name); // Jack
// 不要忘记使用var关键字
// 如果声明一个变量的时候没有使用var关键字，那么这个变量将是一个全局变量！
// If you don't declare your local variables with the var keyword, they are part of the global scope
var name = "Michael Jackson";
function showCelebrityName () {
 console.log (name);
}
function showOrdinaryPersonName () { 
 name = "Johnny Evers";
 console.log (name);
}
showCelebrityName (); // Michael Jackson
// name is not a local variable, it simply changes the global name variable
showOrdinaryPersonName (); // Johnny Evers
// The global variable is now Johnny Evers, not the celebrity name anymore
showCelebrityName (); // Johnny Evers
// The solution is to declare your local variable with the var keyword
function showOrdinaryPersonName () { 
 var name = "Johnny Evers"; // Now name is always a local variable and it will not overwrite the global variable
 console.log (name);
}
// 局部变量优先级大于全局变量
//如果在全局作用域中什么的变量在局部作用域中再次声明，那么在局部作用域中调用这个变量时，优先调用局部作用域中声明的变量： 
var name = "Paul";
function users () {
 // Here, the name variable is local and it takes precedence over the same name variable in the global scope
var name = "Jack";
// The search for name starts right here inside the function before it attempts to look outside the function in the global scope
console.log (name); 
}
users (); // Jack

全局作用域与全局变量声明

全局变量是指所有在函数外部声明的变量，它们处于全局作用域中。在浏览器环境中，这个全局作用域对应于Window对象（或整个HTML文档）。

在函数外部声明或定义的变量都会成为全局对象的一部分，因此可以在任何地方被访问，例如：

// name and sex is not in any function
var myName = "zhou";
var sex = "male";
//他们都处在window对象中
console.log(window.myName); //paul
console.log('sex' in window); //true

如果变量在首次初始化或声明时未使用var关键字，它将自动被添加到全局作用域中。

function showAge(){
//age初始化时没有使用var关键字，所以它是一个全局变量
age = 20;
console.log(age);
}
showAge(); //20
console.log(age); //因为age是全局变量，所以这里输出的也是20

setTimeout中的函数是在全局作用域中执行的。

由于setTimeout中的函数处于全局作用域，因此在这些函数内部使用this关键字时，this指向的是全局对象（Window）。

var Value1 = 200;
var Value2 = 20;
var myObj = {
Value1 : 10,
Value2 : 1,
caleculatedIt: function(){
setTimeout(function(){
console.log(this.Value1 * this.Value2);
}, 1000);
  }
}
myObj.caleculatedIt(); //4000

变量提升机制与声明优先级

为了避免对全局作用域造成污染，通常建议尽可能少地声明全局变量。关于变量提升（Variable Hoisting），所有的变量声明都会被提升到函数开头（若变量在函数内）或全局作用域开头（若为全局变量）。

function showName () {
console.log ("First Name: " + name);
var name = "Ford";
console.log ("Last Name: " + name);
}
showName ();
// First Name: undefined
// Last Name: Ford
// The reason undefined prints first is because the local variable name was hoisted to the top of the function
// Which means it is this local variable that get calls the first time.
// This is how the code is actually processed by the JavaScript engine:
function showName () {
var name; // name is hoisted (note that is undefined at this point, since the assignment happens below)
console.log ("First Name: " + name); // First Name: undefined
name = "Ford"; // name is assigned a value
// now name is Ford
console.log ("Last Name: " + name); // Last Name: Ford
}

当存在函数声明和变量声明（注意：仅指声明，未赋值）且名称相同时，它们都会被提升到外部作用域的顶部，但函数声明的优先级更高，因此变量的值会被函数声明覆盖。

// Both the variable and the function are named myName
var myName;?
function myName () {
console.log ("Rich");
}
// The function declaration overrides the variable name
console.log(typeof myName); // function

然而，如果变量或函数中有一个已经进行了赋值操作，则另一个无法覆盖它。

// But in this example, the variable assignment overrides the function declaration
var myName = "Richard"; // This is the variable assignment (initialization) that overrides the function declaration.
function myName () {
console.log ("Rich");
}
console.log(typeof myName); // string

最后需要注意的是，在严格模式下，如果未先声明变量就直接赋值，将会引发错误。