javascript作用域有几种,js 作用域、作用域链

大家好，给大家分享一下js作用域和作用域链的理解阮一峰，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！

js中作用域(Scope)是什么
作用域是可访问的变量的集合。在JavaScript中，作用域为可访问变量，对象，函数的集合，它分为局部作用域和全局作用域Deepl降重。作用域决定了这些变量的可访问性（可见性）。

1. 全局作用域（Global Scope）
在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：
（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域.

var outValue = "最外层变量"; //最外层变量
function outFun() { //最外层函数
    var inValue = "内层变量";
    function innerFun() { //内层函数
        console.log(inValue );
    }
    innerFun();
}
console.log(outValue ); //最外层变量
outFun(); //最外层函数
console.log(inValue );  //inValue is not defined  内层变量是局部作用域，函数以外访问不到他
innerFun();   //innerFun is not defined  内层函数是局部作用域，函数以外访问不到他

（2）所有末定义直接赋值的变量自动声明为拥有全局作用域，

function outFun2() {
    value1= "未定义直接赋值的变量";
    var value2= "内层变量2";
}
outFun2();//要先执行这个函数,
console.log(value1); //未定义直接赋值的变量
console.log(value2); //value2not defined  内层变量2是局部作用域，函数以外访问不到他

（3）所有window对象的属性拥有全局作用域

2. 局部作用域（Local Scope）　
和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域，例如下列代码中的blogName和函数innerSay都只拥有局部作用域。上面例子也做说明。

3. 块级作用域
ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来，为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现。
块级作用域所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建：
在一个函数内部
在一个代码块（由一对花括号包裹）内部

let 声明的语法与 var 的语法一致。你可以用 let 来代替 var 进行变量声明，但会将变量的作用域限制在当前代码块中。块级作用域有以下几个特点：
1、声明变量不会提升到代码块顶部
let/const 声明并不会被提升到当前代码块的顶部，因此你需要手动将 let/const 声明放置到顶部，以便让变量在整个代码块内部可用。

console.log(color);
var color='red';
undefined

console.log(color2);
let color2='red';
Uncaught ReferenceError: Cannot access 'colo' before initialization

2、禁止重复声明
如果一个标识符已经在代码块内部被定义，那么在此代码块内使用同一个标识符进行 let 声明就会导致抛出错误。例如：

var count = 30;
let count = 40; // Uncaught SyntaxError: Identifier 'count' has already been declared

3、循环中的绑定块作用域的妙用
这样就不会出现点击任意一个按钮，后台都是弹出“第四个”,这是因为 i 是全局变量,执行到点击事件时，此时 i 的值为 3。那该如何修改，最简单的是用 let 声明 i

<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
< type="text/java">
   var btns = document.getElementsByTagName('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '个')
      }
    }
</>
// 第1个
// 第2个
// 第3个