JavaScript作用域

---

了解作用域

作用：生效，可以使用

域：范围

一个东西可以生效的范围什么东西？变量（变量名，函数名）其实就是一个变量可以生效的范围

---

作用域分类

一、全局作用域

一个html页面就是一个全局作用域

打开页面的时候，作用域就生成了，直到页面关闭为止

二、局部作用域（私有作用域）

只有函数生成私有作用域

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

---

作用域的上下级关系

全局作用域最大，所有私有作用域都是在全局作用域下面的

函数生成的私有作用域，函数写在哪个作用域里面，就是哪个作用域的子集

// 这个位置就是全局作用域 function fn() { // 这个位置就是 全局作用域的一个叫做 fn 的子级作用域 function fun() { // 这个位置就是 全局下的 fn 私有作用域下的 fun 私有作用域 } }

---

作用域的三大规则（背诵）

变量定义规则

变量使用规则

变量复制规则

定义、使用、赋值 概念

定义

有 var 关键字 或者 function 函数名 ( ) { } var num // 定义变量 function fn() {} // 定义变量

使用

就是当你需要拿到一个变量的值去使用的时候 console.log(num) // 我要使用 num 的值去打印出来 1 + num // 我要使用 num 的值去和 1 进行运算 var abc = num // 我要使用 num 的值赋值给 abc

赋值

给一个变量进行赋值的操作 num = 100 // 要把 100 这个值赋给 num 这个变量 num = function () {} // 要把 函数 这个值赋给 num 这个变量

一、变量定义规则

当你在定义一个变量的时候

你把这个变量定义在哪个作用域里面

就只有这个作用域及其后代作用域可以使用

当前作用域的所有祖先级作用域不能使用

// 全局作用域里面的变量 a var a = 100 function fn() { var b = 200 // fn 私有作用域里面的变量 b function fun() { var c = 300 // fun 私有作用域里面的变量 c } }

二、变量使用规则

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

首先，在自己作用域内部查找

如果有：就直接使用，停止查找

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

如果还没有，就再去上一级作用域查找，有就使用，停止查找

直到全局作用域都没有，那么就报错 “变量 is not defined”

var a = 100 function fn() { var a = 'fn 里面的' var b = 200 function fun() { var a = 'fun 里面的 a 变量' var b = 'fun 里面的' var c = 300 console.log(d) // 报错：d is not defined } fun() } fn()

注：分清变量的赋值和访问

赋值：是把一个变量的值给到另外一个变量 赋值时，找到全局都没有就定义一个全局变量 访问：需要拿到某一个变量存储的值来使用 访问时，找到全局都没有就报错 全局不能访问局部，局部可以拿到全局

三、变量赋值规则

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

先在自己作用域内部查找

如果有，就给自己作用域内部的变量赋值

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

如果还没有，就继续向上查找，直到全局作用域都没有，那么就把这个变量定义为全局变量，再进行赋值

var a = 100 // 全局 a 变量 function fn() { a = '后来赋值操作' console.log(a) // 后来赋值操作 } fn() // 因为 fn 函数的执行, 给全局变量 a 从新进行了赋值操作 console.log(a) // 后来赋值操作 var a = 100 // 全局 a 变量 function fn() { var a = 200 // fn 私有变量 a a = '后来赋值操作' console.log(a) // 后来赋值操作 } fn() console.log(a) // 100

---

作用域小案列

var a = b = 10 // 这里代码执行完, 全局两个变量, 一个 a 一个 b console.log(a) // 10 console.log(b) // 10 /* 代码解析 var a = b = 10 实际上是三个部分 1. var a 2. a = b 3. b = 10 等于号(赋值) 的规则是从右往左 1. 预解析 var a 2. 代码执行的时候 b = 10 // 标准的变量赋值操作, 根据变量赋值规则, 会把 b 定义成全局变量再赋值 a = b console.log(a) // 10 console.log(b) // 10 */ var a = b b = 20 a = 10 console.log(a) console.log(b) /* 代码执行过程 1. 预解析 var a 在浏览器里面声明了一个 a 变量可以使用 2. 代码执行 b = 20 // 对于变量 b 来说是变量的赋值 a = b // 对于变量 b 来说, 是变量的使用, 报错:b is not defined, 后面就没有代码了 */ function fn() { // 如果一个变量在全局和局部都没有被声明过，那么这个变量就会被升级为全局变量 // 这个 fn 里面没有定义过 a 变量, 这个只是一个单纯的赋值操作 a = 100 console.log(a) // 100 } fn() console.log(a) // 100 // 在js中变量没有被声明过也可以使用 a = 100 console.log(a) // 100