js基础语法问题 #

• 持久化存储
• for-in,for-of,foreach 区别
• arguments,...values,callee,caller,this,call,apply,bind 用法
• height 和 top 与 y
• delete 操作符
• 变量的解构赋值
• 深入理解promise
• 可迭代对象
• reflect
• 深冻结
• 数组的理解
• MutationObserver
• blob
• webApi
• 全部替代一个子串为另一个子串
• isNaN和Number.isNaN函数的区别
• reduce用法
• 获取图片原始宽高
• JSON
• parseInt与Number
• DOM操作大全
• 代码简洁化
• 元素包含与点击元素外面
• IntlAPI与ECMAScript攻略
• 特殊事件与自定义事件
• 媒体查询匹配
• iframe
• IntersectionObserver
• getComputedStyle

持久化存储 #

1. 参考链接：

持久化存储与 HTTP 缓存

理解 cookie、session、localStorage、sessionStorage 之不同

浏览器数据库 IndexedDB 入门教程

「2021」高频前端面试题汇总之浏览器原理篇

2. 详解：

• LocalStorage

  关闭浏览器后，数据不会丢失

  javascript

  //1. 添加键、值
  localStorage.setItem(key, value);
  //2. 获得键、值
  localStorage.getItem(key);
  //3.清空localStorage
  localStorage.clear();
  

  特点：

  • LocalStorage 跟 HTTP 无关，发送请求不会带上 LocalStorage 的值
  • 只有相同域名的页面才能互相读取 LocalStorage
  • 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
  • 常用场景：浏览器端储存数据（不能记录密码等敏感信息）
  • LocalStorage 永久有效，除非用户清理缓存

• SessionStorage

  会话结束后，数据丢失

  javascript

  //1. 添加键、值
  sessionStorage.setItem(key, value);
  //2. 获得键、值
  sessionStorage.getItem(key);
  //3.清空sessionStorage
  sessionStorage.clear();
  

  特点同上

• indexdb

  • 描述

    IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

  • 特点

    1. 键值对储存

    IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

    2. 异步

    IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

    3. 支持事务（transaction）

    IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

    4. 同源限制

    IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

    5. 储存空间大

    IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

    6. 支持二进制储存

    IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

  • 储存路径

    1. windows 版本

    C:\Users\用户\AppData\Local\Google\Chrome\User Data\Default\IndexedDB

    2. linux 版本

    /home/用户/.config/google-chrome/Default/IndexedDB/

  • 操作

    javascript

    //打开数据库
    var request = window.indexedDB.open(databaseName, version);
    request.onerror = function (event) {
      console.log("数据库打开报错");
    };
    var db;
    request.onsuccess = function (event) {
      db = request.result;
      console.log("数据库打开成功");
    };
    var db;
    //如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件(数据库从无到有的新建过程也触发此事件)
    request.onupgradeneeded = function (event) {
      //新建数据库
      db = event.target.result;
      //新建表
      var objectStore;
      if (!db.objectStoreNames.contains("person")) {
        objectStore = db.createObjectStore(
          "person",
          { keyPath: "id" }, //主键是id
          { autoIncrement: true } //自增
        );
        //创建索引
        objectStore.createIndex("name", "name", { unique: false });
        objectStore.createIndex("email", "email", { unique: true });
      }
    };
    //通过事务添加数据
    function add() {
      var request = db
        .transaction(["person"], "readwrite")
        .objectStore("person")
        .add({
          id: 1,
          name: "张三",
          age: 24,
          email: "[email protected]",
        });
    
      request.onsuccess = function (event) {
        console.log("数据写入成功");
      };
    
      request.onerror = function (event) {
        console.log("数据写入失败");
      };
    }
    //读取数据
    function read() {
      var transaction = db.transaction(["person"]);
      var objectStore = transaction.objectStore("person");
      var request = objectStore.get(1);
    
      request.onerror = function (event) {
        console.log("事务失败");
      };
    
      request.onsuccess = function (event) {
        if (request.result) {
          console.log("Name: " + request.result.name);
          console.log("Age: " + request.result.age);
          console.log("Email: " + request.result.email);
        } else {
          console.log("未获得数据记录");
        }
      };
    }
    //遍历数据
    function readAll() {
      var objectStore = db.transaction("person").objectStore("person");
    
      objectStore.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;
    
        if (cursor) {
          console.log("Id: " + cursor.key);
          console.log("Name: " + cursor.value.name);
          console.log("Age: " + cursor.value.age);
          console.log("Email: " + cursor.value.email);
          cursor.continue();
        } else {
          console.log("没有更多数据了！");
        }
      };
    }
    //更新数据
    function update() {
      var request = db
        .transaction(["person"], "readwrite")
        .objectStore("person")
        .put({ id: 1, name: "李四", age: 35, email: "[email protected]" });
    
      request.onsuccess = function (event) {
        console.log("数据更新成功");
      };
    
      request.onerror = function (event) {
        console.log("数据更新失败");
      };
    }
    //删除数据
    function remove() {
      var request = db
        .transaction(["person"], "readwrite")
        .objectStore("person")
        .delete(1);
    
      request.onsuccess = function (event) {
        console.log("数据删除成功");
      };
    }
    //使用索引
    var transaction = db.transaction(["person"], "readonly");
    var store = transaction.objectStore("person");
    var index = store.index("name");
    var request = index.get("李四");
    
    request.onsuccess = function (e) {
      var result = e.target.result;
      if (result) {
        // ...
      } else {
        // ...
      }
    };
    

• Cookie

  Cookie 是存放在浏览器端的数据，每次都随请求发送给 Server。存储 cookie 是浏览器提供的功能。cookie 其实是存储在浏览器中的纯文本，浏览器的安装目录下会专门有一个 cookie 文件夹来存放各个域下设置的 cookie。

  • 特点：
  • 服务器通过 Set-Cookie 头给客户端一串字符串
  • 客户端每次访问相同域名的网页时，必须带上这段字符串
  • 客户端要在一段时间内保存这个 Cookie
  • Cookie 默认在用户关闭页面后就失效，代码可以任意设置 Cookie 的过期时间，max-age 和 Expires
  • 大小大概在 4kb 以内

  • Cookie字段组成：

    • Name：cookie的名称
    • Value：cookie的值，对于认证cookie，value值包括web服务器所提供的访问令牌；
    • Size： cookie的大小
    • Path：可以访问此cookie的页面路径。 比如domain是abc.com，path是/test，那么只有/test路径下的页面可以读取此cookie。
    • Secure： 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。
    • Domain：可以访问该cookie的域名，Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围。
    • HTTP： 该字段包含HTTPOnly 属性 ，该属性用来设置cookie能否通过脚本来访问，默认为空，即可以通过脚本访问。在客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置。该属性用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。
    • Expires/Max-size ： 此cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

  • 总结

    服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间，domain 是域名、path是路径，domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问。

  javascript

  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
  }
  
  function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i].trim();
      if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
  }
  
  function delete(cname) {
    var date = new Date();
    date.setTime(date.getTime() - 10000);
    document.cookie = cname + "=; expires =" + date.toGMTString();
  }
  

• Session

  Session 是基于 Cookie 实现的，它利用一个 sessionId 把用户的敏感数据隐藏起来，在 Set-Cookie 上，使用随机数来做 sessionId,最终只是把这串随机数暴露给外界，而真正的信息却保存在了服务器端的 sessions 对象里面。它就像一个密码簿一样，有效的信息与 sessionId 一一对应,当下次用户访问该网站的其他页面的时候，就会带着登录时服务器给的这个 sessionId。

  特点：

  • 将 SessionID（随机数）通过 Cookie 发给客户端
  • 客户端访问服务器时，服务器读取 SessionID
  • 服务器有一块内存（哈希表）保存了所有 session
  • 通过 SessionID 可以得到对应用户的隐私信息
  • 这块内存（哈希表）就是服务器上的所有 session

• 注意

  cookie、localstorage、sessionstorage 不可跨域：在不同同源 url 下，获取到不同的数据，只有同源 url 才共享数据。

for-in,for-of,foreach 区别 #

1. 参考链接：

   for、for in 和 for of 和 forEach 的区别

2. 详解：

   • for 一般用于循环数组
   • for-in 可循环数组、对象，会循环出下标、键值，可通过 data[key]访问
   • for-of 在 Array、Object、Set、Map 中都可以使用，会循环出值，直接访问 value 即可
   • forEach 循环在 Array、Set、Map 中都可以使用，用法：**.forEach(function(value,key){})

arguments,...values,callee,caller,call,apply,bind 用法 #

1. 参考链接：

   callee、caller、call、apply、bind 这些方法的含义和使用

   Javascript arguments 详解

   JS 中 this 到底指向谁？

   彻底搞懂 JS 中 this 机制

   ECMAScript 6 入门

   jQuery 源码中大量 push.call();splice.call();

   前端面试题——自己实现 call 和 apply

   JavaScript 直接调用函数与 call 调用的区别

   JS 中 new 运算符的实现原理

   js 手动实现 new 方法

   前端面试大厂手写源码系列（上）

   8 个原生 JS 知识点 | 面试高频

   一张图看懂Function和Object的关系及简述instanceof运算符

   面试造火箭，看下这些大厂原题

   详细讲解new一个对象的过程，含详细constructor, proto, prototype 关系图

2. 详解：

   • arguments

   arguments 用在函数内部,arguments.length 表示传入参数的个数，arguments.callee.length 表示函数自身参数的个数，可用 for in 或 for of 或 for 0~length-1 遍历参数

   javascript

   function add(a, b) {
     console.log(arguments, arguments.length, arguments.callee.length);
   }
   //add(1,2,3)
   //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
   // 3
   // 2
   

   • ...values

   ...values 是 es6 语法，可替代 arguments，数组储存传入的参数,for of 遍历参数较为方便

   javascript

   function add(...values) {
     console.log(values);
   }
   add(1, "a", [0], { a: 1 }, function () {});
   //[1, "a", Array(1), {…}, ƒ]
   

   • callee

   callee 指向函数自身，用在函数内部，用于解耦或配合 arguments 使用

   javascript

   //正常递归
   function factorial(num) {
     if (num <= 1) {
       return 1;
     } else {
       return num * factorial(num - 1);
     }
   }
   //下面的不规范行为，导致函数指向错误
   var testFactorial = factorial;
   factorial = function () {
     return 0;
   };
   testFactorial(5); //0
   //修改方法
   function factorial(num) {
     if (num <= 1) {
       return 1;
     } else {
       return num * arguments.callee(num - 1);
     }
   }
   
   var testFactorial = factorial;
   factorial = function () {
     return 0;
   };
   console.log(testFactorial(5)); //120
   

   • caller

   caller 用法是：函数名.caller，如果函数是顶层函数（没有外层函数调用），则为 null，如果有外层函数，则指向外层函数。

   javascript

   function outer() {
     inner();
   }
   function inner() {
     console.log(inner.caller);
   }
   outer(); //显示outer的源代码
   

   • this

     this 指向的对象为函数的上下文 context，即函数的调用者。

     • 默认绑定：window 回调函数:函数名()调用或 window 函数回调（setTimeout、setInterval），this 指向 window
     • 隐式绑定：多层调用链:函数作为数组的一个元素，通过数组下标调用，this 指向这个数组，对象 1.对象 2.函数名()调用，this 指向对象 2
     • new 绑定：函数作为构造函数，用 new 关键字调用，this 指向新 new 出的对象
     • 显式绑定:call,apply 导致 this 指向第一个参数指定的地方，对于 null 和 undefined 的绑定将不会生效
     • 箭头函数只取决于外层（函数或全局）的作用域，对于前面的 4 种绑定规则是不会生效，因此需要外层 var that = this，供箭头函数内部使用

     注意：function 中嵌 function，this 全指向 window。使用 axios 和$ajax 对象，需保存外部 this，避免指向对象本身。

   • call,apply

     call,apply 用于改变函数执行的作用域，即改变函数体内 this 的指向。区别在于：call 的第二个参数起要逐一列出，apply 第二个参数可以是 array 或 arguments

     javascript

     window.color = "red";
     var o = {
       color: "blue",
     };
     function sayColor(color) {
       console.log(this.color + " param:" + color);
     }
     sayColor("black"); //red param:black
     
     sayColor.call(window, "black"); //red param:black
     sayColor.apply(window, ["black"]); //red param:black
     
     sayColor.call(o, "black"); //blue param:black
     sayColor.apply(o, ["black"]); //blue param:black
     

     • 合并数组

       javascript

       var arr1 = [1, 2, 3];
       var arr2 = [4, 5, 6];
       var arr3 = Array.prototype.push.call(arr1, arr2);
       console.log(arr3);
       console.log(arr1);
       console.log(arr2);
       4(4)[(1, 2, 3, Array(3))](3)[(4, 5, 6)];
       
       var arr1 = [1, 2, 3];
       var arr2 = [4, 5, 6];
       var arr3 = Array.prototype.push.apply(arr1, arr2);
       console.log(arr3);
       console.log(arr1);
       console.log(arr2);
       6(6)[(1, 2, 3, 4, 5, 6)](3)[(4, 5, 6)];
       
       //造成输出的区别，是因为call的第二个参数起是枚举，apply的第二个参数是数组
       var arr1 = [1, 2, 3];
       var arr2 = [4, 5, 6];
       var arr3 = Array.prototype.push.call(arr1, ...arr2);
       console.log(arr3);
       console.log(arr1);
       console.log(arr2);
       4(6)[(1, 2, 3, 4, 5, 6)](3)[(4, 5, 6)];
       

     • 对象转数组

       javascript

       var obj = { 0: "hello", 1: "world", length: 2 };
       console.log(Array.prototype.slice.call(obj));
       (2)[("hello", "world")];
       
       var obj = { 0: "hello", 1: "world", length: 2 };
       console.log(Array.prototype.slice.apply(obj));
       (2)[("hello", "world")];
       

     • 获取索引

       javascript

       var arr = [1, 2, 3];
       console.log(Array.prototype.indexOf.call(arr, 2));
       1;
       
       var arr = [1, 2, 3];
       console.log(Array.prototype.indexOf.apply(arr, [2]));
       1;
       

     • 自己实现 call 和 apply

       javascript

       var person = {
         fullName: function (txt) {
           console.log(txt + this.firstName + " " + this.lastName);
         },
       };
       var person1 = {
         firstName: "John",
         lastName: "Doe",
       };
       person.fullName.call(person1, "Hello, ");
       person.fullName.apply(person1, ["Hello, "]);
       Function.prototype.myOwnCall = function (context) {
         context = context || window; //如果第一个参数传入的是null的情况下，this会指向window
         //防止与原对象方法重名
         var uniqueID = "00" + Math.random();
         while (context.hasOwnProperty(uniqueID)) {
           uniqueID = "00" + Math.random();
         }
         context[uniqueID] = this; //记录为调用的函数
         //Array.from(arguments).slice(1)
         var args = [];
         for (var i = 1; i < arguments.length; i++) {
           args.push("arguments[" + i + "]");
         }
         var result = eval("context[uniqueID](" + args + ")"); //传入参数，执行函数，处理函数返回值
         delete context[uniqueID]; //清除给原对象新增的方法
         return result;
       };
       Function.prototype.myOwnApply = function (context, arr) {
         context = context || window; //如果第一个参数传入的是null的情况下，this会指向window
         //防止与原对象方法重名
         var uniqueID = "00" + Math.random();
         while (context.hasOwnProperty(uniqueID)) {
           uniqueID = "00" + Math.random();
         }
         context[uniqueID] = this; //记录为调用的函数
       
         var args = [];
         var result = null;
       
         if (!arr) {
           result = context[uniqueID](); //没有第二个参数的情况
         } else {
           //有第二个参数的情况
           //Array.from(arguments).slice(1)
           for (var i = 0; i < arr.length; i++) {
             args.push("arr[" + i + "]");
           }
           result = eval("context[uniqueID](" + args + ")");
         }
         delete context[uniqueID]; //清除给原对象新增的方法
         return result;
       };
       person.fullName.myOwnCall(person1, "Hello, ");
       person.fullName.myOwnApply(person1, ["Hello, "]);
       Function.prototype._apply = function (targetObject, argsArray) {
           // 是否传入执行上下文，若没有指定，则指向 window
           targetObject = targetObject || window;
           // 若是没有传递，则置为空数组
           argsArray = argsArray || [];
           // 利用Symbol的特性，设置为key
           const targetFnKey = Symbol("key");
           // 将调用_apply的函数赋值
           targetObject[targetFnKey] = this;
           // 执行函数，并在删除之后返回
           const result = targetObject[targetFnKey](...argsArray);
           delete targetObject[targetFnKey];
           return result;
       };
       Function.prototype._call = function (targetObject, ...argsArray) {
           // 是否传入执行上下文，若没有指定，则指向 window
           targetObject = targetObject || window;
           // 利用Symbol的特性，设置为key
           const targetFnKey = Symbol("key");
           // 将调用_call的函数赋值
           targetObject[targetFnKey] = this;
           // 执行函数，并在删除之后返回
           const result = targetObject[targetFnKey](...argsArray);
           delete targetObject[targetFnKey];
           return result;
       };
       

   • 直接调用与call、apply区别

     1. 情景1：使用自身对象不存在的方法，无法直接调用，如arguments想使用Array.prototype.slice

     2. 情景2：改变this指向，产生于直接调用不同的结果

        javascript

        var x = "我是全局变量";
        function a(){
            this.x = "我是在函数类结构a中声明的哦";
        }
        function f(){
            alert (this.x);
        }
        f();//输出：“我是全局变量”
        f.call(new a());//输出：“我是在函数类结构a中声明的哦”
        

     3. 情景3：上面2种情况都不是，和直接调用没区别

   • bind

   bind方法会创建一个函数实例,this会被绑定到传给bind()函数的值

   f.bind(obj)，实际上可以理解为obj.f()

   从第二个参数起，会依次传递给原始函数

   javascript

   window.color = 'red'
   var o = {
       color:'blue'
   }
   function sayColor(color){
       console.log(this.color)
   }
   var objSayColor = sayColor.bind(o);
   objSayColor(); //blue
   

   javascript

   // 方法一，只可绑定，不可传参
   Function.prototype.my_bind = function(context){
       var self = this;
       return function(){
           self.apply(context,arguments);
       }
   }
   Function.prototype.my_bind = function() {
       // 保存原函数
       var self = this,
       // 保存需要绑定的this上下文(获取传入的第一个参数),等价于 context = [].shift.call(arguments);
       context = Array.prototype.shift.call(arguments),
       // 剩余的参数转为数组
       args = Array.prototype.slice.call(arguments);
       // 返回一个新函数
       return function() {
           //处理a.my_bind(b, 7, 8)(9)多次传参的情况;
           //此处的arguments与上方的arguments，不是同一个arguments
           self.apply(context, Array.prototype.concat.call(args, Array.prototype.slice.call(arguments)));
       }
   }
   Function.prototype.my_bind = function(context,...args) {
       var self = this;
       context = context || window;
       args = args || [];
       return function(...rest) {
           self.apply(context, args.concat(rest));
       }
   }
   

   • new

     constructor, proto, prototype 关系图:

     

     new运算符背后的步骤：

     • 创建一个空对象
     • 链接到原型
     • 绑定this值
     • 返回新对象
     javascript

     class a1{
       constructor(val){
         this.val = val
         this.a1 = function(){
           console.log(this.val)
         }
       }
       a2(){
     
       }
     }
     function a(val){
       this.val = val;
       this.a1 = function(){
         console.log(this.val)
       }
     }
     a.prototype.a2 = function(){}
     let b = new a1(1);
     let c = _new(a,1);//传a1会报错，es6的class必须new，否则apply报错:Uncaught TypeError: Class constructor a1 cannot be invoked without 'new'
     console.log(b,c)
     

     javascript

     function create(){
         //创建一个空对象
         let obj = new Object();
         //获取构造函数
         let fn = [].shift.call(arguments);
         //链接到原型
         obj.__proto__ = fn.prototype;
         //绑定this值
         let result = fn.apply(obj,arguments);//使用apply，将构造函数中的this指向新对象，这样新对象就可以访问构造函数中的属性和方法
         //返回新对象
         return typeof result === "object" ? result : obj;//如果返回值是一个对象就返回该对象，否则返回构造函数的一个实例对象
     }
     

     javascript

     function _new() {
         let target = {};
         let [constructor, ...args] = [...arguments];
         console.log(constructor,args)
         target.__proto__ = constructor.prototype;
         let result = constructor.apply(target,args);
         if(result && (typeof result == 'object' || typeof result == 'function')) return result;
         return target;
     }
     

   • typeof

   对于 typeof, 可以正确判断除了null之外的所有基本类型，而对于引用类型，除了函数外其他都会被判断为object。

   javascript

   // 输出 function
   console.log(typeof (() => {}))
   
   // 输出 object
   console.log(typeof [[前端有的玩','公众号'])
   
   // 输出 object
   console.log(typeof null)
   
   // 输出 undefined
   console.log(typeof undefined)
   
   // 输出 function 
   console.log(typeof Function.prototype)
   

   • instanceof

     简写:a instanceof b ,判断a是否b的实例，即a从b处new出来

     javascript

     a.__proto__ == b.prototype 或
     a.constructor == b
     

     详细:[]是Array实例，也是Object实例

     javascript

     function instanceOf(left,right) {
         let proto = left.__proto__;
         let prototype = right.prototype;
         while(true) {
             if(proto === null) return false
             if(proto === prototype) return true
             proto = proto.__proto__;
         }
     }
     

     对于instanceof,无法判断基本类型，但可以正确判断引用类型

     javascript

     Function instanceof Object;//true
     Object instanceof Function;//true
     
     //①构造器Function的构造器是它自身
     Function.constructor=== Function;//true
     
     //构造器Object的构造器是Function（由此可知所有构造器的constructor都指向Function）
     Object.constructor === Function;//true
     
     //③构造器Function的__proto__是一个特殊的匿名函数function() {}
     console.log(Function.__proto__);//function() {}
     
     //这个特殊的匿名函数的__proto__指向Object的prototype原型。
     Function.__proto__.__proto__ === Object.prototype//true
     
     //Object的__proto__指向Function的prototype，也就是上面③中所述的特殊匿名函数
     Object.__proto__ === Function.prototype;//true
     Function.prototype === Function.__proto__;//true
     
     Function.__proto__.__proto__ === Object.prototype;//true
     Object.__proto__ === Function.prototype;//true
     
     //1、所有的构造器的constructor都指向Function
     //2、Function的prototype指向一个特殊匿名函数，而这个特殊匿名函数的__proto__指向Object.prototype
     
     // 输出 false
     console.log('子君' instanceof String)
     
     // 输出 true
     console.log(new Date() instanceof Date)
     

   • object.create

     会将参数对象作为一个新创建的空对象的原型, 并返回这个空对象，且继承原对象

     使用方式

     javascript

     function Person(name, sex) {
       this.name = name;
       this.sex = sex;
     }
     Person.prototype.getInfo = function() {
       console.log('getInfo: [name:' + this.name + ', sex:' + this.sex + ']');
     }
     var a = new Person('jojo', 'femal');
     var b = Object.create(Person.prototype, {
       name: {
         value: 'coco',
         writable: true,
         configurable: true,
         enumerable: true,
       },
       sex: {
         enumerable: true,
         get: function(){ return 'hello sex'},
         set: function(val){console.log('set value:' + val)}
       }
     });
     console.log(a,b)
     

     手写

     javascript

     function _create(obj){
         function C(){}
         C.prototype = obj;
         return new C();
     }
     
     var obj1 = {name: "Lilei"};
     var lilei = _create(obj1);
     lilei; // {}
     lilei.name; // "Lilei"
     

height 和 top 与 y #

1. 参考链接：

   Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9

   getBoundingClientRect 的用法

   js 窗口尺寸获取常用属性

   mousedown和mousemove的时候，offsetX和offsetY坐标不准确

2. 详解：

   外层蓝色父元素与包裹内层红色子元素，虚线与实线间为 margin，深色区为 border-width，内虚线到深色区为 padding，内层灰色区为滚动区。

   

   • object.getBoundingClientRect()

     获取元素相对于视窗的位置集合，集合中有 top, right, bottom, left 等属性。

     

   • height 相关

     • box-sizing:border-box 怪异模式

       totalHeight=contentHeight(padding 向内收)+margin

     • box-sizing:content-box 标准模式

       totalHeight=contentHeight+padding(padding 向外张)+border+margin

   • scroll 相关

     • scrollTop:距离滚动区顶部距离
     • scrollHeight:滚动区高度

   • offset 相关

     • offsetTop:距离父元素顶部距离(不包含边线)

     • offsetHeight:距离父元素顶部距离(包含边线)

     • offsetY:指针距离元素顶部距离(不含 border，旋转不变)

       • mousedown和mousemove的时候，offsetX和offsetY坐标不准确问题

         javascript

         mousedownEvent(event){
           let rect = event.currentTarget.getBoundingClientRect();
           let offsetX = event.clientX - rect.left;
           let offsetY = event.clientY - rect.top;
         }
         mousemoveEvent(event) {
           let left = event.clientX - offsetX;
           let top = event.clientY - offsetY;
         }
         

       • touch不存在offsetX问题(无法直接获取触摸点在元素中哪个位置)

         javascript

         touchstartEvent(enent){
           //touches[0]表示触摸的第一只手指
           let offsetX = event.touches[0].clientX - event.currentTarget.getBoundingClientRect().x;
         }
         //touches: TouchList
         //0: Touch
         //clientX: 852
         //clientY: 702.6666870117188
         //force: 1
         //identifier: 0
         //pageX: 852
         //pageY: 702.6666870117188
         //radiusX: 15.333333015441895
         //radiusY: 15.333333015441895
         //rotationAngle: 0
         //screenX: 639
         //screenY: 697
         

   • layer 相关

     • layerY:指针距离元素顶部距离(含 border，旋转不变)

   • client 相关

     • clientTop:边框厚度，相当于 borderTopWidth
     • clientHeight:包含 padding 的内容高度，不包括滚动
     • clientY:指针距离可视区顶部距离

   • page 相关

     • pageY:指针距离文档顶部距离

   • screen 相关

     • screenY:指针距离屏幕顶部距离

   • y:指针相对于当前文档 y 坐标

   • 实践(视频进度条与音量条)(能完美贴合触点，能在元素外移动)

     html

     <template>
       <div class="my-video" ref="videoComponent">
         <video class="video-content" :src="src" ref="videoContent"></video>
         <p class="video-title">{{title}}</p>
         <div class="video-control">
             <div class="video-start" @click="play()" v-show="!playing">始</div>
             <div class="video-stop" @click="pause()" v-show="playing">停</div>
             <div class="video-next">下</div>
             <div class="video-now">{{now}}</div>
             <div class="video-progress" @mousedown.stop="mousedownProgress($event)" @touchstart.stop="touchstartProgress($event)" @touchmove.stop="touchstartProgress($event)" ref="progress">
                 <div class="progress-bar" :style="{width:progress +'%'}">
                     <div class="progress-button" @mousedown.stop="mousedownProgressButton($event)" @touchstart.stop="touchstartProgress($event)" @touchmove.stop="touchstartProgress($event)"></div>
                 </div>
             </div>
             <div class="video-total">{{total}}</div>
             <div class="video-voice" @click.stop="showVoice = !showVoice">
                 <div class="voice-box" @click.stop="" v-if="showVoice">
                     <p class="voice-number">{{voice}}</p>
                     <div class="voice-bg" @mousedown.stop="mousedownVoice($event)" @touchstart.stop="touchstartVoice($event)" @touchmove.stop="touchstartVoice($event)" ref="voice">
                         <div class="voice-bar" :style="{height:voice +'%'}">
                             <div class="voice-botton" @mousedown.stop="mousedownVoiceButton($event)" @touchstart.stop="touchstartVoice($event)" @touchmove.stop="touchstartVoice($event)"></div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="video-full" @click="full()" v-show="!fullscreen">全</div>
             <div class="video-exit" @click="exit()" v-show="fullscreen">退</div>
         </div>
       </div>
     </template>
     
     <script>
     export default {
       name: 'my-video',
       props: {
           title: [String],
           src: [String]
       },
       data() {
           return {
               playing: false,
               fullscreen: false,
               nowTimer: null,
               now: 0,
               progress: 0,
               total: 100,
               voice: 0,
               showVoice: false
           };
       },
       methods: {
           openFullscreen(element) {
               if (element.requestFullscreen) {
                   element.requestFullscreen();
               } else if (element.mozRequestFullScreen) {
                   element.mozRequestFullScreen();
               } else if (element.msRequestFullscreen) {
                   element.msRequestFullscreen();
               } else if (element.webkitRequestFullscreen) {
                   element.webkitRequestFullScreen();
               }
           },
           exitFullScreen() {
               if (document.exitFullscreen) {
                   document.exitFullscreen();
               } else if (document.mozCancelFullScreen) {
                   document.mozCancelFullScreen();
               } else if (document.msExitFullscreen) {
                   document.msExiFullscreen();
               } else if (document.webkitCancelFullScreen) {
                   document.webkitCancelFullScreen();
     
               } else if (document.webkitExitFullscreen) {
                   document.webkitExitFullscreen();
               }
           },
           play() {
               this.$refs.videoContent.play();
               this.playing = true;
               this.nowTimer = setInterval(() => {
                   this.getCurrentTime();
                   this.getProgress();
               },1000);
           },
           pause() {
               this.$refs.videoContent.pause();
               this.playing = false;
               clearInterval(this.nowTimer);
           },
           getDuration() {
               let video = this.$refs.videoContent;
               let getVideo = setInterval(()=>{
                   if (!isNaN(video.duration)) {
                       let total = parseInt(video.duration);
                       let integer = parseInt(total / 60);
                       let decimal = total - integer * 60;
                       this.total = (integer < 10 ? "0" + integer : integer) + ":" + (decimal < 10 ? "0" + decimal : decimal);
                       //console.log(video.duration);
                       clearInterval(getVideo);
                   } else {
                       this.total = '正在获取时长...';
                       console.log('正在获取时长...');
                   }
               }, 100);
           },
           getCurrentTime() {
               let now = parseInt(this.$refs.videoContent.currentTime);
               let integer = parseInt(now / 60);
               let decimal = now - integer * 60;
               this.now = (integer < 10 ? "0" + integer : integer) + ":" + (decimal < 10 ? "0" + decimal : decimal);
           },
           getProgress() {
               this.progress = (this.$refs.videoContent.currentTime * 100 / this.$refs.videoContent.duration).toFixed(2);
           },
           setProgress(percent) {
               this.progress = percent;
               if (this.progress > 100) {
                   this.progress = 100;
               }
               else if (this.progress < 0) {
                   this.progress = 0;
               }
               this.$refs.videoContent.currentTime = parseInt(this.$refs.videoContent.duration / 100 * this.progress);
               this.getCurrentTime();
           },
           mousedownProgress(event) {
               let progressPercent = (event.offsetX * 100 / this.$refs.progress.clientWidth).toFixed(2);
               this.setProgress(progressPercent);
               
               let oldX = event.screenX;
               let oldProgress = this.progress;
               let oldTime = new Date().getTime();
               
               document.onmousemove = (e) => {
                   let nowTime = new Date().getTime();
                   if (nowTime - oldTime > 100) {
                       oldTime = nowTime;
     
                       let newX = e.screenX;
                       let left = newX - oldX;
                       let progressMovePercent = parseFloat(oldProgress) + parseFloat((left * 100 / this.$refs.progress.clientWidth).toFixed(2));
                       this.setProgress(progressMovePercent);
                   }
               };
               document.onmouseup = (e) => {
                   document.onmousemove = null;
                   document.onmouseup = null;
               };
           },
           touchstartProgress(event) {
               let offsetX = event.touches[0].clientX - this.$refs.progress.getBoundingClientRect().x;
               let progressPercent = (offsetX * 100 / this.$refs.progress.clientWidth).toFixed(2);
               this.setProgress(progressPercent);
           },
           mousedownProgressButton(event) {
               let oldX = event.screenX;
               let oldProgress = this.progress;
               let oldTime = new Date().getTime();
     
               document.onmousemove = (e) => {
                   let nowTime = new Date().getTime();
                   if (nowTime - oldTime > 100) {
                       oldTime = nowTime;
     
                       let newX = e.screenX;
                       let left = newX - oldX;
                       let progressMovePercent = parseFloat(oldProgress) + parseFloat((left * 100 / this.$refs.progress.clientWidth).toFixed(2));
                       this.setProgress(progressMovePercent);
                   }
               };
               document.onmouseup = (e) => {
                   document.onmousemove = null;
                   document.onmouseup = null;
               };
           },
           getVolume() {
               this.voice = this.$refs.videoContent.volume * 100;
           },
           setVolume(volume) {
               this.voice = volume;
               if (this.voice > 100) {
                   this.voice = 100;
               }
               else if (this.voice < 0) {
                   this.voice = 0;
               }
               this.$refs.videoContent.volume = (this.voice / 100).toFixed(2);
           },
           mousedownVoice(event) {
               let rect = event.currentTarget.getBoundingClientRect();
               //let volume = parseInt((this.$refs.voice.clientHeight - event.offsetY) * 100 / this.$refs.voice.clientHeight);
               let volume = parseInt(this.$refs.voice.clientHeight - (event.clientY - rect.top));
               //console.log(event.offsetY, this.$refs.voice.clientHeight, volume, event.clientY - rect.top)
               this.setVolume(volume);
     
               let oldY = event.screenY;
               let oldVoice = this.voice;
               let oldTime = new Date().getTime();
     
               document.onmousemove = (e) => {
                   let nowTime = new Date().getTime();
                   if (nowTime - oldTime > 100) {
                       oldTime = nowTime;
     
                       let newY = e.screenY;
                       let top = oldY - newY;
                       let volumeMove = parseInt(oldVoice) + parseInt(top * 100 / this.$refs.voice.clientHeight);
                       this.setVolume(volumeMove);
                   }
               };
               document.onmouseup = (e) => {
                   document.onmousemove = null;
                   document.onmouseup = null;
               };
           },
           touchstartVoice(event) {
               let offsetY = event.touches[0].clientY - this.$refs.voice.getBoundingClientRect().y;
               let volume = parseInt(this.$refs.voice.clientHeight - offsetY);
               this.setVolume(volume);
           },
           mousedownVoiceButton(event) {
               let oldY = event.screenY;
               let oldVoice = this.voice;
               let oldTime = new Date().getTime();
     
               document.onmousemove = (e) => {
                   let nowTime = new Date().getTime();
                   if (nowTime - oldTime > 100) {
                       oldTime = nowTime;
     
                       let newY = e.screenY;
                       let top = oldY - newY;
                       let volumeMove = parseInt(oldVoice) + parseInt(top * 100 / this.$refs.voice.clientHeight);
                       this.setVolume(volumeMove);
                   }
               };
               document.onmouseup = (e) => {
                   document.onmousemove = null;
                   document.onmouseup = null;
               };
           },
           full() {
               this.openFullscreen(this.$refs.videoComponent);
               this.fullscreen = true;
           },
           exit() {
               this.exitFullScreen(this.$refs.videoComponent);
               this.fullscreen = false;
           }
       },
       mounted() {
           this.getDuration();
           this.getCurrentTime();
           //console.log(this.$refs.videoContent.volume);
       },
       beforeDestory() {
           clearInterval(this.nowTimer);
       }
     }
     </script>
     
     <!-- Add "scoped" attribute to limit CSS to this component only -->
     <style scoped lang="scss">
     .my-video {
         width: 1200px;
         margin: 0 auto;
         position: relative;
     
         .video-content {
             display: block;
             width: 100%;
             height: 100%;
         }
     
         .video-title {
             position: absolute;
             z-index: 1;
             top: 0;
             left: 0;
         }
     
         .video-control {
             position: absolute;
             z-index: 1;
             bottom: 0;
             left: 0;
             display: flex;
             width: 100%;
             height: 32px;
             background: rgba(0,0,0,.5);
             cursor: pointer;
     
             .video-start {
                 width: 24px;
                 height: 24px;
                 background: #ff0000;
             }
     
             .video-stop {
                 width: 24px;
                 height: 24px;
                 background: #00ff21;
             }
     
             .video-next {
                 width: 24px;
                 height: 24px;
                 background: #ffffff;
             }
     
             .video-now {
                 font-size: 12px;
                 color: #FFFFFF;
                 font-weight: bold;
             }
     
             .video-progress {
                 width: 600px;
                 height: 6px;
                 background: rgba(255,255,255,0.4);
                 border-radius: 3px;
     
                 .progress-bar {
                     background: #00AAFF;
                     height: 6px;
                     width: 0%;
                     border-radius: 3px;
                     position: relative;
     
                     .progress-button {
                         width: 8px;
                         height: 16px;
                         background: #FFFFFF;
                         box-shadow: 0 0 8px 0 rgba(0,170,255,0.50);
                         border-radius: 2px;
                         position: absolute;
                         right: -8px;
                         top: -5px;
                         z-index: 3;
                     }
                 }
             }
     
             .video-total {
                 font-size: 12px;
                 color: #FFFFFF;
                 font-weight: bold;
             }
     
             .video-voice {
                 width: 24px;
                 height: 24px;
                 background: #00AAFF;
                 position: relative;
     
                 .voice-box {
                     position: absolute;
                     width: 24px;
                     height: 160px;
                     background: rgba(0,0,0,.6);
                     border-radius: 2px;
                     bottom: 39px;
                     left: 0;
                     padding: 2px 0;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
     
                     .voice-number {
                         width: 24px;
                         height: 24px;
                         color: #fff;
                         line-height: 24px;
                         font-size: 12px;
                         text-align: center;
                         margin-bottom: 2px;
                     }
     
                     .voice-bg {
                         width: 8px;
                         height: 100px;
                         background-color: #fff;
                         display: flex;
                         flex-direction: column-reverse;
     
                         .voice-bar {
                             width: 8px;
                             background-color: #08f;
                             position: relative;
     
                             .voice-botton {
                                 width: 14px;
                                 height: 14px;
                                 position: absolute;
                                 border-radius: 14px;
                                 background-color: #fff;
                                 top: -7px;
                                 left: -3px;
                                 cursor: pointer;
                             }
                         }
                     }
                 }
             }
     
             .video-full {
                 width: 24px;
                 height: 24px;
                 background: #ff6a00;
             }
     
             .video-exit {
                 width: 24px;
                 height: 24px;
                 background: #ff6a00;
             }
         }
     }
     </style>
     

delete 操作符 #

1. 参考链接：

   delete 操作符

2. 详解：

   javascript

   //delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。
   //delete object.property
   //delete object[[property']
   //对于所有情况都是true，除非属性是一个自己不可配置的属性，在这种情况下，非严格模式返回 false。
   //不可设置的(Non-configurable)属性不能被移除。Math, Array, Object内置对象的属性以及使用Object.defineProperty()方法设置为不可设置的属性不能被删除,返回false。
   //非对象类型，使用delete会返回false。
   const Employee = {
     firstname: "John",
     lastname: "Doe",
   };
   
   console.log(Employee.firstname);
   // expected output: "John"
   
   delete Employee.firstname;
   
   console.log(Employee.firstname);
   // expected output: undefined
   

变量的解构赋值 #

1. 参考链接：

   • 变量的解构赋值

2. 详解

   ES6 允许等号双方按照相同格式，从数组和对象中提取值，对变量进行赋值，这被称为解构

   javascript

   //数组
   let [a, b, c] = [1, 2, 3];
   a;//1
   let [foo, [[bar], baz]] = [1, [[2], 3]];
   baz;//3
   let [ , , third] = ["foo", "bar", "baz"];
   third;//"baz"
   let [x, y, ...z] = [[a'];
   x;//"a"
   y;//undefined 解构不成功为undefined
   z;//[]
   let [foo] = 1;//报错
   let [x, y, z] = new Set([[a', 'b', 'c']);
   x;//"a"
   let [foo = true] = [];
   foo;//true 因为使用了默认值
   let [x = 1] = [undefined];
   x；//1
   let [x = 1] = [null];
   x；//null 对null不生效
   
   //对象
   let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
   foo；//"aaa"
   let x;
   {x} = {x: 1};// SyntaxError: syntax error
   let x;
   ({x} = {x: 1});
   x;//1
   
   //字符串
   const [a, b, c, d, e] = 'hello';
   a；//"h"
   let {length : len} = 'hello';
   len；//5
   
   //数值和布尔值
   let {toString: s} = 123;
   s === Number.prototype.toString;//true
   let {toString: s} = true;
   s === Boolean.prototype.toString;//true
   let { prop: x } = undefined;//TypeError 右边无法转换为对象
   let { prop: y } = null;//TypeError 右边无法转换为对象
   
   //函数参数
   function add([x = 0, y = 1]){
       return x + y;
   }
   add([1, 2]);//3
   
   //圆括号报错
   let [(a)] = [1];//error
   let {x: (c)} = {};//error
   let ({x: c}) = {};//error
   let {(x: c)} = {};//error
   let {(x): c} = {};//error
   let { o: ({ p: p }) } = { o: { p: 2 } };//error
   function f([(z)]) { return z; }//error
   function f([z,(x)]) { return x; }//error
   ({ p: a }) = { p: 42 };//error
   ([a]) = [5];//error
   [({ p: a }), { x: c }] = [{}, {}];//error
   
   //圆括号正确
   [(b)] = [3];
   b;//3
   ({ p: (d) } = {});
   d;//undefined
   [(parseInt.prop)] = [3];
   parseInt.prop;//3
   
   //用途
   //（1）交换变量的值
   let x = 1;
   let y = 2;
   [x, y] = [y, x];
   //（2）从函数返回多个值
   function example() {
       return [1, 2, 3];
   }
   let [a, b, c] = example();
   //（3）函数参数的定义和默认值
   function f({x=0, y=0, z=0}) { ... }
   f({z: 3, y: 2, x: 1});//可无序
   //（4）提取 JSON 数据
   let jsonData = {
       id: 42,
       status: "OK",
       data: [867, 5309]
   };
   let { id, status, data: number } = jsonData;
   //（5）遍历 特殊 结构
   const map = new Map();
   map.set('first', 'hello');
   map.set('second', 'world');
   for (let [key, value] of map) {
       console.log(key + " is " + value);
   }
   //（6）输入模块的指定方法
   const { SourceMapConsumer, SourceNode } = require("source-map");
   

深入理解promise #

1. 参考链接：

   • 20 行实现一个 Promise

   • 前端常见 20 道高频面试题深入解析

   • 实现 Promise.all、Promise.race、Promise.finally

   • 前端面试大厂手写源码系列（上）

   • 手写Promise核心原理，再也不怕面试官问我Promise原理

   • Promise 中的三兄弟 .all(), .race(), .allSettled()

   • 15道ES6 Promise实战练习题，助你快速理解Promise

   • 死磕 36 个 JS 手写题（搞懂后，提升真的大）

2. 详解

   • promise

     • 功能

       异步链式调用

     • 实现

       javascript

       function myPromise(excutor) {
         var self = this;
         self.onResolvedCallback = []; // Promise resolve时的回调函数集
       
         // 传递给Promise处理函数的resolve
         // 这里直接往实例上挂个data
         // 然后把onResolvedCallback数组里的函数依次执行一遍就可以
         function resolve(value) {
           // 注意promise的then函数需要异步执行
           setTimeout(() => {
             self.data = value;
             self.onResolvedCallback.forEach((callback) => callback(value));
           });
         }
       
         // 执行用户传入的函数
         // resolve => {
         //     ...
         //     resolve(1)
         // }
         excutor(resolve.bind(self));
       }
       // data => {
       //     ...
       // }
       myPromise.prototype.then = function (onResolved) {
         // 保存上下文，哪个promise调用的then，就指向哪个promise。
         var self = this;
       
         return new myPromise((resolve) => {
           self.onResolvedCallback.push(function () {
             // onResolved就对应then传入的函数,执行此函数，得到return的结果
             var result = onResolved(self.data);
             // 如果return的是promise，则继续then
             if (result instanceof Promise) {
               // 那么直接把promise2的resolve决定权交给了user promise
               result.then(resolve);
             }
             // 否则，异步(setTimeout)执行任务队列
             else {
               resolve(result);
             }
           });
         });
       };
       // 调用then的promise
       new myPromise((resolve) => {
         resolve(1);
       })
         // then2
         .then((data) => {
           // user promise
           console.log(data);
           return new Promise((resolve) => {
             resolve(2);
           });
         })
         // then3
         .then((data) => {
           console.log(data);
         });
       

     • Promise A+规范

       javascript

       class Promise {
         constructor(executor) {
           this.status = "pending"; // 初始化状态
           this.value = undefined; // 初始化成功返回的值
           this.reason = undefined; // 初始化失败返回的原因
       
           // 解决处理异步的resolve
           this.onResolvedCallbacks = []; // 存放所有成功的resolve
           this.onRejectedCallbacks = []; // 存放所有失败的reject
       
           /**
             * @param {*} value 成功返回值
             * 定义resolve方法
             * 注意：状态只能从pending->fulfilled和pending->rejected两个
             */
           const resolve = (value) => {
             if (this.status === "pending") {
               this.status = "fulfilled"; // 成功时将状态转换为成功态fulfilled
               this.value = value; // 将成功返回的值赋值给promise
               // 为了解决异步resolve以及返回多层promise
               this.onResolvedCallbacks.forEach((fn) => {
                 fn(); // 当状态变为成功态依次执行所有的resolve函数
               });
             }
           };
           const reject = (reason) => {
             if (this.status === "pending") {
               this.status = "rejected"; // 失败时将状态转换为成功态失败态rejected
               this.reason = reason; // 将失败返回的原因赋值给promise
               this.onRejectedCallbacks.forEach((fn) => {
                 fn(); // 当状态变为失败态依次执行所有的reject函数
               });
             }
           };
           executor(resolve, reject); // 执行promise传的回调函数
         }
         /**
           * 定义promise的then方法
           * @param {*} onFulfilled 成功的回调
           * @param {*} onRejected 失败的回调
           */
         then(onFulfilled, onRejected) {
           // 为了解决then方法返回Promise的情况
           const promise2 = new Promise((resolve, reject) => {
             if (this.status === "fulfilled") {
               // 如果状态为fulfilled时则将值传给这个成功的回调
               setTimeout(() => {
                 const x = onFulfilled(this.value); // x的值有可能为 promise || 123 || '123'...
                 // 注意：此时调用promise2时还没有返回值，要用setTimeout模拟进入第二次事件循环；先有鸡先有蛋
                 resolvePromise(promise2, x, resolve, reject);
               }, 0);
             }
             if (this.status === "rejected") {
               setTimeout(() => {
                 const x = onRejected(this.reason); // 如果状态为rejected时则将视频的原因传给失败的回调
                 resolvePromise(promise2, x, resolve, reject);
               }, 0);
             }
             if (this.status === "pending") {
               // 记录-》解决异步
               this.onResolvedCallbacks.push(() => {
                 setTimeout(() => {
                   const x = onFulfilled(this.value);
                   resolvePromise(promise2, x, resolve, reject);
                 }, 0);
               });
               this.onRejectedCallbacks.push(() => {
                 setTimeout(() => {
                   const x = onRejected(this.reason);
                   resolvePromise(promise2, x, resolve, reject);
                 }, 0);
               });
             }
           });
           return promise2; // 解决多次链式调用的问题
         }
       }
       
       const resolvePromise = (promise2, x, resolve, reject) => {
         // console.log(promise2, x, resolve, reject)
         if (promise2 === x) {
           // 如果返回的值与then方法返回的值相同时
           throw TypeError("循环引用");
         }
         // 判断x是不是promise;注意：null的typeof也是object要排除
         if (typeof x === "function" || (typeof x === "object" && x !== null)) {
           try {
             const then = x.then; // 获取返回值x上的then方法；注意方法会报错要捕获异常；原因111
             if (typeof then === "function") {
               // 就认为是promise
               then.call(
                 x,
                 (y) => {
                   // resolve(y)
                   // 递归解析 ; 有可能返回多个嵌套的promise
                   resolvePromise(promise2, y, resolve, reject);
                 },
                 (r) => {
                   reject(r);
                 }
               );
             }
           } catch (e) {
             reject(e);
           }
         } else {
           resolve(x);
         }
       };
       module.exports = Promise;
       

     • 手写过程

       1. 书写结构
       javascript

       (function (window) {
           /*
           Promise构造函数
           executor:执行器函数
           */
           function Promise(executor) {
       
           }
       
           /*
           Promise原型对象的then
           指定一个成功/失败的回调函数
           返回一个新的promise对象
           */
           Promise.prototype.then = function(onResolved,onRejected){
       
           }
       
           /*
           Promise原型对象的.catch
           指定一个失败的回调函数
           返回一个新的promise对象
           */
           Promise.prototype.catch = function(onRejected){
       
           }
       
           /*
           Promise函数对象的resovle方法
           返回一个指定结果的promise对象
           */
           Promise.resolve = function(value){
       
           }
       
           /*
           Promise函数对象的reject方法
           返回一个指定reason的失败状态的promise对象
           */
           Promise.reject = function(value){
       
           }
       
           /*
           Promise函数对象的all方法
           返回一个promise对象，只有当所有promise都成功时返回的promise状态才成功
           */
           Promise.all = function(value){
       
           }
       
           /*
           Promise函数对象的race方法
           返回一个promise对象，状态由第一个完成的promise决定
           */
           Promise.race = function(value){
       
           }
       
           // 向外暴露Promise
           window.Promise = Promise
       })()
       

       2. 实现构造函数

       3. 传入函数，执行resolve和reject，说明构造函数里有resolve和reject方法

       4. 每个promise都有一个状态可能为pending或resolved，rejected。初始状态都为pending。需要添加个status来表示当前promise的状态.。并且每个promise有自己的data。

       5. pending状态要把then里面的回调函数保存起来，需要callbacks数组，收集方法为push

       6. pending到resolved会有等待问题，需要使用定时器

       7. promise的状态只能改变一次，执行callbacks里的函数，并保存data，并将当前promise状态改为resolved

       8. reject同理，当在执行executor的时候，如果执行异常，这个promise的状态会直接执行reject方法,使用try catch

       javascript

       function Promise(executor) {
       
           var self = this
       
           self.status = 'pending' // 给promise对象指定status属性，初始值为pending
           self.data = undefined // 给promise对象指定一个存储结果的data
           新增代码
           self.callbacks = []  // 每个元素的结构：{onResolved(){}，onRejected(){}}
       
       
           function resolve(value) {
               // 如果当前状态不是pending，则不执行
               if(this.status !== 'pending'){
                   return 
               }
               // 将状态改为resolved
               this.status = 'resolved'
               // 保存value的值
               this.data = value
       
               // 如果有待执行的callback函数，立即异步执行回调函数onResolved
               if (this.callbacks.length>0){
                   setTimeout(()=>{
                       this.callbacks.forEach(callbackObj=>{ A
                           callbackObj.onResolved(value)
                       })
                   })
               }
           }
           function reject(value) {
               // 如果当前状态不是pending，则不执行
               if(self.status !== 'pending'){
                   return
               }
               // 将状态改为rejected
               self.status = 'rejected'
               // 保存value的值
               self.data = value
       
               // 如果有待执行的callback函数，立即异步执行回调函数onResolved
               if (self.callbacks.length>0){
                 self.callbacks.forEach(callbackObj=>{
                     callbackObj.onRejected(value)
                 })
               }
           }
       
       
           // 立即同步执行executor
           try{
               // 立即同步执行executor
               executor(resolve,reject)
           }catch (e) { // 如果执行器抛出异常，promise对象变为rejected状态
               reject(e)
           }
       }
       

       3. 实现then

       4. pending时，要把then里的回调函数保存起来

       5. resolved和rejected时，异步执行onResolved和onRejected

       6. 如果回调函数返回的不是promise，return的promise的状态是resolved，value就是返回的值

       7. 如果回调函数返回的是promise，return的promise的结果就是这个promise的结果

       8. 如果这个promise执行了resolve，返回的新的promise的状态则是resolved。否则为rejected

       9. .then 或者 .catch 的参数期望是函数，传入非函数则会保存上一个的promise.data

       javascript

       Promise.prototype.then = function(onResolved,onRejected){
           onResolved = typeof onResolved === 'function'? onResolved: value => value
           onRejected = typeof onRejected === 'function'? onRejected: reason => {throw reason}
           var self = this
       
           return new Promise((resolve,reject)=>{
       
               /*
               调用指定回调函数的处理，根据执行结果。改变return的promise状态
               */
               function handle(callback) {
                   try{
                       const result = callback(self.data)
                       if (result instanceof Promise){
                           // 2. 如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
                           result.then(
                               value => {resolve(value)},
                               reason => {reject(reason)}
                           )
                       } else {
                           // 1. 如果回调函数返回的不是promise，return的promise的状态是resolved，value就是返回的值。
                           resolve(result)
                       }
                   }catch (e) {
                       //  3.如果执行onResolved的时候抛出错误，则返回的promise的状态为rejected
                       reject(e)
                   }
               }
               if(self.status === 'pending'){
                   // promise当前状态还是pending状态，将回调函数保存起来
                   self.callbacks.push({
                       onResolved(){
                           handle(onResolved)
                       },
                       onRejected(){
                           handle(onRejected)
                       }
                   })
               }else if(self.status === 'resolved'){
                   setTimeout(()=>{
                       handle(onResolved)
                   })
               }else{ // 当status === 'rejected'
                   setTimeout(()=>{
                       handle(onRejected)
                   })
               }
           })
       
       }
       

       4. 实现then

       与then实现相同，只是没有了onResolved函数

       javascript

       Promise.prototype.catch = function(onRejected){
           return this.then(undefined,onRejected)
       }
       

       5. 实现resolve

       3中传值：非promise，成功promise，失败promise

       javascript

       Promise.resolve = function(value){
         return new Promise((resolve,reject)=>{
             if (value instanceof Promise){
                 // 如果value 是promise
                 value.then(
                     value => {resolve(value)},
                     reason => {reject(reason)}
                 )
             } else{
                 // 如果value不是promise
                 resolve(value)
             }
         }
       }
       

       6. 实现reject

       返回一个状态为rejected的promise

       javascript

       /*
       Promise函数对象的reject方法
       返回一个指定reason的失败状态的promise对象
       */
       Promise.reject = function(reason){
           return new Promise((resolve,reject)=>{
               reject(reason)
           })
       }
       

       7. 实现all、race、finally见下方

   • Promise.resolve

     • 可以将任何值转成值为 value 状态是 fulfilled 的 Promise，但如果传入的值本身是 Promise 则会原样返回它
     javascript

      Promise.resolve = function(value) {
          // 如果是 Promsie，则直接输出它
          if(value instanceof Promise){
              return value
          }
          return new Promise(resolve => resolve(value))
      }
     

   • Promise.reject

     • 会实例化一个 rejected 状态的 Promise,传递一个 Promise 对象，则这个对象会成为新 Promise 的值
     javascript

     Promise.reject = function(reason) {
         return new Promise((resolve, reject) => reject(reason))
     }
     

   • promise.all

     • 功能

       • Promise.all(iterable) 返回新 Promise
       • iterable 中存在参数不为 promise，视此参数 resolve
       • 所有 promise 都 resolve，返回 resolve
       • 存在 promise reject，返回第一个 reject

     • 特点

       • 如果传入的参数为空的可迭代对象， Promise.all 会 同步 返回一个已完成状态的 promise
       • 如果传入的参数中不包含任何 promise, Promise.all 会 异步 返回一个已完成状态的 promise
       • 其它情况下， Promise.all 返回一个 处理中（pending） 状态的 promise

     • 状态

       • 如果传入的参数中的 promise 都变成完成状态， Promise.all 返回的 promise 异步变为完成
       • 如果传入的参数中，有一个 promise 失败， Promise.all 异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成
       • 在任何情况下， Promise.all 返回的 promise 的完成状态的结果都是一个数组

     • 实现

       javascript

       Promise.all = function (promises) {
         //省略参数合法性检查
         return new Promise((resolve, reject) => {
           promises = Array.from(promises);
           if (promises.length === 0) {
             resolve([]);
           } else {
             let result = [];
             let index = 0;
             for (let i = 0; i < promises.length; i++) {
               Promise.resolve(promises[i]).then(
                 (data) => {
                   result[i] = data;
                   if (++index === promises.length) {
                     resolve(result);
                   }
                 },
                 (err) => {
                   reject(err);
                   return;
                 }
               );
             }
           }
         });
       };
       var p = Promise.all([1, 2, 3]);
       // Promise {<resolved>: Array(3)}
       // __proto__: Promise
       // [[PromiseStatus]]: "resolved"
       // [[PromiseValue]]: Array(3)
       // 0: 1
       // 1: 2
       // 2: 3
       // length: 3
       // __proto__: Array(0)
       var p2 = Promise.all([1, 2, 3, Promise.resolve(444)]);
       // Promise {<resolved>: Array(4)}
       // __proto__: Promise
       // [[PromiseStatus]]: "resolved"
       // [[PromiseValue]]: Array(4)
       var p3 = Promise.all([1, 2, 3, Promise.reject(555)]);
       // Promise {<rejected>: 555}
       // __proto__: Promise
       // [[PromiseStatus]]: "rejected"
       // [[PromiseValue]]: 555
       

   • promise.race

     • 功能

       Promise.race 返回的仍然是一个 Promise，它的状态与第一个完成的 Promise 的状态相同；如果传入的参数是不可迭代的，那么将会抛出错误。

     • 实现

     javascript

     Promise.ra_ce = function (promises) {
       promises = Array.from(promises);
       return new Promise((resolve, reject) => {
         if (promises.length === 0) {
           return;
         } else {
           for (let i = 0; i < promises.length; i++) {
             Promise.resolve(promises[i]).then(
               (data) => {
                 resolve(data);
                 return;
               },
               (err) => {
                 reject(err);
                 return;
               }
             );
           }
         }
       });
     };
     

     • 提示

       Promsie.all 和 Promise.race 都只接受可迭代的数据结构，否则会报错，所以在不确定传入的 promises 是否为可迭代数据结构的情况下可以通过以下加以判断：

       javascript

       if (typeof promises[Symbol.iterator] !== "function") {
         Promise.reject("args is not iteratable!");
       }
       

       一个数据结构只要具有 Symbol.iterator 属性(Symbol.iterator 方法对应的是遍历器生成函数，返回的是一个遍历器对象)，那么就可以其认为是可迭代的。

   • promise.finally

     • 功能

       不管成功还是失败，都会走到 finally 中,并且 finally 之后，还可以继续 then。并且会将值原封不动的传递给后面的 then。

     • 实现

       javascript

       Promise.prototype.finally = function (callback) {
         return this.then(
           (value) => {
             return Promise.resolve(callback()).then(() => {
               return value;
             });
           },
           (err) => {
             return Promise.resolve(callback()).then(() => {
               throw err;
             });
           }
         );
       };
       

   • promise.allSettled

     • 功能

     返回一个promise，该promise在所有给定的promise已被解析或被拒绝后解析，并且每个对象都描述每个promise的结果。

     • 实现

       javascript

       Promise.allSettled = function(promises) {
           let count = 0
           let result = []
           return new Promise((resolve, reject) => {
               promises.forEach((promise, index) => {
                   Promise.resolve(promise).then(res => {
                       result[index] = {
                           value: res,
                           reason: null,
                       }
                   }, err => {
                       result[index] = {
                           value: null,
                           reason: err,
                       }
                   }).finally(() => {
                       count++
                       if (count === promises.length) {
                           resolve(result)
                       }
                   })
               })
           })
       }
       

   • Promise.any

     • 功能

     • 空数组或者所有 Promise 都是 rejected，则返回状态是 rejected 的新 Promsie，且值为 AggregateError 的错误；

     • 只要有一个是 fulfilled 状态的，则返回第一个是 fulfilled 的新实例；

     • 其他情况都会返回一个 pending 的新实例；

     javascript

     Promise.any = function(promiseArr) {
         let index = 0
         return new Promise((resolve, reject) => {
             if (promiseArr.length === 0) return 
             promiseArr.forEach((p, i) => {
                 Promise.resolve(p).then(val => {
                     resolve(val)
                     
                 }, err => {
                     index++
                     if (index === promiseArr.length) {
                       reject(new AggregateError('All promises were rejected'))
                     }
                 })
             })
         })
     }
     

   • promise事件循环执行顺序

     Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。

     javascript

     const promise = new Promise((resolve, reject) => {
         console.log(1)
         resolve()
         console.log(2)
     })
     promise.then(() => {
         console.log(3)
     })
     console.log(4)
     
     // => 1
     // => 2
     // => 4
     // => 3
     

     同步->异步(微任务(nexttick->promise)->宏任务(setTimeout,setInterval,setImmediate))

     javascript

     const first = () => (new Promise((resolve, reject) => {
         console.log(3);
         let p = new Promise((resolve, reject) => {
             console.log(7);
             setTimeout(() => {
                 console.log(5);
                 resolve(6);
             }, 0)
             resolve(1);
         });
         resolve(2);
         p.then((arg) => {
             console.log(arg);
         });
     
     }));
     
     first().then((arg) => {
         console.log(arg);
     });
     console.log(4);
     
     // => 3
     // => 7
     // => 4
     // => 1
     // => 2
     // => 5
     

     javascript

     process.nextTick(() => {
       console.log('nextTick')
     })
     Promise.resolve()
       .then(() => {
         console.log('then')
       })
     setImmediate(() => {
       console.log('setImmediate')
     })
     console.log('end')
     
     //end
     //nextTick
     //then
     //setImmediate
     

   • promise的3种状态

     promise 有 3 种状态：pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变，除非返回新promise

     javascript

     const promise1 = new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve('success')
       }, 1000)
     })
     const promise2 = promise1.then(() => {
       throw new Error('error!!!')
     })
     
     console.log('promise1', promise1)
     console.log('promise2', promise2)
     
     setTimeout(() => {
       console.log('promise1', promise1)
       console.log('promise2', promise2)
     }, 2000)
     
     //promise1 Promise {<pending>}
     //promise2 Promise {<pending>}
     //Uncaught (in promise) Error: error!!!
     //    at <anonymous>
     //promise1 Promise {<resolved>: "success"}
     //promise2 Promise {<rejected>: Error: error!!!
     //    at <anonymous>}
     

     promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值。

     javascript

     const promise = new Promise((resolve, reject) => {
       setTimeout(() => {
         console.log('once')
         resolve('success')
       }, 1000)
     })
     
     const start = Date.now()
     promise.then((res) => {
       console.log(res, Date.now() - start)
     })
     promise.then((res) => {
       console.log(res, Date.now() - start)
     })
     
     //once
     //success 1005
     //success 1007
     

   • resolve和reject的单次有效性

     构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用

     javascript

     const promise = new Promise((resolve, reject) => {
       resolve('success1')
       reject('error')
       resolve('success2')
     })
     
     promise
       .then((res) => {
         console.log('then: ', res)
       })
       .catch((err) => {
         console.log('catch: ', err)
       })
     
     //then: success1
     

   • promise链式调用

     promise 每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用。

     javascript

     Promise.resolve(1)
       .then((res) => {
         console.log(res)
         return 2
       })
       .catch((err) => {
         return 3
       })
       .then((res) => {
         console.log(res)
       })
      
     //1
     //2
     

   • promise抛出错误机制

     .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获

     javascript

     Promise.resolve()
       .then(() => {
         return new Error('error!!!')
       })
       .then((res) => {
         console.log('then: ', res)
       })
       .catch((err) => {
         console.log('catch: ', err)
       })
       
     //then:  Error: error!!!
     //    at <anonymous>
     
     //需要改成其中一种，才能被后续的 .catch 捕获
     //return Promise.reject(new Error('error!!!'))
     //throw new Error('error!!!')
     

   • promise返回机制

     .then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环

     javascript

     const promise = Promise.resolve()
       .then(() => {
         return promise
       })
     promise.catch(console.error)
     
     //TypeError: Chaining cycle detected for promise #<Promise>
     

     .then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透

     javascript

     Promise.resolve(1)
       .then(2)
       .then(Promise.resolve(3))
       .then(console.log)
     
     //1
     

     .then 可以接收两个参数，第一个是处理成功的函数，第二个是处理错误的函数。.then 的第二个处理错误的函数捕获不了第一个处理成功的函数抛出的错误，而后续的 .catch 可以捕获之前的错误。

     javascript

     Promise.resolve()
       .then(function success (res) {
         throw new Error('error')
       }, function fail1 (e) {
         console.error('fail1: ', e)
       })
       .catch(function fail2 (e) {
         console.error('fail2: ', e)
       })
       
     //fail2:  Error: error
     //    at success (<anonymous>)
     

   • promise综合使用注意

     1. then后的then如果想有值，就需要在第一个then返回Promise.resolve(value)
     javascript

     var promise = new Promise(function(resolve, reject) {
         console.log("promise")
         window.setTimeout(function(){
         if (1){
             resolve('success');
         } else {
             reject('error');
         }
         },1000)
     }).then(function(v){
         console.log(v);//success
         //return Promise.resolve(v) 后面的then需要值则添加这行
     }).then(function(v){
         console.log(v);//undefined
     });
     

     2. finally的回调函数不接受传参，因此只处理与状态无关的事情，后面的then不受影响
     javascript

     var promise = new Promise(function(resolve, reject) {
         console.log("promise")
         window.setTimeout(function(){
         if (1){
             resolve('success');
         } else {
             reject('error');
         }
         },1000)
     }).finally(function(v){
         console.log(v);//undefined
     }).then(function(v){
         console.log(v);//success
     }).catch(function(v){
         console.log(v,'catch');
     });
     

   • 题目

     红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何使用Promise让三个灯不断交替重复亮灯？

     javascript

     function red() {
       console.log('red');
     }
     function green() {
       console.log('green');
     }
     function yellow() {
       console.log('yellow');
     }
     let myLight = (timer, cb) => {
       return new Promise((resolve) => {
         setTimeout(() => {
           cb();
           resolve();
         }, timer);
       });
     };
     let myStep = () => {
       Promise.resolve().then(() => {
         return myLight(3000, red);
       }).then(() => {
         return myLight(2000, green);
       }).then(()=>{
         return myLight(1000, yellow);
       }).then(()=>{
         myStep();
       })
     };
     myStep();
     
     // output:
     // => red
     // => green
     // => yellow
     // => red
     // => green
     // => yellow
     // => red
     

     实现一个mergePromise函数，把传进去的数组按顺序先后执行，并且把返回的数据先后放到数组data中

     javascript

     const timeout = ms => new Promise((resolve, reject) => {
         setTimeout(() => {
             resolve();
         }, ms);
     });
     const ajax1 = () => timeout(2000).then(() => {
         console.log('1');
         return 1;
     });
     const ajax2 = () => timeout(1000).then(() => {
         console.log('2');
         return 2;
     });
     const ajax3 = () => timeout(2000).then(() => {
         console.log('3');
         return 3;
     });
     const mergePromise = ajaxArray => {
       // 在这里实现你的代码
       // 保存数组中的函数执行后的结果
       var data = [];
       // Promise.resolve方法调用时不带参数，直接返回一个resolved状态的 Promise 对象。
       var sequence = Promise.resolve();
       ajaxArray.forEach(item => {
         // 第一次的 then 方法用来执行数组中的每个函数，
         // 第二次的 then 方法接受数组中的函数执行后返回的结果，
         // 并把结果添加到 data 中，然后把 data 返回。
         sequence = sequence.then(item).then(res => {
           data.push(res);
           return data;
         });
       });
     // 遍历结束后，返回一个 Promise，也就是 sequence， 他的 [[PromiseValue]] 值就是 data，
     // 而 data（保存数组中的函数执行后的结果） 也会作为参数，传入下次调用的 then 方法中。
       return sequence;
     };
     mergePromise([ajax1, ajax2, ajax3]).then(data => {
         console.log('done');
         console.log(data); // data 为 [1, 2, 3]
     });
     // 要求分别输出
     // 1
     // 2
     // 3
     // done
     // [1, 2, 3]
     

     现有8个图片资源的url，已经存储在数组urls中，且已有一个函数function loading，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。要求：任何时刻同时下载的链接数量不可以超过3个。

     javascript

     var urls = [[https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kkkk1000.com/images/getImgData/Particle.gif', 'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif', 'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg', 'https://www.kkkk1000.com/images/getImgData/arithmetic.gif', 'https://www.kkkk1000.com/images/wxQrCode2.png'];
     
     function loadImg(url) {
         return new Promise((resolve, reject) => {
             const img = new Image()
             img.onload = () => {
                 console.log('一张图片加载完成');
                 resolve();
             }
             img.onerror = reject;
             img.src = url;
         })
     };
     
     function limitLoad(urls, handler, limit) {
       // 对数组做一个拷贝
         const sequence = […urls];
     
       let promises = [];
     
       //并发请求到最大数
       promises = sequence.splice(0, limit).map((url, index) => {
         // 这里返回的 index 是任务在 promises 的脚标，用于在 Promise.race 之后找到完成的任务脚标
         return handler(url).then(() => {
           return index;
         });
       });
     
       // 利用数组的 reduce 方法来以队列的形式执行
       return sequence.reduce((last, url, currentIndex) => {
         return last.then(() => {
           // 返回最快改变状态的 Promise
           return Promise.race(promises)
         }).catch(err => {
           // 这里的 catch 不仅用来捕获前面 then 方法抛出的错误
           // 更重要的是防止中断整个链式调用
           console.error(err)
         }).then((res) => {
           // 用新的 Promise 替换掉最快改变状态的 Promise
           promises[res] = handler(sequence[currentIndex]).then(() => {
             return res
           });
         })
       }, Promise.resolve()).then(() => {
         return Promise.all(promises)
       })
     
     }
     
     limitLoad(urls, loadImg, 3);
     
     /*
     因为 limitLoad 函数也返回一个 Promise，所以当 所有图片加载完成后，可以继续链式调用
     
     limitLoad(urls, loadImg, 3).then(() => {
         console.log('所有图片加载完成');
     }).catch(err => {
         console.error(err);
     })
     */
     

     封装一个异步加载图片的方法

     javascript

     function loadImageAsync(url) {
         return new Promise(function(resolve,reject) {
             var image = new Image();
             image.onload = function() {
                 resolve(image) 
             };
             image.onerror = function() {
                 reject(new Error('Could not load image at' + url));
             };
             image.src = url;
         });
     }