Fifth, asynchronous programming
A constructor
Definition 1: When any one of the common function to create a class of objects, it is called a constructor. In JavaScript is a function call using the new keyword
2 execution process:
(1) When to call the new keyword, it creates a new memory space
Inside (2) this refers to the memory function body
(3) executing the function code in vivo
(4) returns this default
In ES6 class 3 defined by both class A and class constructor defined by essentially the same. And when js execution, will be the first to move to the second execution
"The difference between the ordinary and JS constructor function" https://blog.csdn.net/weixin_41796631/article/details/82939585
"execution constructor" https://www.jianshu.com/p/95a5faee17f1
"for ES6 relations with the class constructor " https://www.cnblogs.com/honkerzh/p/10270624.html
Second, the prototype chain
Prototype: that when we create a function of time, the system will automatically assign a prototype (prototype) properties that can be used to store allows the properties and methods shared by all instances
Prototype chain: Each instance of an object (object) has a private property (called the __proto__) pointing to its prototype object constructor function (prototype). The prototype object has its own prototype object (__proto__), layers up until the prototype for an object is null. By definition, no null prototype and the prototype as the last link in the chain.
《JavaScript中的原型与原型链》https://segmentfault.com/a/1190000018895543
《原型和原型链》https://www.cnblogs.com/zhangshilei/p/11079539.html
《继承与原型链》https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
三、回调函数
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed
将一个函数作为一个参数传到主函数里面，当主函数执行完之后，再执行传进去的作为参数的这个函数，这个函数叫做回调函数
<script type="text/javascript">
function title(value){//这是回调函数！！！！
alert(value);
}
function main(title, value){//这个主函数:在参数列表中，title作为一个参数传递进来，也就是上文说的 参数化函数；然后value这个值正是title（）函数中所需要的。
alert("我是主函数");
title(value);//结果为：'我是回调函数'。——————然后在这行这个title()，它就是回调函数咯。
}
main(title,"我是回调函数");//title参数加上()后，就会变回一个函数，并会被执行一次。
//PS:看清楚，调用的是main()函数，意味着先执行main()，这时已经执行了主函数，title()被main()在函数体中执行了一次，因此title()是回调函数。
</script>《JS回调函数——简单易懂有实例》https://blog.csdn.net/hu_belif/article/details/80284140
四、事件循环
1 栈内存：引擎执行代码时工作的内存空间，除了引擎，也用来保存基本值和引用类型值的地址。
堆内存：用来保存一组无序且唯一的引用类型值，可以使用栈中的键名来取得。
let a1 = 0; // 栈内存
let a2 = "this is string" // 栈内存
let a3 = null; // 栈内存
let b = { x: 10 }; // 变量b存在于栈中，{ x: 10 }作为对象存在于堆中
let c = [1, 2, 3]; // 变量c存在于栈中，[1, 2, 3]作为对象存在于堆中参考链接：《JavaScript栈内存和堆内存》https://segmentfault.com/a/1190000015118062
2 JavaScript 的运行时流程图如下：
(1) 宿主环境：浏览器或者 Node 环境。
(2) 引擎：从头到尾负责整个 JavaScript 代码的编译及执行过程。
(3) 执行栈：一种遵循" 后进先出 "原则的有序数据集合，可以简单理解为使用 push() 和 pop() 操作数组。
3 事件循环
从代码执行顺序的角度来看，程序最开始是按代码顺序执行代码的，遇到同步任务，立刻执行；遇到异步任务，则只是调用异步函数发起异步请求。此时，异步任务开始执行异步操作，执行完成后到消息队列中排队。程序按照代码顺序执行完毕后，查询消息队列中是否有等待的消息。如果有，则按照次序从消息队列中把消息放到执行栈中执行。执行完毕后，再从消息队列中获取消息，再执行，不断重复。由于主线程不断的重复获得消息、执行消息、再取消息、再执行。所以，这种机制被称为事件循环
由于JavaScript是事件驱动，当用户触发事件JavaScript再次运行直至清空所有任务，这就是事件循环。
4 任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为tasks与jobs。
macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
参考链接1：《【JS】深入理解事件循环,这一篇就够了!(必看)》https://zhuanlan.zhihu.com/p/87684858
参考链接2：《JS事件循环》https://www.jianshu.com/p/184988903562
五、异步编程
（1）一个程序（program）至少包含一个进程（process），一个进程至少包含一个线程（thread）
（2）Javascript是单线程的，那么为什么Javascript要是单线程的？因为JavaScript为处理页面中用户的交互，以及操作DOM树、CSS样式树来给用户呈现一份动态而丰富的交互体验和服务器逻辑的交互处理。如果JavaScript是多线程的方式来操作这些UI DOM，则可能出现UI操作的冲突
（3）Javascript单线程表现在任何一个函数都要从头到尾执行完毕之后，才会执行另一个函数，界面的更新、鼠标事件的处理、计时器（setTimeout、setInterval等）的执行也需要先排队，后串行执行。假如有一段JavaScript从头到尾执行时间比较长，那么在执行期间任何UI更新都会被阻塞，界面事件处理也会停止响应。这种情况下就需要异步编程模式，目的就是把代码的运行打散或者让IO调用（例如AJAX）在后台运行，让界面更新和事件处理能够及时地运行
// 同步
// 同步会逐行执行代码，会对后续代码造成阻塞，直至代码接收到预期的结果之后，才会继续向下执行。
console.log(1);
alert("同步");
console.log(2);
// 结果：
// 1
// 同步
// 2
// 异步
// 如果在函数返回的时候，调用者还不能够得到预期结果，而是将来通过一定的手段得到结果（例如回调函数），这就是异步
console.log(1);
setTimeout(() => {
alert("异步");
},0);
console.log(2);
// 结果：
// 1
// 2
// 异步（4）异步编程的方法
1 回调函数（callback）
2 事件监听：监听函数有on，bind，listen，addEventListener，observe
3 发布/订阅：我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行
4 promise对象
5 async/await
《JavaScript异步编程》https://segmentfault.com/a/1190000015711829
《夯实基础-JavaScript异步编程》https://segmentfault.com/a/1190000014874668
《浅析JavaScript异步》https://www.cnblogs.com/aaron---blog/p/10903118.html
《JavaScript异步精讲，让你更加明白Js的执行流程！》https://www.jianshu.com/p/ab1a02e863be
《js处理异步的几种方式》https://www.cnblogs.com/zuobaiquan01/p/8477322.html#autoid-4-0-0
六、浏览器储存
1 Cookie：指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。通过cookie,服务器可以知道请求是来自哪个客户端，就可以进行客户端状态的维护，根据cookie值的内容就可以判断和恢复一些用户的信息状态。
2 LocalStorage：以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。每个域名限制5M
3 SessionStorage：它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话(session)结束时（通常是该窗口关闭）会被清除
《浏览器存储》https://www.jianshu.com/p/0b4c0274a35a
《几种浏览器存储方法及其优缺点》https://cloud.tencent.com/developer/article/1356670
《cookies、sessionStorage和localStorage解释及区别》https://www.cnblogs.com/pengc/p/8714475.html
https://developers.google.com/web/tools/chrome-devtools/storage/cookies
七、跨域
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。
《URL的构成》https://www.jianshu.com/p/406d19dfabd3
《JavaScript 九种跨域方式实现原理》https://www.jb51.net/article/156046.htm
《js处理的8种跨域方法》https://www.cnblogs.com/lcspring/p/11079754.html
八、Webpack打包
Webpack可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等
《深入浅出 Webpack》https://webpack.wuhaolin.cn/
《webpack 中文文档(v4.15.1)》http://webpack.html.cn/
end
