1、JS高级之基础总结深入

1、数据类型

1.1、分类

1、 基本(值)类型

类型	简要说明
String	任意字符串
Number	任意的数字
boolean	true/false
undefined	undefined
null	null

2、 对象(引用)类型

类型	类型说明
Object	任意对象
Function	一种特别的对象(可以执行)
Array	一种特别的对象(数值下标, 内部数据是有序的)

var a ;
console.log(a,typeof a, a===typeof a); // undefined undefined false

a=4;
console.log(typeof a === 'number'); // true
a='string'; 
console.log(typeof a === 'string'); // true
a=true;
console.log(typeof a === 'boolean'); // true
a=null;
console.log(typeof a, a === null ); // object false

1.2、判断

typeof
可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
不能判断: null与object object与array

instanceof
判断对象的具体类型

===
可以判断: undefined, null

 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()())

1.3、相关问题

/**
 * 1、undefined和null区别
 * undefined：代表定义未赋值
 * null：代表定义并且赋值，只是为null
 */
var a;
console.log(a); // undefined

/**
 * 2、何时给变量赋值null
 */
var b = null; // 初始化为ull,表明将要赋值为对象
b = ["abc", 12];
console.log(b); // null
b = null;
console.log(b); // null b指向的对象成为垃圾对象

/**
 * 3、严格区分变量类型和数据类型？
 *  js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型
 *   数据类型
 *     基本类型
 *     对象类型
 *   变量类型
 *     基本类型：保存就是基本类型的数据
 *     引用类型：保存的是地址值
 */

2、数据、变量和内存

2.1、何为数据

• 在内存中可读的, 可传递的保存了特定信息的’东东’
• 一切皆数据, 函数也是数据
• 在内存中的所有操作的目标: 数据

2.2、何为变量

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

2.3、何为内存

• 内存条通电后产生的存储空间(临时的)
• 一块内存包含2个方面的数据
  • 内部存储的数据
  • 地址值数据
• 内存空间的分类
  • 栈空间: 全局变量和局部变量
  • 堆空间: 对象

2.4、三者之间的关系

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

变量，数据，内存

  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

2.5、相关问题

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

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

 var a = 3
  a = function () {

  }

  var b = 'abc'
  a = b
  b = {}
  a = b

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)
  console.log(obj2.name) //A


  var a = {age: 12}
  var 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)

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

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

var a = 3
  function fn (a) {
    a = a +1
  }
  fn(a)
  console.log(a)

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

4、JS引擎如何管理内存?

1. 内存生命周期

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

2. 释放内存

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

 var a = 3
  var obj = {}
  obj = undefined

  function fn () {
    var b = {}
  }

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

3、对象

3.1、何为对象

• 多个数据(属性)的集合
• 用来保存多个数据(属性)的容器

3.2、属性的分类

• 一般 : 属性值不是function 描述对象的状态
• 方法 : 属性值为function的属性 描述对象的行为

3.3、对象的组成

• 属性名 : 字符串(标识)
• 属性值 : 任意类型

3.4、如何访问对象内部数据

• .属性名

3.5、特别的对象

• 数组: 属性名是0,1,2,3之类的索引
• 函数: 可以执行的

3.6、为什么使用对象

统一管理多个数据

3.7、相关问题

1、什么时候必须使用’属性名’的方式?

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

 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])

4、函数

4.1、何为函数

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

注意事项

• 函数也是对象
  • instanceof Object===true
  • 函数有属性: prototype
  • 函数有方法: call()/apply()
  • 可以添加新的属性/方法
• 函数的3种不同角色
  • 一般函数 : 直接调用
  • 构造函数 : 通过new调用
  • 对象 : 通过.调用内部的属性/方法
• 函数中的this
  • 显式指定谁: obj.xxx()
  • 通过call/apply指定谁调用: xxx.call(obj)
  • 不指定谁调用: xxx() : window
  • 回调函数: 看背后是通过谁来调用的: window/其它

4.2、为什么使用函数

• 提高复用性
• 便于阅读交流

4.3、如何定义函数

• 函数声明
• 表达式

4.4、调用函数

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

/*
  编写程序实现以下功能需求:
    1. 根据年龄输出对应的信息
    2. 如果小于18, 输出: 未成年, 再等等!
    3. 如果大于60, 输出: 算了吧!
    4. 其它, 输出: 刚好!
  */
  function showInfo (age) {
    if(age<18) {
      console.log('未成年, 再等等!')
    } else if(age>60) {
      console.log('算了吧!')
    } else {
      console.log('刚好!')
    }
  }

  showInfo(17)
  showInfo(20)
  showInfo(65)

  function fn1 () { //函数声明
    console.log('fn1()')
  }
  var fn2 = function () { //表达式
    console.log('fn2()')
  }

  fn1()
  fn2()

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