JavaScript 高级教程
JavaScript 高级教程
01、JS高级_准备.mp4
02、JS高级_数据类型.mp4
基本（值）类型String:任意字符串Number:任意的数字boolean: true/falseundefined: undefinednull:null
对象（引用)类型object：任意对象Function:一种特别的对象（可以执行）Array:一种特别的对象(数值下标）
判断typeofinstanceof
判断typeof:可以判断：undefined/数值/字符串/布尔值
instanceof:*判断对象的具体类型
===可以判断：undefined,null
03、JS高级_相关问题.mp4
1.undefined-与null的区别？
*undefined代表定义未赋值
*nulll定义并赋值了，只是值为null
2.什么时候给变量赋值为null呢？
*初始赋值，表明将要赋值为对象
*结束前，让对象成为垃圾对象（被垃圾回收器回收）
3.严格区别变量类型与数据类型？
*数据的类型
基本类型对象类型
变量的类型（变量内存值的类型）
*基本类型：保存就是基本类型的数据引用業类型：保存的是地址值
_04、JS高级_数据_变量_内存.mp4
关于引用变量赋值问题*2个引用变量指向同一个对象，通过一个变量修改对象内部数据，另一个变量看到的是修改之后的数据
关于引用变量赋值问题2个引用变量指向同一个对象，通过一个变量修改对象内部数据，另一个变量看到的是修改之后的数撮2个引用变量指向同一个对象，让其中一个引用变量指向另一个对象，另一引用变量依然指向前一个对象
问题：var a日 xxx，a内存中到底保存的是什么?* XXX是基本数据，保存的就是这个数据xxx是对象，保存的是对象的地址值xxx是一个变量，保存的xxx的内存内容（可能是基本数据，也可能是地址值）
问题：在js调用函数时传递变量参数时，是值传递还是引用传递理解1：都是值(基本/地址值)传递*理解2：可能是值传递，也可能是引用传递（地址值）
问题：JS引擎如何管理内存？1.内存生命周期分配小内存空间，得到它的使用权存储数据，可以反复进行操作释放小内存空间
2．释放内存局部变量：函数执行完自动释放对象：成为垃圾对象==>垃圾回收器回收
05、JS高级_相关问题1.mp4
06、JS高级_相关问题2.mp4
07、JS高级_对象.mp4
_1.什么是对象?代表现实中的某个事物，是该事物在编程中的抽象多个数据的集合体(封装体)用于保存多个数据的容器2.为什么要用对象?便于对多个数据进行统一管理3.对象的组成属性代表现实事物的状态数据由属性名和属性值组成属性名都是字符串类型，属性值是任意类型方法代表现实事物的行为数据是特别的属性==>属性值是函数4.如何访问对象内部数据?*.属性名：编码简单，但有时不能用['属性名']：编码麻烦，但通用
_问题：什么时候必须使用['属性名']的方式？1.属性名包含特殊字符：-空格变量名不确定2.T
08、JS高级_函数.mp4
_1.什么是函数?实现特定功能的n条语句的封装体只有函数是可以执行的，其它类型的数据不能执行2.为什么要用函数?提高代码复用便于阅读交流
3.如何定义函数?函数声明表达式4.如何调用（执行)函数?test（）：直接调用obj.test（）:通过对象调用* new test(): neu* test.call/applyobj）临时让test成为obj的方法进行调用
_
09、JS高级_回调函数.mp4
1.什么函数才是回调函数?1）.你定义的2).你没有调3）.但最终它执行了2.常见的回调函数？dom事件回调函数定时器回调函数Tajax请求回调函数生命周期回调_
_
_10、JS高级_IIFE.mp4
理解全称：Immediately-Invoked Function Expression作用隐藏实现不会污染外部(全局)命名空间
()()+mound window exposed fn
11、JS高级_函数中的this.mp4
_this是什么?任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window所有函数内部都有一个变量this它的值是调用函数的当前对象如何确定this的值？ test(): windowp.test():p*new test()：新创建的对象p.call(obj): obj**
_
_12、JS高级_关于语句分号问题.mp4
1.js一条语句的后面可以不加分号2.是否加分号是编码风格问题，没有应该不应该，只有你自己喜欢不喜欢3.在下面2种情况下不加分号会有问题小括号开头的前一条语句中方括号开头的前一条语句4.解决办法:在行首加分号5.强有力的例子：vue.js库6.知乎热议:https://www.zhihu.com/question/20298345
13、JS高级_webstorm设置.mp4
14、JS高级_复习.mp4
2.什么是内存?内存条通电后产生的存储空间（临时的）产生和死亡：内存条（集成电路板)>通电>产生一定容量的存储空间>存储各种数据>断电==>内存全部消失内存的空间是临时的，而硬盘的空间是持久的分配内存：声明变量和函数或创建对象时，JS引擎会自动为此分配一定大小的内存来存放对应的数据释放内存：清空内存中的数据，标识内存可以再分配使用（内存不释放就不能复用）自动释放：栈空间的局部变量垃圾回调器回调：堆空间的垃圾对象一块内存包含2个数据内部存储的数据（一般数据/地址数据）内存地址值数据内存分类栈：全局变量，局部变量（空间较小）*堆：对象（空间较大）
3.什么是变量？值可以变化的量，由变量名与变量值组成一个变量对应一块小内存，变量名用来查找到内存，变量值就是内存中保存的内容4.内存,数据，变量三者之间的关系内存是一个容器，用来存储程序运行需要操作的数据变量是内存的标识，我们通过变量找到对应的内存，进而澡作读/写)内存中的数据
1.问题1：var a=xxx,a内存中到底保存的是什么？xxx是一个基本数据xxx是一个对象xxx是一个变量2.关于引用变量赋值问题2个引用变量指向同一个对象，通过一个引用变量修改对象内部数据，另一个引用变量也看得见2个引用变量指向同一个对象，让一个引用变量指向另一个对象，另一个引用变量还是指向原来的对象T3.问题：在js调用函数时传递变量参数时，是值传递还是引用传递？只有值传递，没有引用传递，传递的都是变量的值，只是这个值可能是基本数据，也可能是地址（引用）数据如果后一种看成是引用传递，那就值传递和引用传递都可以有4.问题：JS引擎如何管理内存？1.内存生命周期1）.分配需要的内存2）.使用分配到的内存3）.不需要时将其释放/归还2.释放内存为执行函数分配的栈空间内存：函数执行完自动释放*存储对象的堆空间内存：当内存没有引用指向时，对象成为垃圾对象，垃圾回收器后面就会回收释放此内存
15、JS高级_函数的prototype.mp4
_1. 函数的prototype属性（图)* 每个函数都有一个prototype属性，它默认指向一个object空对象（即称为：原型对象）原型对象中有一个属性constructor，它指向函数对象2.给原型对象添加属性（一般都是方法）作用：函数的所有实例对象自动拥有原型中的属性（方法）
_
_16、JS高级_显式原型与隐式原型.mp4
1.每个函数function都有一个prototype，即显式原型2.每个实例对象都有一个_proto_，可称为隐式原型3.对象的隐式原型的值为其对应构造函数的显式原型的值4.内存结构（图）5.总结：* 函数的prototype属性：在定义函数时自动添加的，默认值是一个空object对象* 对象的_proto_属性：创建对象时自动添加的，默认值为构造函数的prototype属性值*程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）
17、JS高级_原型链.mp4
18、JS高级_原型链_补充.mp4
19、JS高级_原型链_属性问题.mp4
_读取对象的属性值时：会自动到原型链中查找1.设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值2.3.方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
_
_20、JS高级_探索instanceof.mp4
instanceof是如何判断的？表达式：A instanceof B如果B函数的显式原型对象在A对象的原型链上，返回true否则返回false.Function是通过new自己产生的实例
21、JS高级_原型_面试题.mp4
2017n 8n
1.变量声明提升通过var定义（声明）的变量，在定义语句之前就可以访问到值：undefined2.函数声明提升通过function声明的函数，在之前就可以直接调用值:函数定义（对象）3.问题：变量提升和函数提升是如何产生的？
L1.代码分类(位置）全局代码函数代码2. 全局执行上下文在执行全局代码前将window确定为全局执行上下文对全局数据进行预处理* var定义的全局变量>undefined,添加为window的属性function声明的全局函数>赋值（fun），添加为window的方法**this==>赋值（window)开始执行全局代码
- 函数执行上下文在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象对局部数据进行预处理*形参变量>赋值(实参)>添加为执行上下文的属性arguments>赋值（实参列表），添加为执行上下文的属性var定义的局部变量>undefined，添加为执行上下文的属性function声明的函数>赋值（fun），添加为执行上下文的方法this>赋值（调用函数的对象）开始执行函数体代码
window全局上下文
22、JS高级_变量提升与函数提升.mp4
23、JS高级_执行上下文.mp4
24、JS高级_执行上下文栈.mp4
_1.在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象2.在全局执行上下文(window)确定后，将其添加到栈中（压栈）3.在函数执行上下文创建后，将其添加到栈中（压栈）4．在当前函数执行完后，将栈顶的对象移除(出栈）当所有的代码执行完后，栈中只剩下window5.
_
_25、JS高级_面试题.mp4
26、JS高级_复习.mp4
27、JS高级_作用域与作用域链.mp4
1．理解就是一块“地盘”，一个代码段所在的区域它是静态的（相对于上下文对象），在编写代码时就确定了2.分类全局作用域函数作用域没有块作用域（ES6有了）3．作用隔离变量，不同作用域下同名变量不会有冲突
1.区别全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建函数执行上下文是在调用函数时，函数体代码执行之前创建2．区别2作用域是静态的，只要函数定义好了就一直存在，且不会再变化热行上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会被释放3.联系上下文环境（对象）是从属于所在的作用域全局上下文环境>全局作用域*函数上下文环境>对应的函数使用域
28、JS高级_作用域_面试题.mp4
29、JS高级_循环遍历加监听.mp4
30、JS高级_闭包理解.mp4
- 如何产生闭包？当一个嵌套的内部(子)函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包2. 闭包到底是什么？使用chrome调试查看理解一：闭包是嵌套的内部函数（绝大部分人）理解二：包含被引用变量（函数）的对象（极少数人）注意：闭包存在于嵌套的内部函数中3.产生闭包的条件？函数嵌套*内部函数引用了外部函数的数据（变量/函数）
31、JS高级_常见的闭包.mp4
_
_ 32、JS高级_闭包的作用.mp4
_使用函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）让函数外部可以操作(读写)到函数内部的数据(变量/函数）2.问题：1. 函数执行完后，函数内部声明的局部变量是否还存在？2.在函数外部能直接访问函数内部的局部变量吗？
_1.产生：在嵌套内部函数定义执行完时就产生了（不是在调用）2.死亡：在嵌套的内部函数成为垃圾对象时
闭包的应用2：定义JS模块具有特定功能的js文件将所有的数据和功能都封装在一个函数内部(私有的）只向外暴露一个包信n个方法的对象或函数模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能
33、JS高级_闭包的生命周期.mp4
34、JS高级_闭包应用_自定义JS模块.mp4
35、JS高级_内存溢出与内存泄露.mp4
1．缺点函数执行完后，函数内的局部变量没有释放，占用内存时间会变长﹡容易造成内存泄露2.解决能不用闭包就不用*及时释放
1.内存溢出一种程序运行出现的错误当程序运行需要的内存超过了剩余的内存时，就出抛出内存溢出的错误2.内存泄露占用的内存没有及时释放内存泄露积累多了就容易导致内存溢出常见的内存泄露：**意外的全局变量没有及时清理的计时器或回调函数闭包
csh
36、JS高级_面试题.mp4
37、JS高级_对象创建模式.mp4
方式一：object构造函数模式*套路：先创建空object对象，再动态添加属性/方法适用场景：起始时不确定对象内部数据问题：语句太多
方式二：对象字面量模式*套路：使用{创建对象，同时指定属性/方法适用场景：起始时对象内部数据是确定的问题：如果创建多个对象，有重复代码
方式三：工厂模式套路：通过工厂函数动态创建对象并返回**适用场景：需要创建多个对象问题：对象没有一个具体的类型，都是object类型
方式四：自定义构造函数模式套路：自定义构造函数，通过new创建对象适用场景：需要创建多个类型确定的对象问题：每个对象都有相同的数据，浪费内存
5x
方式六：构造函数+原型的组合模式套路:自定义构造函数，属性在函数中初始化，方法添加到原型上适用场景：需要创建多个类型确定的对象
38、JS高级_原型链继承.mp4
_方式1：原型链继承1.套路1.定义父类型构造函数2.给父类型的原型添加方法3.定义子类型的构造函数4.创建父类型的对象赋值给子类型的原型5.将子类型原型的构造属性设置为子类型6.给子类型原型添加方法7.创建子类型的对象:可以调用父类型的方法2.关键1.子类型的原型为父类型的一个实例对象
_
_39、JS高级_组合继承.mp4
js继承 参考....
https://juejin.cn/post/7091332898158018574
https://juejin.cn/post/6844903696111763470
https://juejin.cn/post/6844903569317953543
40、JS高级_复习.mp4
41、JS高级_闭包终极面试题.mp4
function fun(n,o){
console.log(o)
return{
fun:function(m){
return fun(m,n)
}
}
}
var a=fun(0)
a.fun(1)
a.fun(2)
a.fun(3)
//undefefined,0,0,0
var b=fun(0).fun(1).fun(2).fun(3)
//undefefined,0,1,2
42、JS高级_进程与线程.mp4
_程序的一次执行，它占有一片独有的内存空间进程（process)可以通过windows任务管理器查看进程
是进程内的一个独立执行单元线程(thread）是程序执行的一个完整流程是CPU的最小的调度单元
程序必须运行在某个进程的某个线程上应思一个进程中至少有一个运行的线程：主线程，进程启动后自动创建一个进程中也可以同时运行多个线程，我们会说程序是多线程运行的一个进程内的数据可以供其中的多个线程直接共享多个进程之间的数据是不能直接共享的相关知识线程池(thread pool)：保存多个线程对象的容器，实现线程对象的反复利用
多进程运行：一应用程序可以同时启动多个实例运行何为多进程与多线程？多线程：在一个进程内，同时有多个线程运行
优点能有效提升CPU的利用率创建多线程开销线程间切换开销多线程缺点死锁与状态同步问题
优点顺序编程简单易懂单线程缺点效率低
js是单线程运行的JS是单线程还是多线程?但使用H5中的Web Workers可以多线程运行
都是多浏览器运行是单线程还是多线程?线程运行的
有的是单进程⊕有的是多进程浏览器运行是单进程还是多进程？如何查看浏览器是否是多进程运行的呢?+
firefox有的是单进程老版IE
chrome
有的是多进程
新版IE
支撑浏览器运行的最核心的程序浏览器内核不同的浏览器可能不一样⊕（内核由很多模块组成+
Chrome，Safari：webkit
firefox Gecko
IE Trident
360，搜狗等国内浏览器：Trident + webkit
new chrome blink webkit up level version
内核由很多模块组成
主线程
js引擎模块：负责js程序的编译与运行html,css文档解析模块：负责页面文本的解析DOM/CSS模块：负责dom/css在内存中的相关处理布局和渲染模块：负责页面的布局和效果的绘制（内存中的寸象）
分线程
定时器模块：负责定时器的管理事件响应模块：负责事件的管理网络请求模块：负责ajax请求
_ 43、JS高级_浏览器内核.mp4
44、JS高级_定时器引发的思考.mp4
1.定时器真是定时执行的吗？定时器并不能保证真正定时执行一般会延迟一丁点（可以接受），也有可能延迟很长时间（不能接受）2.定时器回调函数是在分线程执行的吗?在主线程执行的，js是单线程的3.定时器是如何实现的？事件循环模型(后面讲）
evelloop macro micro task
node timer io inner reset check close
node timer iocall idle poll-reio check close
┌───────────────────────────┐
┌─>│ timers │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ IO / callbacks │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ idle, prepare │
│ └─────────────┬─────────────┘ ┌───────────────┐
│ ┌─────────────┴─────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │
│ └─────────────┬─────────────┘ │ data, etc. │
│ ┌─────────────┴─────────────┐ └───────────────┘
│ │ check │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
└──┤ close callbacks │
└───────────────────────────┘
三大关键阶段
timer：执行定时器时，如 setTimeout、setInterval，在 timers 阶段执行
poll：异步操作，比如文件I/O，网络I/O等，通过'data'、 'connect'等事件通知 JS 主线程并执行回调的，此阶段就是 poll 轮询阶段
check：这是一个比较简单的阶段，直接执行 setImmdiate 的回调。
注意，若 2 阶段结束后，当前存在到时间的定时器，那么拿出来执行，eventLoop 将再回到 timer 阶段
阶段流程概述
timers: 本阶段执行已经安排的 setTimeout() 和 setInterval() 的回调函数
IO / callbacks: 执行 I/O 异常的回调，如TCP 连接遇到 ECONNREFUSED
idle, prepare: 仅系统内部使用，只是表达空闲、预备状态(第2阶段结束，poll 未触发之前)
poll: 检索新的 I/O 事件；执行与 I/O 相关的回调（几乎所有情况下，除了关闭的回调函数），node 将在此处阻塞。
check: setImmediate() 回调函数在这里执行.
close callbacks: 一些准备关闭的回调函数，如：socket.on('close', ...)
在每次运行的事件循环之间，Node.js 检查它是否在等待任何异步 I/O 或计时器，如果没有的话，则关闭干净。
timers
timers 指定 可执行所提供回调 的 时间阈值，poll 阶段 控制何时定时器执行。
一旦 poll queue 为空，事件循环将检查 已达到时间阈值的timer计时器。如果一个或多个计时器已准备就绪，则事件循环将回到 timer 阶段以执行这些计时器的回调
pending callbacks
此阶段对某些系统操作（如 TCP 错误类型）执行回调。例如，如果 TCP 套接字在尝试连接时接收到 ECONNREFUSED，则某些 *nix 的系统希望等待报告错误。这将被排队以在 pending callbacks 阶段执行。
poll
轮询 阶段有两个重要的功能：
计算应该阻塞和 poll I/O 的时间。
然后，处理 poll 队列里的事件。
当事件循环进入 poll阶段且 timers scheduled，将发生以下两种情况之一：
if the poll queue is not empty, 事件循环将循环访问其回调队列并同步执行它们，直到队列已用尽，或者达到了与系统相关的硬限制
If the poll queue is empty，还有两件事发生
如果脚本已按 setImmediate() 排定，则事件循环将结束 轮询 阶段，并继续 检查 阶段以执行这些计划脚本。
如果脚本尚未按 setImmediate()排定，则事件循环将等待回调添加到队列中，然后立即执行。
一旦 poll queue 为空，事件循环将检查 已达到时间阈值的timer计时器。如果一个或多个计时器已准备就绪，则事件循环将回到 timer 阶段以执行这些计时器的回调。
check
通常，在执行代码时，事件循环最终会命中轮询阶段，等待传入连接、请求等。但是，如果回调已计划为 setImmediate()，并且轮询阶段变为空闲状态，则它将结束并继续到检查阶段而不是等待轮询事件。
setImmediate() 实际上是一个在事件循环的单独阶段运行的特殊计时器。它使用一个 libuv API 来安排回调在 poll 阶段完成后执行。
close callbacks
如果套接字或处理函数突然关闭（例如 socket.destroy()），则'close' 事件将在这个阶段发出。否则它将通过 process.nextTick() 发出。
setImmediate() 对比 setTimeout()
setImmediate() 和 setTimeout() 很类似，但何时调用行为完全不同。
setImmediate() 设计为在当前 轮询 阶段完成后执行脚本。
setTimeout() 计划在毫秒的最小阈值经过后运行的脚本。
执行计时器的顺序将根据调用它们的上下文而异，如果二者都从主模块内调用，则计时将受进程性能的约束，两个计时器的顺序是非确定性的。
https://www.cnblogs.com/everlose/p/12846375.html
45、JS高级_js是单线程执行的.mp4
_1.如何证明js执行是单线程的？setTimeout（）的回调函数是在主线程执行的定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行2.为什么js要用单线程模式，而不用多线程模式?* JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题3.代码的分类：初始化代码回调代码4.js引擎执行代码的基本流程先执行初始化代码：包含一些特别的代码设置定时器绑定监听发送ajax请求后面在某个时刻才会执行回调代码
_
_46、JS高级_事件循环模型.mp4
1.所有代码分类初始化执行代码(同步代码):包含绑定dom事件监听，设置定时器，发送ajax请求的代码回调执行代码（异步代码）：处理回调逻辑2.js引擎执行代码的基本流程：初始化代码===>回调代码3.模型的2个重要组成部分：﹡事件管理模块回调队列T4.模型的运转流程执行初始化代码，将事件回调函数交给对应模块管理当事件发生时，管理模块会将回调函数及其数据添加到回调列队中*只有当初始化代码执行完后（可能要一定时间），才会遍历读取回调队列中的回调函数执行
3.任务队列
tas
queue
4.消息队列
message queue
同一个：callback queue
5.事件队列
event queue
event loop
6.事件轮询
从住务队列中循环取出回调函数放入执行栈中处理（一个接一个）
7.事件驱动模型 ● event-driven interaction model
8.请求响应模型
request-response model
47、JS高级_H5 Web Workers多线程.mp4'
_1.H5规范提供了js分线程的实现，取名为：Web Workers2.相关APIWorker:构造函数，加载分线程执行的js文件Worker.prototype.onmessage：用于接收另一个线程的回调函数Worker.prototype.postMessage:向另一个线程发送消息3.不足worker内代码不能操作DOM(更新UI)*不能跨域加载JS不是每个浏览器都支持这个新特性
Web Workers是HTML5提供的一个javascript多线程解决方案我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变Javascript单线程的本质
/∥创建一个Worker对象并向它传递将在新线程中执行的脚本的URLvar worker = new Worker("worker.js");∥/接收worker传过来的数据函数worker.onmessage = function (event) {console.log(event.data);∥/向worker发送数据worker.postMessage("hello world");T
J D 11.慢1.不能跨域加载JS2.worker内代码不能访问DOM（更新UI)3.不是每个浏览器都支持这个新特性L
<script>
if (window.Worker) {
let worker = new Worker("./worker.js");
worker.onmessage = (e) =>
console.log(`Main: Received message - ${e.data}`);
worker.postMessage("PING");
} else {
console.log("呜呜呜，不支持 Web Worker");
}
</script>
./worker.js
onmessage=function(e){
console.log(`Worker: Received message - ${e.data}`);
postMessage('pong');
}
_48、JS高级_复习.mp4
浙公网安备 33010602011771号