JavaScript 变量作用域

本文详细介绍了JavaScript中的变量作用域,包括函数作用域、全局作用域和局部作用域,并探讨了var变量的提升现象。同时,讲解了let关键字如何实现块级作用域,以及const用于定义常量。最后,通过实例展示了不同作用域的变量如何影响代码执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、var 的作用域

1.1 var 变量在函数体外使用

变量在函数体内声明,作用域范围是在函数体内。

'use strict';

function foo() {
    var x = 1;
    x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量 x

1.2 不同函数同名变量

'use strict';

function foo() {
    var x = 1;
    x = x + 1;
}

function bar() {
	var x = 'A';
	x = x + 'B';
}

不同函数内的同一个变量是可以的,互相独立,互不影响。

1.3 外部函数变量与内部函数变量重名

function foo() {
    var x = 1;
    function bar() {
        var x = 'A';
        console.log('x in bar() = ' + x); // 'A'
    }
    console.log('x in foo() = ' + x); // 1
    bar();
}

foo(); // x in foo() = 1  x in bar() = A

内部函数变量会屏蔽掉外部函数变量的值。

二、变量提升

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}

foo(); // Hello, undefined

JavaScript 会扫描整个函数体,然后将所有声明的变量提升到函数的顶部,此时 y 被声明因此不会报错,但是 y 没有被赋值,因此值是 undefined

三、全局作用域

JavaScript 默认有一个全局对象 window,全局作用域的变量实际上被绑定到 window 的一个属性。

'use strict';

var course = 'Learn JavaScript';
console.log("1: " + course);
console.log("2: " + window.course)
console.log("3: " + (course === window.course))

output:

1: Learn JavaScript
2: Learn JavaScript
3: true

以变量方式 var foo = function () {} 定义的函数实际上也是一个全局变量。

'use strict';

function foo() {
    alert('foo test');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

弹出两次 foo test

这说明 JavaScript 实际上只有一个全局作用域。

任何变量,包括函数,如果没有在当前的作用域上找到,那么会向上继续寻找,直到全局作用域,如果全局作用域之中也没有,则会报出ReferenceError 错误。

四、局部作用域

4.1 var 定义的局部作用域

'use strict';

function foo() {
    for (var i = 0; i < 100; i++) {
        //
    }
    i += 100; // 仍然可以引用变量i
    console.log("i = " + i);
}

foo(); // i = 200

var声明的变量 i的作用域不是在 for 循环之中,而是在 foo() 之中,因此依然可以引用到。

4.2 let 定义的块级作用域

使用 let 可以拥有块级的作用域。

'use strict';

function foo() {
    for (let i = 0; i < 100; i++) {}
    i += 100; // 不可以引用变量i
    console.log(i)
}
foo();

报错,let 声明的 i,只能在 for 循环里面使用。

ES6 还引入了 const 来表示常量,也是块级作用域。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值