JavaScript高级知识概括

@TOC

基础总结深入

数据类型：

• 分类(2大类)
• 基本(值)类型 ①Number: 任意数值 ②String: 任意文本 ③Boolean: true/false ④undefined: undefined ⑤null: null
• 对象(引用)类型 ①Object: 任意对象 ②Array: 特别的对象类型(下标/内部数据有序) ③Function: 特别的对象类型(可执行)
• 判断 ①typeof：返回的是数据类型的字符串表达形式 <1>可以区别: 数值, 字符串, 布尔值, undefined, function <2>不能区别: null与对象, 一般对象与数组 ②instanceof <1>专门用来判断对象数据的类型: Object, Array与Function ③ === <1>可以判断: undefined和null

undefined与null的区别?

• undefined代表没有赋值
• null代表赋值了, 只是值为null
• 什么时候给变量赋值为null呢? ①var a = null //a将指向一个对象, 但对象此时还没有确定 ②a = null //让a指向的对象成为垃圾对象
• 严格区别变量类型与数据类型： ①js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型 ②变量类型: <1>基本类型: 保存基本类型数据的变量 <2>引用类型: 保存对象地址值的变量 ③数据对象 <1>基本类型 <2>对象类型

什么是数据?

• 存储于内存中代表特定信息的'东东', 本质就是0101二进制
• 具有可读和可传递的基本特性
• 万物(一切)皆数据, 函数也是数据
• 程序中所有操作的目标: 数据 ①算术运算 ②逻辑运算 ③赋值 ④调用函数传参

什么是内存?

• 内存条通电后产生的存储空间(临时的)
• 产生和死亡: 内存条(集成电路板)==>通电==>产生一定容量的存储空间==>存储各种数据==>断电==>内存全部消失
• 内存的空间是临时的, 而硬盘的空间是持久的
• 一块内存包含2个数据 ①内部存储的数据(一般数据/地址数据) ②内存地址值数据
• 内存分类 ①栈: 全局变量, 局部变量 (空间较小) ②堆: 对象 (空间较大)

什么是变量?

• 值可以变化的量, 由变量名与变量值组成
• 一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容

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

• 内存是一个容器, 用来存储程序运行需要操作的数据
• 变量是内存的标识, 我们通过变量找到对应的内存, 进而操作(读/写)内存中的数据

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

• xxx是一个基本数据
• xxx是一个对象
• xxx是一个变量

关于引用变量赋值问题：

• 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
• 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象

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

• 只有值传递, 没有引用传递, 传递的都是变量的值, 只是这个值可能是基本数据, 也可能是地址(引用)数据
• 如果后一种看成是引用传递, 那就值传递和引用传递都可以有

JS引擎如何管理内存?

• 内存生命周期 1). 分配需要的内存 2). 使用分配到的内存 3). 不需要时将其释放/归还
• 释放内存 1).为执行函数分配的栈空间内存: 函数执行完自动释放 2).存储对象的堆空间内存: 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存

对象详解：

• 对象代表现实中的某个事物, 是该事物在编程中的抽象，多个数据的集合体(封装体)，用于保存多个数据的容器。
• 为什么要用对象? ①便于对多个数据进行统一管理
• 对象的组成 ①属性 <1>代表现实事物的状态数据 <2>由属性名和属性值组成 <3> 属性名都是字符串类型, 属性值是任意类型 ②方法 <1>代表现实事物的行为数据 <2>是特别的属性==>属性值是函数
• 如何访问对象内部数据? <1>.属性名: 编码简单, 但有时不能用 <2>['属性名']: 编码麻烦, 但通用

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

• 属性名不是合法的标识名 ①需求: 添加一个属性: content-type: text/json
• 属性名不确定 ①属性名不确定

函数详解：

• 函数是具有特定功能的n条语句的封装体，只有函数是可执行的, 其它类型的数据是不可执行的。
• 函数也是对象
• 为什么要用函数? ①提高代码复用 ②便于阅读和交流
• 如何定义函数? ①函数声明 ②表达式

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

• 如何调用(执行)函数? ①test() ②new test() ③obj.test() ④test.call/apply(obj)

什么函数才是回调函数?

• 回调函数就是你定义的，你没有直接调用，但最终它执行了(在特定条件或时刻)。
• 常见的回调函数? ① - DOM事件函数 ②定时器函数 ③ajax回调函数(后面学) ④生命周期回调函数(后面学)

IIEF详解：

• 全称: Immediately-Invoked Function Expression 立即调用函数表达式
• 别名: 匿名函数自调用
• 作用 ①隐藏内部实现 ②不污染外部命名空间

(function (i) {
    var a = 4
    function fn() {
      console.log('fn ', i+a)
    }
    fn()
  })(3)

this是什么?

• 一个关键字, 一个内置的引用变量。在函数中都可以直接使用this。this代表调用函数的当前对象
• 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的
• 如何确定this的值? ①test() ②obj.test() ③new test() ④test.call(obj)
• 前置知识: ①本质上任何函数在执行时都是通过某个对象调用的

函数高级

函数的prototype属性（原型）:

• 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
• 原型对象中有一个属性constructor, 它指向函数对象
• 给原型对象添加属性(一般都是方法) ①作用: 函数的所有实例对象自动拥有原型中的属性(方法)

显式原型与隐式原型：

• 每个函数function都有一个prototype，即显式原型

• 每个实例对象都有一个__proto__，可称为隐式原型

• 对象的隐式原型的值为其对应构造函数的显式原型的值

• 内存结构(图)

• 总结: ①函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象 ②对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值 ③程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

原型链(图解):

• 访问一个对象的属性时，先在自身属性中查找，找到返回，如果没有, 再沿着__proto__这条链向上查找, 找到返回，如果最终没找到, 返回undefined。
• 别名: 隐式原型链
• 作用: 查找对象的属性(方法)
• 构造函数/原型/实体对象的关系(图解)
• 构造函数/原型/实体对象的关系2(图解)

原型链的属性问题：

• 读取对象的属性值时: 会自动到原型链中查找
• 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
• 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

instanceof详解：

• instanceof是如何判断的?表达式: A instanceof B
• 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false
• Function是通过new自己产生的实例

原型链总结：

• 每个对象都有原型对象，无论是实例对象还是构造函数对象。
• 每个构造函数对象都有proto属性指向原型对象
• 每个实例对象都有_proto_属性 指向原型对象
• 原型对象是Obejct的实例，所以原型对象也有 _proto_属性，此原型对象的_proto_属性指向Object构造函数对象的proto属性也就是原型对象
• 而Object原型对象也是Object实例对象 ，它也有_proto_属性，它的_proto_属性指向null
• 原型对象一般存方法，构造函数对象存属性，因为方法可以公用！
• 构造函数对象也是一个对象，因此构造函数对象既有proto属性指向自己的原型对象，也有_proto_属性指向Function构造函数对象的原型对象。（即构造函数对象是Function构造函数对象的实例）
• 而Function构造函数对象也是一个对象，而此时他的_proto属性和proto属性一样，均指向Function的原型对象。
• 所以Object构造函数对象也有_proto_属性也指向Function原型对象。
• 而原型对象都是Object实例对象。因此Function原型对象的_proto_属性又指向Object原型对象。

变量提升与函数提升：

• 变量提升：通过var定义(声明)的变量, 在定义语句之前就可以访问到 ①值: undefined
• 函数声明提升：通过function声明的函数, 在之前就可以直接调用 ①值: 函数定义(对象)

代码分类(位置)：

• 分为全局代码和函数代码
• 全局执行上下文：在执行全局代码前将window确定为全局执行上下文，对全局数据进行预处理： ①var定义的全局变量==>undefined, 添加为window的属性 ②function声明的全局函数==>赋值(fun), 添加为window的方法 ③this==>赋值(window) <1>预处理完开始执行全局代码
• 函数执行上下文：在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象，对局部数据进行预处理： ①形参变量==>赋值(实参)==>添加为执行上下文的属性 ②arguments==>赋值(实参列表), 添加为执行上下文的属性 ③var定义的局部变量==>undefined, 添加为执行上下文的属性 ④function声明的函数 ==>赋值(fun), 添加为执行上下文的方法 ⑤this==>赋值(调用函数的对象) <1>预处理完开始执行函数体代码

执行上下文栈：

• 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
• 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
• 在函数执行上下文创建后, 将其添加到栈中(压栈)
• 在当前函数执行完后,将栈顶的对象移除(出栈)
• 当所有的代码执行完后, 栈中只剩下window

执行上下文总结：

• 先预处理变量, 后预处理函数
• 在执行全局代码前将window确定为全局执行上下文，对全局数据进行预处理
• 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象，对局部数据进行预处理

作用域：

• 作用域就是一块"地盘", 一个代码段所在的区域。它是静态的(相对于上下文对象), 在编写代码时就确定了
• 分类 ①全局作用域 ②函数作用域 ③没有块作用域(ES6有了)
• 作用 ①隔离变量，不同作用域下同名变量不会有冲突

作用域与执行上下文：

• 区别1 ①全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时 ②全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建 ③函数执行上下文环境是在调用函数时, 函数体代码执行之前创建
• 区别2 ①作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化 ②上下文环境是动态的, 调用函数时创建, 函数调用结束时上下文环境就会被释放
• 联系 ①上下文环境(对象)是从属于所在的作用域 ②全局上下文环境==>全局作用域 ③函数上下文环境==>对应的函数使用域

作用域链：

• 作用域链就是多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)，查找变量时就是沿着作用域链来查找的。
• 查找一个变量的查找规则 ①在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2 ②在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3 ③再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

闭包的引入：

• 需求: 点击某个按钮, 提示"点击的是第n个按钮"

<script type="text/javascript">
  var btns = document.getElementsByTagName('button')
  /* //有问题
  for(var i=0,length=btns.length;i<length;i++) {
    var btn = btns[i]
    btn.onclick = function () {
      alert('第'+(i+1)+'个')
    }
  }*/

  //解决一: 保存下标
  /*for(var i=0,length=btns.length;i<length;i++) {
    var btn = btns[i]
    btn.index = i
    btn.onclick = function () {
      alert('第'+(this.index+1)+'个')
    }
  }*/

  //解决办法: 利用闭包
  for(var i=0,length=btns.length;i<length;i++) {
    (function (i) {
      var btn = btns[i]
      btn.onclick = function () {
        alert('第'+(i+1)+'个')
      }
    })(i)
  }
</script>

理解闭包：

• 如何产生闭包? ①当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
• 闭包到底是什么? ①使用chrome调试查看 理解一: 闭包是嵌套的内部函数(绝大部分人) 理解二: 包含被引用变量(函数)的对象(极少数人)
• 注意: 闭包存在于嵌套的内部函数中
• 产生闭包的条件? ①函数嵌套` ②内部函数引用了外部函数的数据(变量/函数)``

常见的闭包：

• 将函数作为另一个函数的返回值
• 将函数作为实参传递给另一个函数调用

闭包的作用：

• 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
• 让函数外部可以操作(读写)到函数内部的数据(变量/函数)
• 问题: ①函数执行完后, 函数内部声明的局部变量是否还存在? <1>看是否使用了闭包 ②在函数外部能直接访问函数内部的局部变量吗? <1>不能

function fun1() {
  var a = 3;

  function fun2() {
    a++;            //引用外部函数的变量--->产生闭包
    console.log(a);
  }
  return fun2;
}
//由于f引用着内部的函数-->内部函数以及闭包都没有成为垃圾对象
var f = fun1();  
//间接操作了函数内部的局部变量
f();

闭包的生命周期：

• 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
• 死亡: 在嵌套的内部函数成为垃圾对象时

闭包的应用：自定义JS模块：

• 具有特定功能的js文件，将所有的数据和功能都封装在一个函数内部(私有的)，只向外暴露一个包信n个方法的对象或函数，
• 模块的使用者,只需要通过模块暴露的对象调用方法来实现对应的功能

//向外暴露包含多个方法的对象
//通过return 返回向外暴露
  return {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
//通过window对象向外暴露
 window.coolModule2 =  {
    doSomething: a,
    doOtherthing: b
  }

闭包的缺点及解决：

• 缺点 ①函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长 ②容易造成内存泄露
• 解决 ①能不用闭包就不用 ②及时释放

对象高级

创造对象方式：

• 方式一: Object构造函数模式 ①套路: 先创建空Object对象, 再动态添加属性/方法 ②适用场景: 起始时不确定对象内部数据 ③问题: 语句太多
• 方式二: 对象字面量模式 ①套路: 使用{}创建对象, 同时指定属性/方法 ②适用场景: 起始时对象内部数据是确定的 ③问题: 如果创建多个对象, 有重复代码
• 方式三: 工厂模式 ①套路: 通过工厂函数动态创建对象并返回 ②适用场景: 需要创建多个对象 ③问题: 对象没有一个具体的类型, 都是Object类型
• 方式四: 自定义构造函数模式 ①套路: 自定义构造函数, 通过new创建对象 ②适用场景: 需要创建多个类型确定的对象 ③问题: 每个对象都有相同的数据, 浪费内存
• 方式五: 构造函数+原型的组合模式 ①套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上 ②适用场景: 需要创建多个类型确定的对象

对象继承：

• 方式1: 原型链继承 ①套路 <1>定义父类型构造函数 <2>给父类型的原型添加方法 <3>定义子类型的构造函数 <4>创建父类型的对象赋值给子类型的原型 <5>将子类型原型的构造属性设置为子类型 <6>给子类型原型添加方法 <7>创建子类型的对象: 可以调用父类型的方法 ②关键：子类型的原型为父类型的一个实例对象
• 方式2: 借用构造函数继承(假的) ①套路: <1>定义父类型构造函数 <2>定义子类型构造函数 <3>在子类型构造函数中调用父类型构造 ②关键:在子类型构造函数中通用super()调用父类型构造函数
• 方式3: 原型链+借用构造函数的组合继承 ①利用原型链实现对父类型对象的方法继承 ②利用call()借用父类型构建函数初始化相同属性

线程机制和事件机制

进程与线程：

• 进程：程序的一次执行, 它占有一片独有的内存空间
• 线程： CPU的基本调度单位, 是程序执行的一个完整流程
• 进程与线程 ①一个进程中一般至少有一个运行的线程: 主线程 ②一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的 ③一个进程内的数据可以供其中的多个线程直接共享 ④多个进程之间的数据是不能直接共享的
• 浏览器运行是单进程还是多进程? ①有的是单进程：firefox，老版IE。 ②有的是多进程chrome，新版IE。
• 如何查看浏览器是否是多进程运行的呢? ①任务管理器==>进程
• 浏览器运行是单线程还是多线程? ①都是多线程运行的

浏览器内核：

• 什么是浏览器内核? ①支持浏览器运行的最核心的程序
• 不同的浏览器可能不太一样 ①Chrome, Safari: webkit ②firefox: Gecko ③IE: Trident ④360,搜狗等国内浏览器: Trident + webkit
• 内核由很多模块组成： ①js引擎模块 : 负责js程序的编译与运行 ②html,css文档解析模块 : 负责页面文本的解析 ③dom/css模块 : 负责dom/css在内存中的相关处理 ④布局和渲染模块 : 负责页面的布局和效果的绘制 ⑤定时器模块 : 负责定时器的管理 ⑥网络请求模块 : 负责服务器请求(常规/Ajax) ⑦事件响应模块 : 负责事件的管理

定时器引发的思考：

• 定时器真是定时执行的吗? ①定时器并不能保证真正定时执行 ② 一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)
• 定时器回调函数是在分线程执行的吗? ①在主线程执行的, js是单线程的
• 定时器是如何实现的? ①事件循环模型(后面讲)

JS是单线程的：

• 如何证明js执行是单线程的? ①setTimeout()的回调函数是在主线程执行的 ②定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
• 为什么js要用单线程模式, 而不用多线程模式? ①JavaScript的单线程，与它的用途有关。 ②作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。 ③这决定了它只能是单线程，否则会带来很复杂的同步问题
• 代码的分类: ①初始化代码 ②回调代码
• js引擎执行代码的基本流程 ①先执行初始化代码: 包含一些特别的代码 ②设置定时器 ③绑定监听 ④发送ajax请求 ⑤后面在某个时刻才会执行回调代码

事件循环模型：

• 链接：详解JavaScript中的Event Loop（事件循环）机制

• 所有代码分类 ①初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码 ②回调执行代码(异步代码): 处理回调逻辑

• js引擎执行代码的基本流程: ①初始化代码===>回调代码

• 模型的2个重要组成部分: ①事件管理模块 ②回调队列

• 模型的运转流程： ①执行初始化代码, 将事件回调函数交给对应模块管理 ②当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中 ③只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

Web Workers_应用：

• 计算得到fibonacci数列中第n个数的值。在主线程计算: 当位数较大时, 会阻塞主线程, 导致界面卡死。在分线程计算: 不会阻塞主线程

• 面试题: ①使用setInterval()和setTimeout()分别实现每隔100ms输出当前次数, 共输出10次 ②分析比较这2种实现的区别 ③分析 <1>setInterval的回调函数将尝试每隔100ms执行一次, 只要回调代码执行的时间不超过100ms就能定时 <1>setTimeout的方式: 如果回调代码执行需要xms, 下次回调的时间就会被延迟xms

• H5规范提供了js分线程的实现, 取名为: Web Workers。 ①我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 ②但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

• 相关API ①Worker: 构造函数, 加载分线程执行的js文件 ②Worker.prototype.onmessage: 用于接收另一个线程的回调函数 ③Worker.prototype.postMessage: 向另一个线程发送消息

• 不足 ①worker内代码不能操作DOM(更新UI) ②不能跨域加载JS ③不是每个浏览器都支持这个新特性

其他补充

分号问题：

• js一条语句的后面可以不加分号
• 是否加分号是编码风格问题, 没有应该不应该，只有你自己喜欢不喜欢
• 在下面2种情况下不加分号会有问题 ①小括号开头的前一条语句 ②中方括号开头的前一条语句
• 解决办法: 在行首加分号 ①强有力的例子: vue.js库
• 知乎热议: www.zhihu.com/question/20…

内存溢出与内存泄露：

• 内存溢出 ①一种程序运行出现的错误 ②当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误
• 内存泄露 ①占用的内存没有及时释放 ②内存泄露积累多了就容易导致内存溢出
• 常见的内存泄露: ①意外的全局变量 ②没有及时清理的计时器或回调函数 ③闭包