1.基础总结深入

1.数据类型

1.分类

  • 基本(值)类型
    • String: 任意字符串
    • Number: 任意的数字
    • boolean: true/false
    • undefined: undefined
    • null: null
  • 对象(引用)类型
    • Object: 任意对象
    • Function: 一种特别的对象(可以执行)
    • Array: 一种特别的对象(数值下标, 内部数据是有序的)
  1. 判断
  • typeof:
    • 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
    • 不能判断: null与object object与array
  • instanceof:
    • 判断对象的具体类型
  • ===
    • 可以判断: undefined, null
  1. undefined与null的区别?
  • undefined代表定义未赋值
  • nulll定义并赋值了, 只是值为null
  1. 什么时候给变量赋值为null呢?
  • 初始赋值, 表明将要赋值为对象
  • 结束前, 让对象成为垃圾对象(被垃圾回收器回收) 
    1. //起始
    2. var b = null  // 初始赋值为null, 表明将要赋值为对象
    3. //确定对象就赋值
    4. b = ['atguigu', 12]
    5. //最后
    6. b = null // 让b指向的对象成为垃圾对象(被垃圾回收器回收)
    7. // b = 2
  1. 严格区别变量类型与数据类型? (了解)
  • 数据的类型
    • 基本类型
    • 对象类型
  • 变量的类型(变量内存值的类型)
    • 基本类型: 保存就是基本类型的数据
    • 引用类型: 保存的是地址值
      —>

2.数据，变量，内存

  1. 什么是数据?
  • 存储在内存中代表特定信息的’东东’, 本质上是0101…
  • 数据的特点: 可传递, 可运算
  • 一切皆数据
  • 内存中所有操作的目标: 数据
    • 算术运算
    • 逻辑运算
    • 赋值
    • 运行函数
  1. 什么是内存?
  • 内存条通电后产生的可储存数据的空间(临时的)
  • 内存产生和死亡: 内存条(电路版)>通电>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
  • 一块小内存的2个数据
    • 内部存储的数据
    • 地址值
  • 内存分类
    • 栈: 全局变量/局部变量
    • 堆: 对象
  1. 什么是变量?
  • 可变化的量, 由变量名和变量值组成
  • 每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据
  1. 内存,数据, 变量三者之间的关系
  • 内存用来存储数据的空间
  • 变量是内存的标识

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

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

关于引用变量赋值问题

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

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

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

问题: JS引擎如何管理内存?

  1. 内存生命周期
  • 分配小内存空间, 得到它的使用权
  • 存储数据, 可以反复进行操作
  • 释放小内存空间
  1. 释放内存
  • 局部变量: 函数执行完自动释放
  • 对象: 成为垃圾对象==>垃圾回收器回收

3.对象

  1. 什么是对象?
  • 多个数据的封装体
  • 用来保存多个数据的容器
  • 一个对象代表现实中的一个事物
  1. 为什么要用对象?
  • 统一管理多个数据
  1. 对象的组成
  • 属性: 属性名(字符串)和属性值(任意)组成
  • 方法: 一种特别的属性(属性值是函数)
  1. 如何访问对象内部数据?
  • .属性名: 编码简单, 有时不能用
  • [‘属性名’]: 编码麻烦, 能通用

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

  1. 属性名包含特殊字符: - 空格
  2. 属性名不确定（即属性名可能是变量的情况） 
  1. var p = {}
  2. //1. 给p对象添加一个属性: content type: text/json
  3. // p.content-type = 'text/json' //不能用
  4. p['content-type'] = 'text/json'
  5. console.log(p['content-type'])
  7. //2. 属性名不确定
  8. var propName = 'myAge'
  9. var value = 18
  10. // p.propName = value //不能用
  11. p[propName] = value
  12. console.log(p[propName])

4.函数

  1. 什么是函数?
  • 实现特定功能的n条语句的封装体对象
  • 只有函数是可以执行的, 其它类型的数据不能执行
  1. 为什么要用函数?
  • 提高代码复用
  • 便于阅读交流
  1. 如何定义函数?
  • 函数声明
  • 表达式
  1. 如何调用(执行)函数?
  • test(): 直接调用
  • obj.test(): 通过对象调用
  • new test(): new调用
  • test.call/apply(obj): 临时让test成为obj的方法进行调用

5.回调函数

  1. 什么函数才是回调函数?
    1). 你定义的
    2). 你没有调
    3). 但最终它执行了(在某个时刻或某个条件下)
  2. 常见的回调函数?
  • dom事件回调函数 ==>发生事件的dom元素
  • 定时器回调函数 ===>window
  • ajax请求回调函数(后面讲)
  • 生命周期回调函数(后面讲)

6.IFFE （立即执行函数）

  1. 理解
  • 全称: Immediately-Invoked Function Expression
  1. 作用 (模拟块级作用域)
  • 隐藏实现
  • 不会污染外部(全局)命名空间
  • 用它来编码js模块
  1. (function () { //匿名函数自调用
  2.   var a = 3
  3.   console.log(a + 3)
  4. })()
  5. var a = 4
  6. console.log(a)
  8. ;(function () {
  9.   var a = 1
  10.   function test () {
  11.     console.log(++a)
  12.   }
  13.   window.$ = function () { // 向外暴露一个全局函数
  14.     return {
  15.       test: test
  16.     }
  17.   }
  18. })()
  20.   $().test() // 1. $是一个函数 2. $执行后返回的是一个对象

7.函数中的this

  1. this是什么?
  • 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
  • 所有函数内部都有一个变量this
  • 它的值是调用函数的当前对象
  1. 如何确定this的值?
  • test(): window
  • p.test(): p
  • new test(): 新创建的对象
  • p.call(obj): obj
  1. function Person(color) {
  2.   console.log(this)
  3.   this.color = color;
  4.   this.getColor = function () {
  5.     console.log(this)
  6.     return this.color;
  7.   };
  8.   this.setColor = function (color) {
  9.     console.log(this)
  10.     this.color = color;
  11.   };
  12. }
  14. Person("red"); //this是谁? window
  16. var p = new Person("yello"); //this是谁? p
  18. p.getColor(); //this是谁? p
  20. var obj = {};
  21. p.setColor.call(obj, "black"); //this是谁? obj
  23. var test = p.setColor;
  24. test(); //this是谁? window
  26. function fun1() {
  27.   function fun2() {
  28.     console.log(this);
  29.   }
  31.   fun2(); //this是谁? window
  32. }
  33.   fun1();