zoukankan      html  css  js  c++  java
  • 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动画

  • 相关阅读:
    JS 函数—函数内部:arguments、this、,caller、new.target
    JS—函数概述
    Number API
    Object-API—02
    03构建之法阅读笔记之一
    4月第二次每周总结(4月15日)
    电梯演讲
    个人作业3—折线图
    个人作业3—china.jsp设置页面
    每周总结(4月8日)
  • 原文地址:https://www.cnblogs.com/zjj-study/p/13340119.html
Copyright © 2011-2022 走看看