当前位置：首页 > news >正文

关于JS中作用域的那些事儿

news 2025/11/24 6:11:18

1、作用域

作用域：是指JavaScript中变量和函数的可访问性范围。

1.1、全局作用域

概念：
- 不被函数大括号{}包裹的部分：就是全局作用域
- 全局作用域中声明的变量称为全局变量，全局变量：可以在任何位置被访问
- 全局变量的生命周期是永久的——在程序中存在的周期是永久的
  - 永久：在程序打开后会创建一个window对象，全局变量会放在window对象上，程序关闭时，window对象会被销毁，
  - 也就是：只要window对象在，那么全局变量就在，如果全局变量被删除了，那就是window对象被删除了，什么时候
  - 会删除全局变量：关闭页面，只要程序在，全局变量就在，相较于程序而言，全局变量的声明周期就是永久的
示例：

 var a = 10;console.log( window );  // 此时的window就是window对象 => 如果要去控制台查看最好声明以a/b开头，方便查找位置

全局变量弊端：
- 全局变量虽然访问特性非常方便，但是，全局变量也有其缺点，全局变量的存在会让我们的程序更"重"，也就是占用的计算机资源会更多
- 因为全局变量都会放在window对象上，变量越多，window对象越大，那么越大就会占据更多的性能，会导致程序变卡等等
- 所以应该谨慎使用全局变量，尽可能多的使用局部变量

1.2、局部作用域

概念：
- 被函数大括号{}包裹的部分就是局部作用域
- 局部作用域中，声明的变量称为：局部变量
- 局部作用域只能在函数大括号{}中生效和访问，在外部无法正确访问
- 局部变量的生命周期是临时的，临时—在函数执行时被创建，函数执行结束则立即被删除
示例：

function foo(){var a = 10;       // 这个变量就是局部变量，可以在函数内部随意使用，但是在外部不能引用console.log( a );
}
foo();
console.log( a );     // 外部访问内部的a变量会直接报引用错误，也就是在全局作用域中，无法访问局部作用域里声明的变量

注意：函数的行参也是局部变量，只能在函数中使用
- 示例：

function foo( a ){ // 这里的参数a相当于 var a ==> 和局部变量的特性相同，也就意味着，参数只能在函数中使用，在函数外是用不了的// 代码块
}

2、示例

在全局作用域声明的变量，局部作用域里是否可以引用

// 回答：可以，因为全局变量可以在任何位置被访问
//示例：var a = 30;function foo(){console.log( a ); // 这里可以正常获取到a的值}foo();

3、作用域变量访问规则

规则分类：访问规则 和赋值规则

3.1、访问规则

解释：
- 变量的访问规则也叫做：作用域的查找机制，这种访问规则，我们称为：作用域链
规则内容：当想要获取一个变量的值时，这个行为叫做访问
- 先在自己的作用域内部查找，如果有：就拿来使用;
- 如果没有，就向上一级去查找，如果有：就拿来使用;
- 如果还没有，再继续向上一层查找，如果有：就拿来使用，以此类推…
- 如果一直找到全局作用域了，还没有找到想访问的变量，就会报出错误
  - 错误类型：引用错误—变量 is not defined
注意：
- 作用域的查找机制：只能向上(向外)不能向下
示例：

// 注意：子集函数是可以获取父级函数的变量值的var num = 100;function foo(){var num2 = 200;function foo2(){var num3 = 300;console.log(num3); // 在自己的作用域中查找，找到了变量num3，直接访问其对应的值 => 值为300;console.log(num2); // 在自己的作用域中查找，没有变量num2，向上级作用域查找，找到对应的值 => 200;console.log(num);  // 在自己的作用域中查找，没有变量num，向上级作用域查找，没有num，继续向上级查找到全局作用域，找到值 => 300console.log(a);    // 在自己的作用域中查找，没有变量a，向上级查找，也没有变量a，在向上级查找到全局作用域，还是没有，此时会报错}foo2();}foo();

示例2：查找机制只能向上不能向下

function poo(){console.log( a ); // 这里是不能向下访问的，也就无法获取a的值function innerPoo(){var a = 10;}
}

3.2、赋值规则

解释：
- 赋值规则 =赋值运算
- 当想要给变量赋值的时候，要先找到需要赋值的变量，然后再给这个变量赋值
规则内容：
- 先在自己的作用域内部查找，如果有：就直接赋值
- 没有就去上一级作用域查找，如果有：就直接赋值
- 如果还是没有，再去上一级作用域查找，以此类推…
- 如果一直找到全局作用域都没，就直接把这个变量定义为全局变量，然后再赋值
  - 但是这种情况尽量不要发生，因为会有很多隐患
示例：

function poo(){k = 10; // 在当前作用域查找，没有k变量，就会向上查找，但全局作用域中都未查找到这个变量，则s就会新创建一个变量k并赋值给它，此时k成为了全局变量
}
poo();
console.log( k ); // 此时在外层访问k这个全局变量是可以的，得到值为10

4、练习：判断变量a的值

var a = 10;
function poo(){var a = 20;console.log( a );  // 当前值为：20，因为优先访问内部的局部变量afunction pooInner(){a = 30;}pooInner() console.log( a ); // 值为：30，因为上面a = 30，优先赋值给内部的局部变量a
}
poo();
console.log( a );     // 值为：10，因为这里是直接在全局作用域访问的，所以它访问到的是全局变量a