【前端|Javascript第3篇】探秘JavaScript的作用域与作用域链:小白也能轻松搞懂!

在这里插入图片描述
大家好!欢迎来到本篇博客,今天我们将解开JavaScript编程世界中的一道神秘面纱:作用域与作用域链。很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。如果你对这些概念感到困惑,不要担心!本文将以通俗易懂的方式,用趣味横生的例子,为你详解这些概念,让你轻松掌握其中的精髓。

? 作用域:代码的隐秘地盘

首先,让我们来理解一下什么是作用域。在JavaScript中,作用域指的是变量的可访问性范围。也就是说,不同位置的代码可以访问不同范围内的变量。就好像你家的客厅和卧室里的东西,客厅里的东西不一定在卧室里能找到。

? 作用域的类型

Javascript中有三种作用域:

  1. 全局作用域;
  2. 函数作用域;
  3. 块级作用域;

?️ 全局作用域:变量的大舞台

全局作用域就像是城市的中心广场,所有人都可以访问。在任何地方定义的全局变量都可以被整个脚本访问。例如:

let globalVar = "我是全局变量";

function showGlobalVar() {
  console.log(globalVar);
}

showGlobalVar(); // 输出:我是全局变量

在这个例子中,变量globalVar在全局范围内定义,所以函数showGlobalVar可以自由访问它。

? 函数作用域:变量的私密角落

与之相对,函数作用域就像是你的私人领地。在函数内定义的变量只能在函数内部访问,就像是你的房间里的物品,无法被其他房间的人看到。

function localScopeExample() {
  let localVar = "我是局部变量";
  console.log(localVar);
}

localScopeExample(); // 输出:我是局部变量

console.log(localVar); // 报错!localVar未定义

在这个例子中,变量localVar只能在localScopeExample函数内部访问,尝试在函数外部访问它会导致错误。

?块级作用域:变量的秘密小角落

相似于函数作用域,块级作用域是你的编程领地中的一处秘密小角落。在块级作用域中定义的变量只能在该块中访问,就如同你的书房里的私人收藏,无法被其他房间的人所窥见。

{
  // 块级作用域中的变量
  let greeting = 'Hello World!';
  var lang = 'English';
  console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错:Uncaught ReferenceError: greeting is not defined
console.log(greeting);

在这个示例中,ES6引入了let和const关键字,和var关键字不同,在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量。在大括号内使用var声明的变量lang是可以在大括号之外访问的。使用var声明的变量不存在块级作用域中。

? 作用域嵌套:代码的魔法迷宫

像Javascript中函数可以在一个函数内部声明另一个函数一样,作用域也可以嵌套在另一个作用域中。请看例子:

var name = 'Peter';
function greet() {
  var greeting = 'Hello';
  {
    let lang = 'English';
    console.log(`${lang}: ${greeting} ${name}`);
  }
}
greet();

这里我们的代码就像是在城堡的城堡的小房间中,充满了奇妙的层次感。我们有三层作用域嵌套,就好像是在探索城堡的套间的嵌套,首先第一层是一个块级作用域(let声明的),被嵌套在一个函数作用域(greet函数)中,最外层作用域是全局作用域。

? 词法作用域:代码的时光机器

词法作用域(也叫静态作用域)从字面意义上看是说作用域在词法化阶段(通常是编译阶段)确定而非执行阶段确定的。形象一点来说就是,词法作用域就像是代码的时光机器,它在代码编写的时候就决定了变量在哪里被找到。这就像是你在写日记的时候,每个词语都记录下了当时的情感和环境。无论你在哪里调用函数,它都会回到过去,找到当初写下的内容,就像是读取你的时间旅行日记一样!
例子:

let number = 42;
function printNumber() {
  console.log(number);
}
function log() {
  let number = 54;
  printNumber();
}
// Prints 42
log();

上面代码可以看出无论printNumber()在哪里调用console.log(number)都会打印42动态作用域不同,console.log(number)这行代码打印什么取决于函数printNumber()在哪里调用。

如果是动态作用域,上面console.log(number)这行代码就会打印54

使用词法作用域,我们可以仅仅看源代码就可以确定一个变量的作用范围,但如果是动态作用域,代码执行之前我们没法确定变量的作用范围。

像C,C++,Java,Javascript等大多数编程语言都支持静态作用域。Perl 既支持动态作用域也支持静态作用域。

? 作用域链:连接不同作用域的纽带

当在Javascript中使用一个变量的时候,首先Javascript引擎会尝试在当前作用域下去寻找该变量,如果没找到,再到它的上层作用域寻找,以此类推直到找到该变量或是已经到了全局作用域。

如果在全局作用域里仍然找不到该变量,它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错。

例如:

let foo = 'foo';
function bar() {
  let baz = 'baz';
  // 打印 'baz'
  console.log(baz);
  // 打印 'foo'
  console.log(foo);
  number = 42;
  console.log(number);  // 打印 42
}
bar();

当函数bar()被调用,Javascript引擎首先在当前作用域下寻找变量baz,然后寻找foo变量但发现在当前作用域下找不到,然后继续在外部作用域寻找找到了它(这里是在全局作用域找到的)。

然后将42赋值给变量number。Javascript引擎会在当前作用域以及外部作用域下一步步寻找number变量(没找到)。

如果是在非严格模式下,引擎会创建一个number的全局变量并把42赋值给它。但如果是严格模式下就会报错了。

结论:当使用一个变量的时候,Javascript引擎会循着作用域链一层一层往上找该变量,直到找到该变量为止。

结语

???通过本文的解释,我们详细了解了JavaScript中的作用域与作用域链。希望你在通俗易懂的语言和生动的例子中,更好地理解了这些概念。作用域和作用域链是编程的基础,是你进入JavaScript世界的钥匙。相信你已经准备好在编程的大海中翱翔了!

如果你觉得本文对你有帮助,不妨点赞并分享给你的朋友们。让我们一同扬帆,启程探索编程的未知领域吧!???