JS高级学习记录1，数据类型的分类、判断及相关问题，数据、变量、内存以及三者之间的关系，关于赋值和内存，引用变量赋值，数据传递的问题，内存管理，对象，函数，回调函数，IIFE，函数中的this。

本文链接：https://blog.csdn.net/qq_49080239/article/details/125775624

数据类型

1.分类

基本(值)类型
- String: 任意字符串
- Number: 任意的数字
- boolean: true/false
- undefined: undefined
- null: null
对象(引用)类型
- Object: 任意对象
- Function: 一种特别的对象(可以执行)
- Array: 一种特别的对象(数值下标, 内部数据是有序的)

2. 判断

typeof:(返回数据类型的字符串表达)
- 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
- 不能判断: null与object object与array
instanceof:
- 判断对象的具体类型
===
- 可以判断: undefined, null

3.相关问题

undefined与null的区别?

undefined代表定义未赋值
null定义并赋值了, 只是值为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

什么时候给变量赋值为null呢?

初始赋值, 表明将要赋值为对象
结束前, 让对象成为垃圾对象(被垃圾回收器回收)

严格区别变量类型与数据类型?

数据的类型
- 基本类型
- 对象类型
变量的类型(变量内存值的类型)
- 基本类型: 保存就是基本类型的数据
- 引用类型: 保存的是地址值

数据、变量、内存

什么是数据?

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

什么是内存?

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

什么是变量?

可变化的量, 由变量名和变量值组成
每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据

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

内存用来存储数据的空间
变量是内存的标识

关于赋值和内存的问题

var a = xxx, a内存中到底保存的是什么?

xxx是基本数据, 保存的就是这个数据
xxx是对象, 保存的是对象的地址值
xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)

关于引用变量赋值问题

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

关于数据传递问题

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

理解1: 都是值(基本/地址值)传递
理解2: 可能是值传递, 也可能是引用传递(地址值)

内存管理

JS引擎如何管理内存?

内存生命周期

分配小内存空间, 得到它的使用权
存储数据, 可以反复进行操作
释放小内存空间

释放内存

局部变量: 函数执行完自动释放
对象: 成为垃圾对象==>垃圾回收器回收

function fn () {
    var b = {}
  }

  fn() // b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收

对象

什么是对象?

多个数据的封装体
用来保存多个数据的容器
一个对象代表现实中的一个事物

为什么要用对象?

统一管理多个数据

对象的组成

属性: 属性名(字符串)和属性值(任意)组成
方法: 一种特别的属性(属性值是函数)

如何访问对象内部数据?

.属性名: 编码简单, 有时不能用
[‘属性名’]: 编码麻烦, 能通用

什么时候必须使用[‘属性名’]的方式?

属性名包含特殊字符: - 空格
属性名不确定

var p = {}
  //1. 给p对象添加一个属性: content type: text/json
  // p.content-type = 'text/json' //不能用
  p['content-type'] = 'text/json'
  console.log(p['content-type'])
  //2. 属性名不确定
  var propName = 'myAge'
  var value = 18
  // p.propName = value //不能用
  p[propName] = value
  console.log(p[propName])

函数

什么是函数?

实现特定功能的n条语句的封装体
只有函数是可以执行的, 其它类型的数据不能执行

为什么要用函数?

提高代码复用
便于阅读交流

如何定义函数?

函数声明
表达式

如何调用(执行)函数?

test(): 直接调用
obj.test(): 通过对象调用
new test(): new调用
test.call/apply(obj): 临时让test成为obj的方法进行调用

var obj = {}
  function test2 () {
    this.xxx = 'atguigu'
  }
  // obj.test2()  不能直接, 根本就没有
  test2.call(obj) // obj.test2()   // 可以让一个函数成为指定任意对象的方法进行调用
  console.log(obj.xxx)

回调函数

什么函数才是回调函数?

1). 你定义的
2). 你没有调
3). 但最终它执行了(在某个时刻或某个条件下)

常见的回调函数?

dom事件回调函数 ==>发生事件的dom元素
定时器回调函数 ===>window

IIFE

理解

全称: Immediately-Invoked Function Expression

作用

隐藏实现
不会污染外部(全局)命名空间
用它来编码js模块

 ;(function () {
    var a = 1
    function test () {
      console.log(++a)
    }
    window.$ = function () { // 向外暴露一个全局函数
      return {
        test: test
      }
    }
  })()
  $().test() // 1. $是一个函数 2. $执行后返回的是一个对象

函数中的this

this是什么?

任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象

如何确定this的值?

test(): window
p.test(): p
new test(): 新创建的对象
p.call(obj): obj

 function Person(color) {
    console.log(this)
    this.color = color;
    this.getColor = function () {
      console.log(this)
      return this.color;
    };
    this.setColor = function (color) {
      console.log(this)
      this.color = color;
    };
  }
  Person("red"); //this是谁? window
  var p = new Person("yello"); //this是谁? p
  p.getColor(); //this是谁? p
  var obj = {};
  p.setColor.call(obj, "black"); //this是谁? obj
  var test = p.setColor;
  test(); //this是谁? window
  function fun1() {
    function fun2() {
      console.log(this);
    }
    fun2(); //this是谁? window
  }
  fun1();