JavaScript高级--01基础总结深入

1 数据类型的分类和判断

• 基本(值)类型
  • Number ----- 任意数值 -------- typeof
  • String ----- 任意字符串 ------ typeof
  • Boolean ---- true/false ----- typeof
  • undefined — undefined ----- typeof/=== 【程序中用的多】
  • null -------- null ---------- ===
• 对象(引用)类型 【函数和数组用的最多，用指针引用，和python相同】
  • Object ----- typeof/instanceof
  • Array ------ instanceof
  • Function ---- typeof

1.分类

基本(值)类型

* String: 任意字符串

* Number: 任意的数字

* boolean: true/false

* undefined: undefined

* null: null

对象(引用)类型

对象用来存数据，不能执行，函数也可以存数据，存特殊的数据——代码

* Object: 任意对象

* Function: 一种特别的对象(可以执行)

* Array: 一种特别的对象(数值下标, 内部数据是有序的，可以用下标来索引)

2.判断类型

typeof:

* 可以判断: ‘undefined’/ 数值 / 字符串【‘string’】 / 布尔值 / ‘function’

* 不能判断: null与object array与object

* typeof返回数据类型的字符串表达

• 必须要和字符串进行比较，全等比较

instanceof:

* 判断对象的具体类型

===【判断完全相等】 ==【做数据转换】

* 可以判断: undefined, null 【这两个类型和只有一个值，所以可以直接用全等判断】

console.log(a, typeof a, typeof a==='undefined',
     a===undefined ) // undefined  'undefined'
							//  true true
  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'

  //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')  // true
  b1.b2[2](4)    // 函数调用，直接加括号即可
  console.log(b1.b3()())     

重点：

一定要看懂数据类型

b1.b3() () 两个括号一定要理解

1.undefined与null的区别?

• undefined代表定义未赋值

• nulll定义并赋值了, 只是值为null

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

• 初始赋值, 表明将要赋值为对象

• 结束前, 让对象成为垃圾对象(被垃圾回收器回收)

3.严格区别变量类型与数据类型?【了解】

js是弱类型语言；

* 数据的类型

• 基本类型

• 对象类型

* 变量的类型(变量内存值的类型)

• 基本类型: 保存就是基本类型的数据

• 引用类型: 保存的是地址值

// 构造函数  用于赋值
function Person (name, age) {
    this.name = name
    this.age = age
  }

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

• 什么是数据?
  • 在内存中可读的, 可传递的保存了特定信息的’东东’
  • 一切皆数据, 函数也是数据
  • 在内存中的所有操作的目标: 数据
• 什么是变量?
  • 在程序运行过程中它的值是允许改变的量
  • 一个变量对应一块小内存, 它的值保存在此内存中
• 什么是内存?
  • 内存条通电后产生的存储空间(临时的)
  • 一块内存包含2个方面的数据
    • 内部存储的数据
    • 地址值数据
  • 内存空间的分类
    • 栈空间: 全局变量和局部变量
    • 堆空间: 对象
• 内存,数据, 变量三者之间的关系
  • 内存是容器, 用来存储不同数据
  • 变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据

形参的本质：变量；

实参的本质：变量的值（数据）

1.什么是数据?

* 存储在内存中代表特定信息的’东东’, 本质上是0101…

* 数据的特点: 可传递, 可运算

* 一切皆数据

* 内存中所有操作的目标: 数据

• 算术运算

• 逻辑运算

• 赋值 【拷贝】

• 运行函数

2.什么是内存?

* 内存条通电后产生的可储存数据的空间==(临时的)== 【 硬盘数据是永久的】

• 内存产生和死亡: 内存条(电路版)>通电>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
• js中不需要自己分配空间，由js引擎自动分配一定内存大小

* 一块小内存的2个数据

• 内部存储的数据

• 地址值 【存储对象】

* 内存分类

• 栈: 全局变量/局部变量

• 堆: 对象 【空间较大，存储对象】

3.什么是变量?

* 可变化的量, 由变量名和变量值组成

* 每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据

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

* 内存用来存储数据的空间

* 变量是内存的标识

左侧是栈，右侧是堆

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

  function fn () {
      
 // obj是局部变量，name是对象
    var obj = {name: 'Tom'}
  }

对象赋值时就是把地址赋给变量，其他情况直接把值赋给变量，直接读内存的数据

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

* xxx是基本数据, 保存的就是这个数据

* xxx是对象, 保存的是对象的地址值

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

关于引用变量赋值问题

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

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

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

* 理解1: 都是值(基本/地址值)传递

* 理解2: 可能是值传递, 也可能是引用传递(地址值)

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

1.内存生命周期

• 分配小内存空间, 得到它的使用权

• 存储数据, 可以反复进行操作

• 释放小内存空间

2.释放内存

• 局部变量: 函数执行完自动释放，不是回收

• 对象: 成为垃圾对象>垃圾回收器回收== 【对象占得空间大】

• 全局变量：不会自动释放

一些具体原理专业程序员要清楚，可以优化程序，提高性能

3 对象的理解和使用

• 什么是对象?

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

• 属性组成:

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

• 属性的分类:

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

• 特别的对象

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

• 如何操作内部属性(方法)

  * .属性名

  * [‘属性名’]: 属性名有特殊字符/属性名是一个变量

1.什么是对象?

* 多个数据的封装体

* 用来保存多个数据的容器

* 一个对象代表现实中的一个事物

2.为什么要用对象?

• 统一管理多个数据

3.对象的组成

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

// 通常引号省略
'name': 'Tom',
 age: 12, 
     
  p.setName('Bob')
  p['setAge'](23)
  console.log(p.name, p['age'])

4.如何访问对象内部数据?

• .属性名: 编码简单, 有时不能用

• [‘属性名’]: 编码麻烦, 能通用

注意函数的使用方式，

问题: 什么时候必须使用[‘属性名’]的方式? 【无奈情况才使用以下方法】

1.属性名包含特殊字符: - 空格

p.content-type = 'text/json' //不能用

2.属性名不确定

  var propName = 'myAge'
  var value = 18
  // p.propName = value //不能用
  p[propName] = value
  console.log(p[propName])

4 函数的理解和使用

【函数是最难的，概念最多】

【以下概念必须全部理解掌握，而不是简单知道】

• 什么是函数?

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

• 为什么要用函数?

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

• 函数也是对象

  • instanceof Object===true
  • 函数有属性: prototype
  • 函数有方法: call()/apply()
  • 可以添加新的属性/方法

• 函数的3种不同角色

  • 一般函数 : 直接调用
  • 构造函数 : 通过new调用
  • 对象 : 通过.调用内部的属性/方法

• 函数中的this

  • 显式指定谁: obj.xxx()
  • 通过call/apply指定谁调用: xxx.call(obj)
  • 不指定谁调用: xxx() : window
  • 回调函数: 看背后是通过谁来调用的: window/其它

• 匿名函数自调用:

  (function(w, obj){
    //实现代码
  })(window, obj)
  

1.什么是函数?

* 实现特定功能的n条语句的封装体

* 只有函数是可以执行的, 其它类型的数据不能执行

2.为什么要用函数?

* 提高代码复用

* 便于阅读交流

3.如何定义函数?

• 函数声明

• 表达式

 function fn1 () { //函数声明
    console.log('fn1()')
  }

 var fn2 = function () { //表达式
    console.log('fn2()')
  }

4.如何调用(执行)函数?

• test(): 直接调用

• obj.test(): 通过对象调用

• new test(): new调用

• test1.call(obj)/test1.apply(obj): 临时让test成为obj的方法进行调用;乐意将任何函数绑定在obj对象上；可以让一个函数成为指定任意对象的方法进行调用

回调函数

1). 你定义的

2). 你没有调

3). 但最终它执行了(在某个时刻或某个条件下)

2.常见的回调函数?

• dom事件回调函数 ===>发生事件的dom元素 【用的多；实现与用户的交互】

• 定时器回调函数 ===>window

• ajax请求回调函数(后面讲) 【实现与后端的交互】

• 生命周期回调函数(后面讲)

文档对象模型(DOM)

  document.getElementById('btn').onclick = 
 // dom事件回调函数
 // 这种函数用的多     
  function () 
  { alert(this.innerHTML)  // this是button
  }

//定时器回调函数
// 超时定时器
// 循环定时器
  setTimeout(function () { alert('到点了'+this)}, 2000)

var a = 3
alert(window.a)  //完整写法
window.b = 4
alert(b)  //缩写

IIFE

1.全称: Immediately-Invoked Function Expression 【匿名函数自调用】

​ 函数在创建之后直接自动执行，通常称之为自调用匿名函数（Self-Invoked Anonymous Function）或直接调用函数表达式（Immediately Invoked Function Expression ）。

2.作用

• 隐藏实现

• 不会污染外部(全局)命名空间

• 用它来编码js模块

(function () 
 { //匿名函数自调用
    var a = 3
    console.log(a + 3)
  })()

window.$ = function () { // 向外暴露一个全局函数
      return {
        // 方法对象
        test: test}
    }
  $().test()  // 输出2
  // 1. $是一个函数 2. $执行后返回的是一个对象

1.this是什么?

* 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window

* 所有函数内部都有一个变量this 【相当于self】

* 它的值是调用函数的当前对象

2.如何确定this的值?

* test(): window

* p.test(): p

* new test(): 新创建的对象

* p.call(obj): obj

  var test = p.setColor;
  test();    //this是谁? window

  function fun1() {
    function fun2() {
      console.log(this);
    }
    fun2(); //this是谁? window
  }

JavaScript分号

1.js一条语句的后面可以不加分号

2.是否加分号是编码风格问题, 没有应该不应该，只有你自己喜欢不喜欢

3.在下面2种情况下不加分号会有问题

• 小括号开头的前一条语句

• 中方括号开头的前一条语句

4.解决办法: 在行首加分号 【js合并的时候，可能变量会出问题】

5.强有力的例子: vue.js库

6.知乎热议: https://www.zhihu.com/question/20298345

真正上线的时候，对js文件进行合并压缩处理；

特殊情况很少，基本可以不加分号来写，基本上可以不加分号

 var b = 4
 ;[1, 3].forEach(function () {
 })
// 01_分号问题.html:32 Uncaught TypeError: Cannot read property 'forEach' of undefined

  /*
  错误理解
   var b = 4[3].forEach(function () {   })
   */

整理不易，关注和收藏后拿走！
欢迎专注我的公众号：AdaCoding