有很多小伙伴分不清二者，看了网上教程也是很迷茫，好吧让我告诉你吧。
一、作用域和作用域链
作用域是指在程序中变量和函数的可访问性和可见性范围。作用域决定了在哪些地方可以访问到变量和函数，以及在哪些地方可以对其进行修改和调用。
作用域链是指在程序中变量和函数的作用域嵌套关系。当程序中存在多个作用域时，作用域链可以帮助确定变量和函数的查找顺序。当在当前作用域无法找到变量或函数时，程序会沿着作用域链向上查找，直到找到为止。这样可以确保程序能够正确地访问和使用变量和函数。
二、二者的区分
在 JavaScript 中，作用域和作用域链也是指变量和函数的可访问性和可见性范围，以及它们的嵌套关系。但是，作用域链在 JavaScript 中是指在函数作用域中，变量和函数的查找顺序。
作用域是指变量和函数的可访问性范围，分为全局作用域和局部作用域。全局作用域中的变量和函数可以在整个程序中被访问，而局部作用域中的变量和函数只能在定义它们的函数内部被访问。
作用域链是指在函数作用域中，变量和函数的查找顺序。当在函数内部访问一个变量或函数时，JavaScript 引擎会先在当前函数的作用域中查找，如果找不到，就会沿着作用域链向上查找，直到找到为止。
因此，作用域是指变量和函数的可访问性范围，而作用域链是指在函数作用域中，变量和函数的查找顺序。
三、全局作用域和局部作用域
全局作用域和局部作用域是JavaScript中的两种作用域类型。
全局作用域是指在整个JavaScript程序中都可以访问的作用域，其中定义的变量和函数可以被程序中的任何地方访问。全局作用域中定义的变量和函数通常在程序的顶层声明，即不在任何函数内部。
局部作用域是指在函数内部定义的作用域，其中的变量和函数只能在该函数内部被访问。当在函数内部声明变量时，这些变量只在该函数内部可见，外部无法访问。
以下是一个简单的示例，演示了全局作用域和局部作用域的概念：
// 全局作用域
var globalVar = 'I am global'; // 全局变量
function outerFunction() {
// 局部作用域
var outerVar = 'I am local'; // 局部变量
console.log(globalVar); // 可以访问全局变量
console.log(outerVar); // 可以访问局部变量
}
outerFunction();
console.log(globalVar); // 可以在全局范围内访问全局变量
console.log(outerVar); // 无法在全局范围内访问局部变量，会报错在这个示例中，globalVar 是一个全局变量，可以在整个程序中访问。而 outerVar 是在 outerFunction 函数内部声明的局部变量，只能在该函数内部访问。
四、作用域和作用域链的代码演示
当在 JavaScript 中使用作用域和作用域链时，可以通过以下示例来理解其概念：
// 全局作用域
var globalVar = 'I am global';
function outerFunction() {
// 外部函数作用域
var outerVar = 'I am outer';
function innerFunction() {
// 内部函数作用域
var innerVar = 'I am inner';
console.log(globalVar); // 可以访问全局作用域的变量
console.log(outerVar); // 可以访问外部函数作用域的变量
console.log(innerVar); // 可以访问当前函数作用域的变量
}
innerFunction();
console.log(innerVar); // 无法访问内部函数作用域的变量，会报错
}
outerFunction();
console.log(outerVar); // 无法访问外部函数作用域的变量，会报错在这个示例中，全局作用域中定义了一个全局变量 globalVar。然后在 outerFunction 函数中定义了一个外部函数作用域的变量 outerVar，以及一个内部函数 innerFunction，在内部函数中定义了一个内部函数作用域的变量 innerVar。
在内部函数中，可以访问到全局作用域、外部函数作用域和当前函数作用域的变量。而在外部函数和全局作用域之外，无法直接访问内部函数作用域和外部函数作用域的变量。这就是作用域链的概念。
你理解了吗？
Hi，我是贝格前端工场，10年前端和UI老司机了，持续为大家分享有价值、有见地的观点、作品、干货，欢迎评论、关注、点赞、有事请私信。
