您必须知道的JavaScript可变范围规则

每种编程语言都有变量,它们只能在特定范围内访问。使用JavaScript时,作用域并不是一个棘手的功能。它们看起来很简单,但是如果您不知道javascript变量的范围是多少,可能会出错。让我们更详细地了解javascript的作用域。

在JavaScript中,变量仅通过两种方式限定范围:

  1. 全球范围
  2. 功能范围

只要记住,当您使用var关键字定义变量时,就声明了JavaScript中的作用域。让我们从简单的一个开始-Java中的全局范围变量。

全球范围

在以下情况下,用javascript声明的变量将具有全局作用域:

a)在任何函数之外定义的变量

//'foo' is global variable
var foo = 'I am GLOBAL foo';
//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
}
console.log(foo); //I am GLOBAL foo

在任何函数中定义的变量-无需使用’var’关键字

//'foo' is function local variable
function test() {
    foo = 'I am GLOBAL foo';
}
console.log(foo); //I am GLOBAL foo
console.log(window.foo); //I am GLOBAL foo

所有全局作用域变量均作为window对象的属性可见。

功能范围

从全局作用域详细信息可以明显看出,函数作用域变量是在函数内部使用’var’关键字声明的。

//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
    console.log(foo); //I am LOCAL foo
}
console.log(foo); //foo is not defined

请注意,javascript函数具有自己的作用域,而块(例如while,if和for语句)则没有

混合全局变量和函数范围变量

现在,在基本了解之后,我们来看一个示例,在该示例中,我们将在单个页面的不同作用域中使用变量’foo’,然后我们将确切了解javascript作用域的工作原理

//Define global scoped 'foo'
var foo = 'I am GLOBAL foo';
//Inside if block foo will refer to global foo
if ( true ) {
    var foo = 'I am GLOBAL foo TOO';
    console.log( foo );         //I am GLOBAL foo TOO
}
//As blocks do not have their own scope
//So foo in if block referred to global scope foo
//foo refer to new value
console.log( foo );             //I am GLOBAL foo TOO
//Inside function - foo has it's own declaration
function test() {
    var foo = 'I am LOCAL foo';
    console.log( foo );         //I am LOCAL foo
}
test();
//Ouside function foo is still globally declared foo
console.log( foo );             //I am GLOBAL foo TOO

查看如何foo仅在内部函数中声明具有自己的作用域,否则所有foo变量都引用全局作用域foo

提示:无论范围如何,都应始终使用var初始化变量。这样,您的变量将具有您期望的范围,并且可以避免意外的全局变量。

我希望当我们谈论javascript变量的范围时能够使我更加清楚。如果您有任何疑问,请在评论区留言,我会一一解答。

学习愉快!

saigon has written 1440 articles

Leave a Reply