js中的作用域详解

拼搏现实的明天。 2022-11-27 03:23 129阅读 0赞

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

**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>
    <script type="text/javascript">
       var btns = document.getElementsByTagName('button')
        for (let i = 0; i < btns.length; i++) { 
          btns[i].onclick = function () { 
            console.log('第' + (i + 1) + '个')
          }
        }
    </script>
    // 第1个
    // 第2个
    // 第3个