JavaScript作用域与作用域链使用重点讲解
发布网友
发布时间：2天前
我来回答
共1个回答
热心网友
时间：2天前
作用域和作用域链是JavaScript中的重要概念，它们决定了变量在代码中何时可见及其作用范围。理解这些概念对于编写高效且无误的代码至关重要。我们先看一个例子：
var a = 'jack';
function fn() {
var a = 'frank';
}
console.log(a);
在这里，外部定义的变量a是全局变量，而函数内的a是局部变量。因此，console.log输出的是全局变量a的值，即'jack'。
如果我们将函数代码块改为if语句，结果会怎样呢？
var a = 'jack';
if(true) {
var a = 'frank';
}
console.log(a);
在这里，if语句内的a会变成全局变量，因此输出为'frank'。这是因为if语句执行完毕后，其内部定义的变量会变成当前执行环境的变量。
让我们再看看for循环和while循环的情况：
for(var i = 0;i < 3;i++) {
break;
}
console.log(i);
var k = 5;
while(k > 1) {
k--;
var d = 10;
}
console.log(k);
console.log(d);
在这里，无论是for循环还是while循环，内部定义的变量k和d都会变为全局变量。
ES6引入了块级作用域，使用let或const定义的变量具有局部作用域。例如：
for(let i = 0;i < 3;i++) {
break;
}
console.log(i);
var k = 5;
while(k > 1) {
k--;
let d = 10;
}
console.log(k);
console.log(d);
这里，let定义的变量i和d具有块级作用域，不会污染全局环境。
现在我们回到前面的例子，增加了一个全局变量b，函数内调用了两次console.log，输出结果会是什么？
var a = 'jack';
var b = 'andy';
function fn() {
var a = 'frank';
console.log(a);
console.log(b);
}
fn();
console.log(a);
在这个例子中，第一个console.log输出局部变量a的值'frank'，第二个console.log输出全局变量b的值'andy'。这是因为作用域链决定先查找局部变量，再查找全局变量。
接下来我们看一个变量提升的例子：
var a = 'jack';
function fn() {
console.log(a);
var a = 'andy';
console.log(a);
}
fn();
这里，a在函数内被提升到顶部，但并未赋值，因此输出'undefined'。
最后，我们再来看一个函数内部定义函数的例子：
var a = 'jack';
function fn() {
console.log(a);
var a = 'andy';
console.log(ss());
function ss() {
return a;
}
}
fn();
在这个例子中，函数ss在顶部调用，因此输出'andy'。
通过以上例子，我们能够更好地理解JavaScript中的作用域和作用域链。正确地管理变量的作用域可以避免许多常见的错误，提高代码的可读性和可维护性。
