手把手教学之前端0基础到就业---day15part1(javascript)-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80171619/article/details/143983643

文章目录

day15-作用域-数据-数据类型存储

day15-作用域-数据-数据类型存储

今日学习目标

作用域
变量使用规则
递归函数
对象数据类型
数组数据类型
不同数据类型的存储

1. 作用域

什么是作用域，就是一个变量可以生效的范围
- 变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域
- 也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。
作用域分类
- 全局作用域
- 局部作用域也叫私有作用域或者函数作用域
作用域上下级关系
- 你在哪一个作用域下书写的函数, 就是哪一个作用域的子级作用域

1) 全局作用域

全局作用域是最大的作用域
在全局作用域中定义的变量可以在任何地方使用
页面打开的时候，浏览器会自动给我们生成一个全局作用域 window

这个作用域会一直存在，直到页面关闭就销毁了

// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的
var num = 100
var num2 = 200
// 在全局作用域下书写了一个 函数f1
// 此时 f1 也是在全局作用域下
function f1() {}

2) 局部作用域

局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域
在局部作用域中定义的变量只能在这个局部作用域内部使用
在 JS 中只有函数能生成一个局部作用域，别的都不行

每一个函数，都是一个局部作用域

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100

function fn() {
  // num2是局部变量 只能在 fn 函数内部使用
  var num2 = 200
}

fn()

2. 变量使用规则（重点）

有了作用域以后，变量就有了使用范围，也就有了使用规则
变量使用规则分为两种，访问规则 和 赋值规则(也是定义规则)

1)定义规则

你定义在哪一个作用域下的变量，就是哪一个作用域的私有变量

该变量只能在该作用域及其后代作用域中使用

function f1() {
    // f2 : 定义在 f1 私有作用域的变量
    // 只能在 f1 及其 f1 的后代作用域内使用
    // 全局不能使用 f2
    function f2() {
        // 这里可以使用 num 吗 ?
        // 可以, 因为 f2 是 f1 的后代作用域
        console.log(num);
    }
    f2()
    // num 只能在 f1 和 f1 的后代作用域内使用
    var num = 100
}
f1()

2) 访问规则

当我想获取一个变量的值的时候，我们管这个行为叫做访问

获取变量的规则：逐层查找

首先，在自己的作用域内部查找，如果有，就直接拿来使用
如果没有，就去上一级作用域查找，如果有，就拿来使用
如果没有，就继续去上一级作用域查找，依次类推
如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量 is not defined）

var num = 100

function fn() {
  var num2 = 200
  
  function fun() {
    var num3 = 300
    
    console.log(num3) // 自己作用域内有，拿过来用
    console.log(num2) // 自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
    console.log(num) // 自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
    console.log(a) // 自己没有，一级一级找上去到全局都没有，就会报错
  }
  
  fun()
}

fn()

变量的访问规则也叫做作用域的查找机制
作用域的查找机制只能是向上找，不能向下找

function fn() {
 var num = 100
}
fn()

console.log(num) // 发现自己作用域没有，自己就是全局作用域，没有再上一级了，直接报错

案例

var n = 100
function fn(n) {
  // 形参 n 就相当于 fn 函数内部的私有变量 n
  // fn 私有作用域内有 n 变量, 值是 undefined
  var n = 200
  function fun() {
      // var n = 200   
      console.log(n)
  }
  fun()
}
fn()

3) 赋值规则

当你想给一个变量赋值的时候，那么就先要找到这个变量，在给他赋值

变量赋值规则：

先在自己作用域内部查找，有就直接赋值
没有就去上一级作用域内部查找，有就直接赋值
在没有再去上一级作用域查找，有就直接赋值
如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，在给他赋值

function fn() {
  num = 100
  console.log(num)
}
fn()//结果是100

// fn 调用以后，要给 num 赋值
// 查看自己的作用域内部没有 num 变量
// 就会向上一级查找
// 上一级就是全局作用域，发现依旧没有
// 那么就会把 num 定义为全局的变量，并为其赋值
// 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
console.log(num) // 100
//也就是说如果 一直向上查找都没有找到这个变量 那就定义这个变量为全局变量

案例

// var n = 100
function fn() {
    //   因为 var n 这句代码, 导致 fn 私有作用域内有 n 这个私有变量
    // var n = 200
    console.log('n 赋值之前 :', n)
    n = 300
    console.log('n 赋值之后 :', n)
}
console.log('fn 执行之前 : ', n)
// 因为 fn 函数内的某一行代码执行
// 导致在全局定义了一个叫做 n 的变量
fn()
console.log('fn 执行之后 : ', n)

3. 作用域链(了解)

变量取值是到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查找到值，就会向上级作用域去查找，直到查找到全局作用域，这么一个查找过程形成的链条就叫做作用域链
由于变量的查找是沿着作用域链来实现的，所以也称作用域链为变量查找的机制

4. 预解析 ( 重点 )

js 是一个解释型语言，就是在代码执行之前，先对代码进行通读和解释，然后在执行代码
js 代码在运行的时候，会经历两个环节解释代码和执行代码
JavaScript引擎在对JavaScript代码进行解释执行之前，会对JavaScript代码进行预解析，在预解析阶段，会将以关键字var和function开头的语句块提前进行处理, 也就是变量的定义和函数的定义.
处理过程：当变量和函数的声明处在作用域比较靠后的位置的时候，变量和函数的声明会被提升到作用域的开头。

1) 解释代码和执行代码

因为是在所有代码执行之前进行解释，所以叫做预解析（预解释）
需要解释的内容有两个
- var 关键字
  - 在内存中先声明有一个变量名
  - 会把 var 关键字声明的变量进行提前说明, 但是不进行赋值
- 声明式函数
  - 在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数
  - 也就是会把函数名进行提前声明, 并且赋值为一个函数

2) 解析var关键字

// 1. 解析 var 关键字
console.log(num)
var num = 100
console.log(num)

代码分析：

预解析

var num

告诉浏览器, 我定义了一个叫做 num 的变量, 但是没有赋值

代码执行

第 1 行代码, 在控制台打印 num 变量的值

因为预解析的时候, 已经声明过 num 变量, 只是没有赋值

num 变量是存在的

打印出来的是 undefined

第 2 行代码, num = 100

给已经定义好的 num 变量赋值为 100 这个数据

第 3 行代码, 在控制台打印 num 变量的值

因为第 2 行代码的执行, num 已经被赋值为 100 了

此时打印出来的内容是 100

3) 解析声明式函数

//解析声明式函数
fn()
function fn() { console.log('fn 函数') }
fn()

代码分析：

预解析

function fn() { console.log(‘fn 函数’) }

告诉浏览器, 我定义了一个 fn 变量, 并且 fn 变量保存的内容是一个函数

代码执行

第 1 行代码, fn()

拿到 fn 变量存储的值, 当做一个函数来调用

因为预解析阶段 fn 存储的就是一个函数

调用没有问题

第 3 行代码, fn()

拿到 fn 变量存储的值, 当做一个函数来调用

因为预解析阶段 fn 存储的就是一个函数

调用没有问题

4) 预解析优先级

fn()
console.log(num)
function fn() {
    console.log('我是 fn 函数')
}
var num = 100

经过预解析之后可以变形为

function fn() {
    console.log('我是 fn 函数')
}
var num
fn()
console.log(num)
num = 100

5) 预解析中重名问题

var 定义变量和声明式函数名称一样的时候, 以函数为主
只限于在预解析阶段, 以函数为准

案例

num()//调用num函数
var num = 100//定义变量
function num() { //函数定义, 覆盖掉变量定义
console.log('我是 num 函数')
 }
num()

代码分析：

预解析

var num

告诉浏览器我定义了一个叫做 num 的变量, 但是并没有赋值

function num() { console.log(‘我是 num 函数’) }

告诉浏览器我定义了一个叫做 num 的变量, 并且赋值为一个函数

预解析结束阶段, num 变量存在, 并且是一个函数

执行代码

第 1 行代码, num()

拿到 num 的值当做一个函数来调用

因为预解析阶段, num 就是一个函数

所以正常调用

第 2 行代码, num = 100

给 num 变量赋值为 100

因为 num 本身保存的是一个函数, 现在赋值为 100

就把函数覆盖了, 一个变量只能保存一个值

从此以后, num 就是 100 了

第 3 行代码, num()

拿到 num 的值当做一个函数来调用

因为第 2 行的代码执行, 已经把 num 赋值为 100

此时就是把数字 100 当做一个函数来调用

报错: num is not a function

案例

num()
function num() { console.log('我是 num 函数') }
num()
var num = 100
num()

代码分析：

预解析

function num() { console.log(‘我是 num 函数’) }

告诉浏览器, 我定义了一个叫做 num 的变量, 并且赋值为一个函数

var num

告诉浏览器, 我定义了一个叫做 num 的变量, 但是没有赋值

预解析结束的时候, num 变量存在, 并且是一个函数

代码执行

第 1 行代码, num()

把 num 存储的值拿来当做一个函数调用

因为预解析阶段, 确定了 num 就是一个函数

调用没有问题

第 3 行代码, num()

把 num 存储的值拿来当做一个函数调用

因为预解析阶段, 确定了 num 就是一个函数

调用没有问题

第 4 行代码, num = 100

把 num 赋值为 100

本身保存的函数就被覆盖了

从此以后, num 就是 100 了

第 5 行代码, num()

把 num 存储的值拿来当做一个函数调用

因为第 4 行代码的执行, 导致 num 是一个数字 100

把数字 100 当做函数调用

报错: num is not a function

6) 预解析中特殊情况

在代码中, 不管 if 条件是否为 true, if 语句代码里面的内容依旧会进行预解析

//预解析的特殊情况
// 1. if语句
console.log(num) // undefined
if (true) {
    // 第一件事: var num
    // 第二件事: num = 100
    var num = 100
}
console.log(num)

函数体内, return 后面的代码虽然不执行, 但是会进行预解析

//预解析的特殊情况
// 2.return后面
function fn() {
    console.log('我是 fn 内的代码')
    console.log(num) // undefined
    return
    // 第一件事: var num
    // 第二件事: num = 100
    var num = 100
    console.log(num)
}
fn()

在这里插入图片描述