7.19记录 有jsonp 事件循环 函数调用
事件循环
1. js引擎是单线程的，JS只有处理完同步的JS代码才执行异步代码
2. 浏览器：运行js的环境，浏览器内核是多线程的
3. 执行引擎：浏览器内核的一个模块，用于执行js代码
4. 进程和线程
1. 进程：操作系统在启动一个应用程序时，会给他分配一个进程地址独立的内存空间
2. 线程：一个应用程序在运行的时候可能会出现很多任务（监听事件，渲染页面，网络通信，执行js代码
线程之间共享内存空间
5. 单线程：浏览器执行js的时候只有一个线程在执行，
6. ```
就是一个浏览器就js执行线程，计时器线程，监听事件线程，渲染页面等等
所以才说只有一个线程在执行
比如settimeout本来执行到这里执行线程就会通知计时器线程计时，执行线程就继续执行， 到了时间才执行settimeou
7. 为什么说JS是一个基于异步的语言
当某个时机到达后，执行某一段代码
8. **执行栈**：
1. 当JS代码开始运行时，会在执行栈中加入一个「全局上下文」活动对象（能访问到的函数和变量）
2. 开始执行JS代码
3. 如果遇到函数调用，会向执行栈中加入一个函数执行的上下文
9. 事件循环
1. 执行栈按照代码顺序执行代码
2. 当遇到其他线程的代码的时候就通知其他线程
3. 其他线程，条件满足后，会将回调函数推到事件队列
4. 执行栈只有清空之后才会从事件队列取出函数
- 事件队列有两种，取事件的时候，会优先取微队列中的东西
- 宏队列：绝大部分异步函数都进入宏队列
- 微队列：Promise的回调、MutationObserver
GUI渲染线程负责渲染浏览器界面，当界面需要重绘或由于某种操作引发回流时,该线程就会执行。渲染线程与js引擎是互斥的，当js引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行
所以这里也能知道script标签要放在页面的底部不然会阻碍其他资源
当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系所有这些事件都得排队等待JavaScript
setTimeout为何能在单线程的js里异步执行 可以用上面回答
#####函数调用this指向-----this关键字只与函数的执行环境有关，而与声明环境没有关系
1. 函数调用模：window，
function fn(){
console.log(this);//指向window;
}
fn();
2. 方法调用模式：调用函数的实例对象，主要看谁去调用，this就指向谁;
3. 构造函数调用模式：构造函数new里面，this指向新建的那个对象；
4. 上下文调用模式（借用方法模式）apply与call
+ call方法可以调用一个函数，并且可以指定这个函数的this指向，所有函数都可以使用call进行调用，
参数1：指定函数的this，如果没有则指向window;
第二个参数是函数的参数
+ apply方法，
与call方法类似，apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表，（apply是数组，call则是若干参数）
+ bind方法
bind与call或apply最大的区别就是bind不会被立即调用，而是返回一个函数，函数内部的this指向与bind执行时的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。
```
let obj = {
name: 'wujia',
fn: function (a, b, c) {
this.age = 20
console.log(this.name, a, b, c)
}
}
window.name = '吴佳'
let nFn = obj.fn.bind(window, '第一个参数')
new nFn('第二个参数','第三个参数')
// 最后输出结果：Undefined，第一个参数，第二个参数，第三个参数
//因为new这个关键字会让this指向本身的实例对象 所以bind就没有效果了
```
指定为null和undefined的this值会自动指向window。如果指定为数字或字符串或者布尔值的this值，则会指向该值的包装对象。
var out = 25, inner = { out: 20, func: function () { var out = 30; return this.out; } }; console.log(inner.func()); // 20 console.log((inner.func)()) //20
详述js new操作
1. 隐式的创建一个对象
2. 把传入的参数绑定到这个对象上或者其他代码
3. 返回这个对象
手写jsonp
1. 原理：html有三种资源可以跨域访问，js脚本，css样式文件，图片
2. 所以就利用<script>标签可以链接到不同源的js脚本，
3. 就是动态添加script标签获取返回来的函数字符串调用，下面就是一个比较完整的过程https://www.cnblogs.com/digdeep/p/4170059.html
4.https://mp.weixin.qq.com/s?src=11×tamp=1595128447&ver=2469&signature=nyxqxcQT9N***tzclvWETSptI3PvySs-UcDj1QnnXEdL1plyD35TyPMfNBkQjlIDN89X9alWLA9c2coHMsATObvpYryB0xANGmGSB87tz6OPUlUHgc*9KmELz7JnfX*7&new=1
清楚浮动
响应式布局
css动画
