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. 上下文调用模式(借用方法模式)applycall

+ call方法可以调用一个函数,并且可以指定这个函数的this指向,所有函数都可以使用call进行调用,

  参数1:指定函数的this,如果没有则指向window;

  第二个参数是函数的参数

+ apply方法,

  call方法类似,apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表,(apply是数组,call则是若干参数)

+ bind方法

  bindcallapply最大的区别就是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就没有效果了

  ```

 指定为nullundefinedthis值会自动指向window。如果指定为数字或字符串或者布尔值的this值,则会指向该值的包装对象。

https://mp.weixin.qq.com/s?src=11×tamp=1595127455&ver=2469&signature=6NV99vcDprAWfKqu6gYKN7z-u4OzQ4fs0hPyzS269HRL7y*TorvuUQZLWbPKOMoCS3jdRUNwdrbg45k8n2rfrHfZaUnuEjxH7UVUlBPSaor56HsRYf1Zw0KNuiVyImMu&new=1

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动画

原文地址:https://www.cnblogs.com/zjj-study/p/13340119.html