• JS高级（数据类型，数据_变量_内存）

    文章目录

    基础总结深入

    1 数据类型的分类和判断

    • 基本(值)类型
      • Number ----- 任意数值 -------- typeof
      • String ----- 任意字符串 ------ typeof
      • Boolean ---- true/false ----- typeof
      • undefined — undefined ----- typeof/===
      • null -------- null ---------- ===
    • 对象(引用)类型
      • Object ----- typeof/instanceof
      • Array ------ instanceof
      • Function ---- typeof
    1. 分类
    • 基本(值)类型
      • String: 任意字符串
      • Number: 任意的数字
      • boolean: true/false
      • undefined: undefined
      • null: null
    • 对象(引用)类型
      • Object: 任意对象
      • Function: 一种特别的对象(可以执行)
      • Array: 一种特别的对象(数值下标, 内部数据是有序的)
    1. 判断
    • typeof:
      • 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
      • 不能判断: null与object object与array
    • instanceof:
      • 判断对象的具体类型
    • ===
      • 可以判断: undefined, null

    eg. 01_数据类型.html

     DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_数据类型title>
head>
<body>

<script type="text/javascript">
  //1. 基本
  // typeof返回数据类型的字符串表达
  var a
  console.log(a, typeof a, typeof a==='undefined',a===undefined )  // undefined 'undefined' true true
  console.log(undefined==='undefined')
  a = 4
  console.log(typeof a==='number')
  a = 'atguigu'
  console.log(typeof a==='string')
  a = true
  console.log(typeof a==='boolean')
  a = null
  console.log(typeof a, a===null) // 'object'

  console.log('-----------------')
  //2. 对象
  var b1 = {
    b2: [1, 'abc', console.log],
    b3: function () {
      console.log('b3')
      return function () {
        return 'xfzhang'
      }
    }
  }

  console.log(b1 instanceof Object, b1 instanceof Array) // true  false
  console.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true true
  console.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true

  console.log(typeof b1.b2, '-------') // 'object'

  console.log(typeof b1.b3==='function') // true

  console.log(typeof b1.b2[2]==='function')
  b1.b2[2](4)
  console.log(b1.b3()()) // xfzhang
  // b3()表示b3的函数



  /*var obj = {
    name: 'Tom',
    age: 12
  }
  function test () {
    var a = 3
  }
  var arr = [3, 'abc']
  arr[1]*/

script>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    在这里插入图片描述

    Q ：

    1. undefined与null的区别?（重点）
    • undefined代表定义未赋值
    • nulll定义并赋值了, 只是值为null
    1. 什么时候给变量赋值为null呢?
    • 初始赋值, 表明将要赋值为对象
    • 结束前, 让对象成为垃圾对象(被垃圾回收器回收)
    1. 严格区别变量类型与数据类型?（了解就行）
    • 数据的类型
      • 基本类型
      • 对象类型
    • 变量的类型(变量内存值的类型)
      • 基本类型: 保存就是基本类型的数据
      • 引用类型: 保存的是地址值

    eg. 01_数据类型2.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_相关问题title>
head>
<body>

<script type="text/javascript">

  // 实例: 实例对象
  // 类型: 类型对象
  function Person (name, age) {// 构造函数  类型
    this.name = name
    this.age = age
  }
  var p = new Person('tom', 12) // 根据类型创建的实例对象

  // Person('jack', 12)

  // 1. undefined与null的区别?
  var a
  console.log(a)  // undefined
  a = null
  console.log(a) // null

  //起始
  var b = null  // 初始赋值为null, 表明将要赋值为对象
  //确定对象就赋值
  b = ['atguigu', 12]
  //最后 释放
  b = null // 让b指向的对象成为垃圾对象(被垃圾回收器回收)
  // b = 2

  
  var c = function () {

  }

  console.log(typeof c) // 'function'

script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    2 数据,变量, 内存的理解

    2.1 数据_变量_内存

    1 什么是数据?

    • 在内存中可读的, 可传递的保存了特定信息的’东东’,本质上是0101…
    • 一切皆数据, 函数也是数据
    • 数据的特点: 可传递, 可运算
    • 在内存中的所有操作的目标: 数据
      • 算术运算
      • 逻辑运算
      • 赋值
      • 运行函数

    2 什么是变量?

    • 在程序运行过程中它的值是允许改变的量
    • 一个变量对应一块小内存, 它的值保存在此内存中

    3 什么是内存?

    • 内存条通电后产生的存储空间(临时的)
    • 内存产生和死亡: 内存条(电路版)== > 通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
    • 一块内存包含2个方面的数据
      • 内部存储的数据
      • 地址值数据
    • 内存空间的分类
      • 栈空间: 全局变量和局部变量
      • 堆空间: 对象

    4 内存,数据, 变量三者之间的关系

    • 内存是容器, 用来存储不同数据
    • 变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据

    eg. 02_数据_变量_内存.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_数据_变量_内存title>
head>
<body>
<script type="text/javascript">

  var age = 18
  console.log(age)

  var obj = {name: 'Tom'}

  console.log(obj.name)

  function fn () {
    var obj = {name: 'Tom'}
  }

  var a = 3
  var b = a + 2

script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    分析:

    var obj = {name: 'Tom'}; 
var a = obj;
console.log(obj.name);

    • 1
    • 2
    • 3

    在这里插入图片描述

    2.2 关于赋值和内存的问题

    问题: var a = xxx, a内存中到底保存的是什么?
    * xxx是基本数据, 保存的就是这个数据
    * xxx是对象, 保存的是对象的地址值
    * xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)

    // 保存的是数据
var a = 3
// 保存的是对象的地址值
var a = {}
// 保存的是地址值，函数也是对象
a = function () {}

// 保存的是b 的内容（可能是基本数据，可能是地址值）
var b = 'abc'
a = b // 基本数据
b = {} // 地址值
a = b

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    2.3 关于引用变量赋值问题

    • 2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据
    • 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象

    (1) 将一个变量赋值给另一个变量是拷贝右边变量的内存内容复制给左边变量

    var obj1 = {name: 'Tom'}
var obj2 = obj1  // 将obj1的内存内容保存给obj2,obj1的内存内容就是地址值，但是不要说把obj1的地址值给obj2
obj1.name = 'Jack'
console.log(obj2.name); // 'Jack'

    • 1
    • 2
    • 3
    • 4

    (2) 2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据

    // 2个引用变量指向同一个对象
var obj1 = {name: 'Tom'}
var obj2 = obj1  
// 通过一个变量修改对象内部数据
obj2.age = 12
// 另一个变量看到的是修改之后的数据
console.log(obj1.age)  // 12
  
function fn (obj) {
  obj.name = 'A'
}
fn(obj1) // obj1实参，obj形参，将实参赋值给形参
console.log(obj2.name) //A

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    (3) 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象

    var a = {age: 12}
var b = a
// a = {} 是语法糖 相当于给a重新找了个对象，现在b和a指向了不同的对象 两个无关联了
a = {name: 'BOb', age: 13}
b.age = 14
console.log(b.age, a.name, a.age) // 14 Bob 13
function fn2 (obj) {
  obj = {age: 15}
}
fn2(a)
console.log(a.age) // 12 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    分析调用函数fn2这块：
    首先调用函数， a obj 开始指向同一个对象 age=13
    之后 obj = {age : 15} 又创建了一个对象 age=15 obj指向15
    a.age还是13，取不到15，15到obj里面了，这是一个垃圾对象，因为函数执行完以后，内部的局部变量就会自动被释放。
    在这里插入图片描述

    2.4 关于数据传递问题

    问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递

    • 理解1: 都是值(基本/地址值)传递
    • 理解2: 可能是值传递, 也可能是引用传递(地址值)
    var a = 3
function fn (a) {
  a = a + 1
}
fn(a)
console.log(a) // 3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    分析：
    fn(a) 里面的a就是把3传到函数 var a = 3 a是一个变量，function fn (a)这个里面的a是一个新变量，然后a = a+1,fn(a)里面传递的不是a,是3，等传递完了，就跟a没关系，a=a+1 (这个理解我还没有理解)
    别人的理解: a = a+1 左边的a看成局部变量，var a 里面的a是全局变量

    function fn2 (obj) {
  console.log(obj.name) // Tom
}
var obj = {name: 'Tom'}
fn2(obj)

    • 1
    • 2
    • 3
    • 4
    • 5

    分析：
    首先fn2(obj)调用obj,先读到obj的值，obj的值是地址值，然后把它的地址值赋值给局部变量obj(function fn2 (obj)这个里面的obj)

    并不是直接将obj对象传进去，传的是obj的内容，只是它的内容是地址

  • 相关阅读:
    IronBarcode for .NET 2022.11.10702 Crack
    mybatis-plus集成分页插件,针对多数据源分页失效的问题
    笔试强训Day2
    网桥、路由器和网关有什么区别？
    分布式事务最经典的八种解决方案
    java面试清单和书籍推荐 五颗星五颗星
    Stream流源码解析调用过程
    Win10如何删除登录账号？Win10删除登录账号的方法
    第16章 Linux的常用服务搭建
    【智能优化算法-鲸鱼算法】基于鲸鱼算法求解多目标优化问题附matlab代码(NSWOA)
  • 原文地址：https://blog.csdn.net/weixin_51249285/article/details/126671495