作用域详解 javascript基础

作用域详解

• 存储和访问变量, 是任何一种编程语言最基本的功能之一, 变量存在哪里?
• 程序需要时如果找到它? 这些问题需要一套良好的规则来规范, 这套规则,
• 就称为作用域

了解作用域

其实就是一个变量可以生效的范围

作用域分类

1.全局作用域

一个 html 页面就是一个全局作用域
当你打开这个页面时, 作用域就生成了, 直到页面关闭为止

var num;
var num = 0;
// 这两个就是在全局作用域定义的变量, 任何位置都可以使用

2.局部作用域(私有作用域)

只有函数生成私有作用域
每一个函数就是一个私有作用域

var num = 0;
function fn() {
	// 这里就是一个私有作用域, 只能在这里或者子级使用
   var a = 1;
};

作用域的上下级关系

• 全局作用域最大, 所有的私有作用域都是在全局作用域下面的
• 函数生成的私有作用域, 函数写在哪个作用域里面, 就是哪个作用域的子级

作用域的三大规则

1. 变量定义规则
什么是定义 : 有var关键字 或者 function 函数名 () {}

var num;  // 定义变量
function fn() {};  // 定义变量

• 当你在定义一个变量的时候
• 你把这个变量定义在哪个作用域里面, 就只有这个作用域及其后代作用域可以使用
• 当前作用域的所有祖先级作用域不能使用

var num = 0;
function fn(a) {
	var b = 10;
	console.log(a + b + num); // 可以使用父级(全局作用域定义)的变量
};
fn(1);
// var res = num + b; // 这里就会报错 
// 因为变量 b 是在 fn 的私有作用域里面定义的, 不能在祖先级作用域使用

2. 变量使用规则
什么是使用 : 就是当你需要拿到一个变量的值去使用的时候

var num = 0;
console.log(num)  // 我要使用 num 的值在控制台打印出来
1 + num;  // 我要使用 num 的值去和 1 进行运算
var abc = num;  // 我要使用 num 的值给 abc 进行赋值

• 当你需要使用一个变量的时候

• 首先,在自己的作用域内部查找, 如果有,就直接使用,停止查找

• 如果没有,就去上一级作用域查找,有就使用,停止查找

• 如果还没有,就再去上一级作用域查找,有就是用,停止查找

• 直到全局作用域都没有,那么就报错 " 变量 is not defined "

var num = 0;
function fn(a) {
  var b = 10;
  console.log(a + b + num); // 自己本身没有 num 这个变量, 去父级查找
  //找到了, 可以使用父级(这里的 num 是全局作用域定义)的变量
};
fn(1);
// var res = num + b; // 这里就会报错  "b is not defined"
// 因为变量 b 是在 fn 的私有作用域里面定义的, 不能在祖先级作用域使用

3. 变量赋值规则
什么是赋值 : 就是给一个变量进行赋值的操作

var num = 0;
num = 100;  // 要把 100 这个值赋给 num 这个变量
num = function fn() {}  // 要把 函数 这个值赋给 num 这个变量

• 当你需要给一个变量赋值的时候

• 先在自己作用域内部查找,如果有,就给自己作用域内部的变量赋值

• 如果没有,就向上一级查找,如果有就给父级的变量赋值

• 如果还没有,就继续向上查找

• 直到全局作用域都没有, 那么就把这个变量定义为全局变量,再进行赋值

var num = 0;  // 定义一个变量 num(这里是全局作用域)
function fn() {
    num = 2;  // 给 num 赋值
    console.log(num)
    // 因为本身没有 num 这个变量, 所以去父级查找, 找到了给其赋值
}
fn(); // 调用函数