JS全局变量与局部变量作用域及this指向深度解析

JavaScript变量作用域与测试误区

许多开发者倾向于通过盲目且缺乏理论依据的测试来探究JavaScript的行为，这种做法往往令人困惑且效率低下。实际上，只要深入理解其底层原理，便无需进行繁琐的逐一尝试以归纳规律。ECMAScript规范早已对变量作用域及执行上下文做出了明确定义，遵循标准即可准确预测代码行为。

变量声明规则：var与全局变量的区别

在JavaScript中，变量声明遵循特定规则：若使用var关键字声明变量，则该变量被限制在局部作用域内；反之，若未使用var声明，无论嵌套多少层函数，该变量都会被视为全局变量，直接挂载到全局对象上。

this关键字在不同函数中的指向逻辑

关于this关键字的指向，需区分函数类型：在对象方法（method）中，this始终指向该方法所属的对象实例；而在普通函数调用中，this默认指向全局对象（在浏览器环境中为DOMWindow）。

// GodDamnTest1
function Foo() { 
var a = 123; // 局部变量, 所有子函数的全局变量
this.a = 456; // 对象属性
(function() { 
alert(a); // 123, 全局
alert(this.a); // undefined, 普通函数, this指向DOMWindow 
})(); 
} 
var f = new Foo(); 
// GodDamnTest2
function Foo() { 
var a = 123; 
this.a = 456; 
(function(a) { // 局部声明
alert(a); // 456, 被函数局部声明的a覆盖了全局 
})(this.a); 
} 
var f = new Foo(); 
// GodDamnTest3
function Foo() { 
var a = 123; 
this.a = 456; 
(function() { 
alert(a); // 123, 全局
alert(this.a); // undefined, DOMWindow 
this.b = 789; // window.b = 789
})(); 
(function() { 
alert(this.b); // 789, window.b
})(); 
} 
var f = new Foo(); 
(function() { 
alert(this.b); // 789, window.b
})(); 

// GodDamnTest4
function Foo() { 
(function() { 
this.b = 789; // window.b = 789
})(); 
(function() { 
alert(this.b); // 789, window.b
var b = 0; 
alert(b); // 0, 这样的测试也写出来了!
})(); 
} 
var f = new Foo(); 
(function() { 
alert(this.b); // 789, window.b
alert(b); // 789, window.b
})(); 

变量提升与全局作用域的执行结果分析

值得注意的是，代码执行结果可能出乎意料。例如，在特定作用域下最后执行alert(b)时，输出结果仍为789。这并非令人惊讶的异常，而是变量提升与全局作用域交互的正常表现。

// GodDamnTest5
function Foo() { 
(function() { 
this.b = 789; // window.b = 789
})(); 
(function() { 
alert(this.b); // 789, window.b
alert(b); // undefined, 全局
var b = 0; 
alert(b); // 0, 还有这种测试!
})(); 
} 
var f = new Foo(); 
(function() { 
alert(this.b); // 789, window.b
alert(b); // 789, window.b
})();

局部变量的删除与undefined处理

补充说明：JavaScript中删除局部变量的有效方法。

alert('value:'+str+'\ttype:'+typeof(str)) //声明变量前，引用
var str="dd";
alert('value:'+str+'\ttype:'+typeof(str)) //声明并赋值变量后，引用
str=undefined;　　　　　　　　　　　　 //删除局部变量
alert('value:'+str+'\ttype:'+typeof(str)) //取消变量后，引用，和第一个相同

总结与读者互动

上述内容是对JavaScript全局变量与局部变量机制的最新解析，旨在帮助读者澄清概念。若有任何疑问，欢迎留言交流，我们将及时回复。感谢各位对本站的支持与关注。