关于前端:2023前端面试知识点总结

原型

JavaScript 中的对象都有一个非凡的 prototype 内置属性，其实就是对其余对象的援用
简直所有的对象在创立时 prototype 属性都会被赋予一个非空的值，咱们能够把这个属性当作一个备用的仓库
当试图援用对象的属性时会登程 get 操作，第一步时查看对象自身是否有这个属性，如果有就应用它，没有就去原型中查找。一层层向上直到 Object.prototype 顶层

基于原型扩大形容一下原型链，什么是原型链，原型的继承，ES5 和 ES6 继承与不同点。

HTTP 状态码

• 1xx 信息性状态码 websocket upgrade

• 2xx 胜利状态码

  • 200 服务器已胜利解决了申请
  • 204(没有响应体)
  • 206(范畴申请 暂停持续下载)

• 3xx 重定向状态码

  • 301(永恒)：申请的页面已永恒跳转到新的 url
  • 302(长期)：容许各种各样的重定向，个别状况下都会实现为到 GET 的重定向，然而不能确保 POST 会重定向为 POST
  • 303 只容许任意申请到 GET 的重定向
  • 304 未修改：自从上次申请后，申请的网页未修改过
  • 307：307 和 302 一样，除了不容许 POST 到 GET 的重定向

• 4xx 客户端谬误状态码

  • 400 客户端参数谬误
  • 401 没有登录
  • 403 登录了没权限 比方管理系统
  • 404 页面不存在
  • 405 禁用申请中指定的办法

• 5xx 服务端谬误状态码

  • 500 服务器谬误：服务器外部谬误，无奈实现申请
  • 502 谬误网关：服务器作为网关或代理呈现谬误
  • 503 服务不可用：服务器目前无奈应用
  • 504 网关超时：网关或代理服务器，未及时获取申请

如何优化要害渲染门路？

为尽快实现首次渲染，咱们须要最大限度减小以下三种可变因素：

（1）要害资源的数量。

（2）要害门路长度。

（3）关键字节的数量。

要害资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其余资源的占用也就越少。同样，要害门路长度受所有要害资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后能力开始下载，并且资源越大，下载所需的往返次数就越多。最初，浏览器须要下载的关键字节越少，解决内容并让其呈现在屏幕上的速度就越快。要缩小字节数，咱们能够缩小资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。

优化要害渲染门路的惯例步骤如下：

（1）对要害门路进行剖析和个性形容：资源数、字节数、长度。

（2）最大限度缩小要害资源的数量：删除它们，提早它们的下载，将它们标记为异步等。

（3）优化要害字节数以缩短下载工夫（往返次数）。

（4）优化其余要害资源的加载程序：您须要尽早下载所有要害资产，以缩短要害门路长度

代码输入后果

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

输入后果如下：

1

看到这个题目，好多的 then，实际上只须要记住一个准则：.then 或 .catch 的参数冀望是函数，传入非函数则会产生 值透传。

第一个 then 和第二个 then 中传入的都不是函数，一个是数字，一个是对象，因而产生了透传，将resolve(1) 的值间接传到最初一个 then 里，间接打印出 1。

常见的浏览器内核比拟

• Trident： 这种浏览器内核是 IE 浏览器用的内核，因为在晚期 IE 占有大量的市场份额，所以这种内核比拟风行，以前有很多网页也是依据这个内核的规范来编写的，然而实际上这个内核对真正的网页规范反对不是很好。然而因为 IE 的高市场占有率，微软也很长时间没有更新 Trident 内核，就导致了 Trident 内核和 W3C 规范脱节。还有就是 Trident 内核的大量 Bug 等平安问题没有失去解决，加上一些专家学者公开本人认为 IE 浏览器不平安的观点，使很多用户开始转向其余浏览器。
• Gecko： 这是 Firefox 和 Flock 所采纳的内核，这个内核的长处就是功能强大、丰盛，能够反对很多简单网页成果和浏览器扩大接口，然而代价是也不言而喻就是要耗费很多的资源，比方内存。
• Presto： Opera 已经采纳的就是 Presto 内核，Presto 内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生劣势，在解决 JS 脚本等脚本语言时，会比其余的内核快 3 倍左右，毛病就是为了达到很快的速度而丢掉了一部分网页兼容性。
• Webkit： Webkit 是 Safari 采纳的内核，它的长处就是网页浏览速度较快，尽管不迭 Presto 然而也胜于 Gecko 和 Trident，毛病是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不规范的网页无奈正确显示。WebKit 前身是 KDE 小组的 KHTML 引擎，能够说 WebKit 是 KHTML 的一个开源的分支。
• Blink： 谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器外围 Webkit 各奔前程，在 Chromium 我的项目中研发 Blink 渲染引擎（即浏览器外围），内置于 Chrome 浏览器之中。其实 Blink 引擎就是 Webkit 的一个分支，就像 webkit 是 KHTML 的分支一样。Blink 引擎当初是谷歌公司与 Opera Software 独特研发，下面提到过的，Opera 弃用了本人的 Presto 内核，退出 Google 营垒，追随谷歌一起研发 Blink。

代码输入后果

var a, b
(function () {console.log(a);
   console.log(b);
   var a = (b = 3);
   console.log(a);
   console.log(b);   
})()
console.log(a);
console.log(b);

输入后果：

undefined 
undefined 
3 
3 
undefined 
3

这个题目和下面题目考查的知识点相似，b 赋值为 3，b 此时是一个全局变量，而将 3 赋值给 a，a 是一个局部变量，所以最初打印的时候，a 仍旧是 undefined。

参考 前端进阶面试题具体解答

代码输入后果

function foo(something){this.a = something}

var obj1 = {foo: foo}

var obj2 = {}

obj1.foo(2); 
console.log(obj1.a); // 2

obj1.foo.call(obj2, 3);
console.log(obj2.a); // 3

var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4

输入后果：2 3 2 4

解析：

1. 首先执行 obj1.foo(2); 会在 obj 中增加 a 属性，其值为 2。之后执行 obj1.a，a 是右 obj1 调用的，所以 this 指向 obj，打印出 2；
2. 执行 obj1.foo.call(obj2, 3) 时，会将 foo 的 this 指向 obj2，前面就和下面一样了，所以会打印出 3；
3. obj1.a 会打印出 2；
4. 最初就是考查 this 绑定的优先级了，new 绑定是比隐式绑定优先级高，所以会输入 4。

Promise.resolve

Promise.resolve = function(value) {
    // 1. 如果 value 参数是一个 Promise 对象，则一成不变返回该对象
    if(value instanceof Promise) return value;
    // 2. 如果 value 参数是一个具备 then 办法的对象，则将这个对象转为 Promise 对象，并立刻执行它的 then 办法
    if(typeof value === "object" && 'then' in value) {return new Promise((resolve, reject) => {value.then(resolve, reject);
        });
    }
    // 3. 否则返回一个新的 Promise 对象，状态为 fulfilled
    return new Promise(resolve => resolve(value));
}

实现模板字符串解析性能

题目形容:

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
  name: '姓名',
  age: 18
}
render(template, data); // 我是姓名，年龄 18，性别 undefined

实现代码如下:

function render(template, data) {let computed = template.replace(/\{\{(\w+)\}\}/g, function (match, key) {return data[key];
  });
  return computed;
}

Nginx 的概念及其工作原理

Nginx 是一款轻量级的 Web 服务器，也能够用于反向代理、负载平衡和 HTTP 缓存等。Nginx 应用异步事件驱动的办法来解决申请，是一款面向性能设计的 HTTP 服务器。

传统的 Web 服务器如 Apache 是 process-based 模型的，而 Nginx 是基于 event-driven 模型的。正是这个次要的区别带给了 Nginx 在性能上的劣势。

Nginx 架构的最顶层是一个 master process，这个 master process 用于产生其余的 worker process，这一点和 Apache 十分像，然而 Nginx 的 worker process 能够同时解决大量的 HTTP 申请，而每个 Apache process 只能解决一个。

介绍下 promise 的个性、优缺点，外部是如何实现的，入手实现 Promise

1）Promise 根本个性

• 1、Promise 有三种状态：pending(进行中)、fulfilled(已胜利)、rejected(已失败)
• 2、Promise 对象承受一个回调函数作为参数, 该回调函数承受两个参数，别离是胜利时的回调 resolve 和失败时的回调 reject；另外 resolve 的参数除了正常值以外，还可能是一个 Promise 对象的实例；reject 的参数通常是一个 Error 对象的实例。
• 3、then 办法返回一个新的 Promise 实例，并接管两个参数 onResolved(fulfilled 状态的回调)；onRejected(rejected 状态的回调，该参数可选)
• 4、catch 办法返回一个新的 Promise 实例
• 5、finally 办法不论 Promise 状态如何都会执行，该办法的回调函数不承受任何参数
• 6、Promise.all()办法将多个多个 Promise 实例，包装成一个新的 Promise 实例，该办法承受一个由 Promise 对象组成的数组作为参数 (Promise.all() 办法的参数能够不是数组，但必须具备 Iterator 接口，且返回的每个成员都是 Promise 实例)，留神参数中只有有一个实例触发 catch 办法，都会触发 Promise.all()办法返回的新的实例的 catch 办法，如果参数中的某个实例自身调用了 catch 办法，将不会触发 Promise.all()办法返回的新实例的 catch 办法
• 7、Promise.race()办法的参数与 Promise.all 办法一样，参数中的实例只有有一个率先扭转状态就会将该实例的状态传给 Promise.race()办法，并将返回值作为 Promise.race()办法产生的 Promise 实例的返回值
• 8、Promise.resolve()将现有对象转为 Promise 对象，如果该办法的参数为一个 Promise 对象，Promise.resolve()将不做任何解决；如果参数 thenable 对象 (即具备 then 办法)，Promise.resolve() 将该对象转为 Promise 对象并立刻执行 then 办法；如果参数是一个原始值，或者是一个不具备 then 办法的对象，则 Promise.resolve 办法返回一个新的 Promise 对象，状态为 fulfilled，其参数将会作为 then 办法中 onResolved 回调函数的参数，如果 Promise.resolve 办法不带参数，会间接返回一个 fulfilled 状态的 Promise 对象。须要留神的是，立刻 resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的完结时执行，而不是在下一轮“事件循环”的开始时。
• 9、Promise.reject()同样返回一个新的 Promise 对象，状态为 rejected，无论传入任何参数都将作为 reject()的参数

2）Promise 长处

• ①对立异步 API

  • Promise 的一个重要长处是它将逐步被用作浏览器的异步 API，对立当初各种各样的 API，以及不兼容的模式和手法。

• ②Promise 与事件比照

  • 和事件相比拟，Promise 更适宜解决一次性的后果。在后果计算出来之前或之后注册回调函数都是能够的，都能够拿到正确的值。Promise 的这个长处很天然。然而，不能应用 Promise 解决屡次触发的事件。链式解决是 Promise 的又一长处，然而事件却不能这样链式解决。

• ③Promise 与回调比照

  • 解决了回调天堂的问题，将异步操作以同步操作的流程表达出来。
• ④Promise 带来的额定益处是蕴含了更好的错误处理形式（蕴含了异样解决），并且写起来很轻松（因为能够重用一些同步的工具，比方 Array.prototype.map()）。

3）Promise 毛病

• 1、无奈勾销 Promise，一旦新建它就会立刻执行，无奈中途勾销。
• 2、如果不设置回调函数，Promise 外部抛出的谬误，不会反馈到内部。
• 3、当处于 Pending 状态时，无奈得悉目前停顿到哪一个阶段（刚刚开始还是行将实现）。
• 4、Promise 真正执行回调的时候，定义 Promise 那局部实际上曾经走完了，所以 Promise 的报错堆栈上下文不太敌对。

4）简略代码实现
最简略的 Promise 实现有 7 个次要属性, state(状态), value(胜利返回值), reason(错误信息), resolve 办法, reject 办法, then 办法

class Promise{constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    let resolve = value => {if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
      }
    };
    let reject = reason => {if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
      }
    };
    try {
      // 立刻执行函数
      executor(resolve, reject);
    } catch (err) {reject(err);
    }
  }
  then(onFulfilled, onRejected) {if (this.state === 'fulfilled') {let x = onFulfilled(this.value);
    };
    if (this.state === 'rejected') {let x = onRejected(this.reason);
    };
  }
}

5）面试够用版

function myPromise(constructor){ let self=this;
  self.status="pending" // 定义状态扭转前的初始状态 
  self.value=undefined;// 定义状态为 resolved 的时候的状态 
  self.reason=undefined;// 定义状态为 rejected 的时候的状态 
  function resolve(value){
    // 两个 ==="pending"，保障了了状态的扭转是不不可逆的 
    if(self.status==="pending"){
      self.value=value;
      self.status="resolved"; 
    }
  }
  function reject(reason){
     // 两个 ==="pending"，保障了了状态的扭转是不不可逆的
     if(self.status==="pending"){
        self.reason=reason;
        self.status="rejected"; 
      }
  }
  // 捕捉结构异样 
  try{constructor(resolve,reject);
  }catch(e){reject(e);
    } 
}
myPromise.prototype.then=function(onFullfilled,onRejected){ 
  let self=this;
  switch(self.status){case "resolved": onFullfilled(self.value); break;
    case "rejected": onRejected(self.reason); break;
    default: 
  }
}

// 测试
var p=new myPromise(function(resolve,reject){resolve(1)}); 
p.then(function(x){console.log(x)})
// 输入 1 

6）大厂专供版

const PENDING = "pending"; 
const FULFILLED = "fulfilled"; 
const REJECTED = "rejected";
const resolvePromise = (promise, x, resolve, reject) => {if (x === promise) {
    // If promise and x refer to the same object, reject promise with a TypeError as the reason.
    reject(new TypeError('循环援用'))
  }
  // if x is an object or function,
  if (x !== null && typeof x === 'object' || typeof x === 'function') {
    // If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored.
    let called
    try { // If retrieving the property x.then results in a thrown exception e, reject promise with e as the reason.
      let then = x.then // Let then be x.then
      // If then is a function, call it with x as this
      if (typeof then === 'function') {// If/when resolvePromise is called with a value y, run [[Resolve]](promise, y)
        // If/when rejectPromise is called with a reason r, reject promise with r.
        then.call(x, y => {if (called) return
          called = true
          resolvePromise(promise, y, resolve, reject)
        }, r => {if (called) return
          called = true
          reject(r)
        })
      } else {
        // If then is not a function, fulfill promise with x.
        resolve(x)
      }
    } catch (e) {if (called) return
      called = true
      reject(e)
    }
  } else {
    // If x is not an object or function, fulfill promise with x
    resolve(x)
  }
}
function Promise(excutor) {
  let that = this; // 缓存以后 promise 实例例对象
  that.status = PENDING; // 初始状态
  that.value = undefined; // fulfilled 状态时 返回的信息
  that.reason = undefined; // rejected 状态时 回绝的起因 
  that.onFulfilledCallbacks = []; // 存储 fulfilled 状态对应的 onFulfilled 函数
  that.onRejectedCallbacks = []; // 存储 rejected 状态对应的 onRejected 函数
  function resolve(value) { // value 胜利态时接管的终值
    if(value instanceof Promise) {return value.then(resolve, reject);
    }
    // 实际中要确保 onFulfilled 和 onRejected ⽅办法异步执⾏行行，且应该在 then ⽅办法被调⽤用的那⼀一轮事件循环之后的新执⾏行行栈中执⾏行行。setTimeout(() => {
      // 调⽤用 resolve 回调对应 onFulfilled 函数
      if (that.status === PENDING) {// 只能由 pending 状态 => fulfilled 状态 (防止调⽤用屡次 resolve reject)
        that.status = FULFILLED;
        that.value = value;
        that.onFulfilledCallbacks.forEach(cb => cb(that.value));
      }
    });
  }
  function reject(reason) { // reason 失败态时接管的拒因
    setTimeout(() => {
      // 调⽤用 reject 回调对应 onRejected 函数
      if (that.status === PENDING) {// 只能由 pending 状态 => rejected 状态 (防止调⽤用屡次 resolve reject)
        that.status = REJECTED;
        that.reason = reason;
        that.onRejectedCallbacks.forEach(cb => cb(that.reason));
      }
    });
  }

  // 捕捉在 excutor 执⾏行行器器中抛出的异样
  // new Promise((resolve, reject) => {//     throw new Error('error in excutor')
  // })
  try {excutor(resolve, reject);
  } catch (e) {reject(e);
  }
}
Promise.prototype.then = function(onFulfilled, onRejected) {
  const that = this;
  let newPromise;
  // 解决理参数默认值 保障参数后续可能持续执⾏行行
  onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;
  onRejected = typeof onRejected === "function" ? onRejected : reason => {throw reason;};
  if (that.status === FULFILLED) { // 胜利态
    return newPromise = new Promise((resolve, reject) => {setTimeout(() => {
        try{let x = onFulfilled(that.value);
          resolvePromise(newPromise, x, resolve, reject); // 新的 promise resolve 上⼀一个 onFulfilled 的返回值
        } catch(e) {reject(e); // 捕捉前⾯面 onFulfilled 中抛出的异样 then(onFulfilled, onRejected);
        }
      });
    })
  }
  if (that.status === REJECTED) { // 失败态
    return newPromise = new Promise((resolve, reject) => {setTimeout(() => {
        try {let x = onRejected(that.reason);
          resolvePromise(newPromise, x, resolve, reject);
        } catch(e) {reject(e);
        }
      });
    });
  }
  if (that.status === PENDING) { // 期待态
// 当异步调⽤用 resolve/rejected 时 将 onFulfilled/onRejected 收集暂存到汇合中
    return newPromise = new Promise((resolve, reject) => {that.onFulfilledCallbacks.push((value) => {
        try {let x = onFulfilled(value);
          resolvePromise(newPromise, x, resolve, reject);
        } catch(e) {reject(e);
        }
      });
      that.onRejectedCallbacks.push((reason) => {
        try {let x = onRejected(reason);
          resolvePromise(newPromise, x, resolve, reject);
        } catch(e) {reject(e);
        }
      });
    });
  }
};

map 和 foreach 有什么区别

foreach()办法会针对每一个元素执行提供得函数, 该办法没有返回值, 是否会扭转原数组取决与数组元素的类型是根本类型还是援用类型
map()办法不会扭转原数组的值, 返回一个新数组, 新数组中的值为原数组调用函数解决之后的值：

Promise.all

形容：所有 promise 的状态都变成 fulfilled，就会返回一个状态为 fulfilled 的数组(所有promise 的 value)。只有有一个失败，就返回第一个状态为 rejected 的 promise 实例的 reason。

实现：

Promise.all = function(promises) {return new Promise((resolve, reject) => {if(Array.isArray(promises)) {if(promises.length === 0) return resolve(promises);
            let result = [];
            let count = 0;
            promises.forEach((item, index) => {Promise.resolve(item).then(
                    value => {
                        count++;
                        result[index] = value;
                        if(count === promises.length) resolve(result);
                    }, 
                    reason => reject(reason)
                );
            })
        }
        else return reject(new TypeError("Argument is not iterable"));
    });
}

说一下购物车的逻辑?

//vue 中购物车逻辑的实现
1. 购物车信息用一个数组来存储，数组中保留对象，对象中有 id 和 count 属性

2. 在 vuex 中 state 中增加一个数据 cartList 用来保留这个数组

3. 因为商品详情页须要用到退出购物车性能，所以咱们须要提供一个 mutation, 用来将购物车信息退出 cartList 中

4. 退出购物车信息的时候，遵循如下规定：如果购物车中曾经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象

5. 在商品详情页，点击退出购物车按钮的时候，调用 vuex 提供的 addToCart 这个 mutation 将以后的商品信息（id count）传给 addTocart  this.$store.commit("addToCart", {id:  , count：})

// js 中购物车逻辑的实现
1. 商品页点击“退出购物车”按钮，触发事件

2. 事件调用购物车“减少商品”的 Js 程序（函数、对象办法）3. 向 Js 程序传递传递“商品 id”、“商品数量”等数据

4. 存储“商品 id”、“商品数量”到浏览器的 localStorage 中

** 展现购物车中的商品 ******

1. 关上购物车页面

2. 从 localStorage 中取出“商品 Id”、“商品数量”等信息。3. 调用服务器端“取得商品详情”的接口失去购物车中的商品信息（参数为商品 Id）4. 将取得的商品信息显示在购物车页面。** 实现购物车中商品的购买 ******

1. 用户对购物车中的商品实现购买流程，产生购物订单

2. 革除 localStorage 中存储的曾经购买的商品信息

备注 1：购物车中商品存储的数据除了“商品 id”、“商品数量”之外，依据产品要求还能够有其余的信息，例如残缺的商品详情（这样就不必掉服务器接口取得详情了）、购物车商品的过期工夫，超过工夫的购物车商品在下次关上网站或者购物车页面时被革除。备注 2：购物车商品除了存储在 localStorage 中，依据产品的需要不同，也能够存储在 sessionStorage、cookie、session 中，或者间接向服务器接口发动申请存储在服务器上。何种状况应用哪种形式存储、有啥区别请本人剖析。

过程和线程的区别

• 过程能够看做独立利用，线程不能
• 资源：过程是 cpu 资源分配的最小单位（是能领有资源和独立运行的最小单位）；线程是 cpu 调度的最小单位（线程是建设在过程的根底上的一次程序运行单位，一个过程中能够有多个线程）。
• 通信方面：线程间能够通过间接共享同一过程中的资源，而过程通信须要借助 过程间通信。
• 调度：过程切换比线程切换的开销要大。线程是 CPU 调度的根本单位，线程的切换不会引起过程切换，但某个过程中的线程切换到另一个过程中的线程时，会引起过程切换。
• 零碎开销：因为创立或撤销过程时，零碎都要为之调配或回收资源，如内存、I/O 等，其开销远大于创立或撤销线程时的开销。同理，在进行过程切换时，波及以后执行过程 CPU 环境还有各种各样状态的保留及新调度过程状态的设置，而线程切换时只需保留和设置大量寄存器内容，开销较小。

如何进攻 XSS 攻打？

能够看到 XSS 危害如此之大，那么在开发网站时就要做好进攻措施，具体措施如下：

• 能够从浏览器的执行来进行预防，一种是应用纯前端的形式，不必服务器端拼接后返回（不应用服务端渲染）。另一种是对须要插入到 HTML 中的代码做好充沛的本义。对于 DOM 型的攻打，次要是前端脚本的不牢靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能呈现的恶意代码状况进行判断。
• 应用 CSP，CSP 的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行，从而避免恶意代码的注入攻打。

1. CSP 指的是内容安全策略，它的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行。咱们只须要配置规定，如何拦挡由浏览器本人来实现。
2. 通常有两种形式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的形式

• 对一些敏感信息进行爱护，比方 cookie 应用 http-only，使得脚本无奈获取。也能够应用验证码，防止脚本伪装成用户执行一些操作。

代码输入后果

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

输入后果如下：

1
Promise {<fulfilled>: undefined}

Promise.resolve 办法的参数如果是一个原始值，或者是一个不具备 then 办法的对象，则 Promise.resolve 办法返回一个新的 Promise 对象，状态为 resolved，Promise.resolve 办法的参数，会同时传给回调函数。

then 办法承受的参数是函数，而如果传递的并非是一个函数，它实际上会将其解释为 then(null)，这就会导致前一个 Promise 的后果会传递上面。

PWA 应用过吗？serviceWorker 的应用原理是啥？

渐进式网络应用（PWA）是谷歌在 2015 年底提出的概念。基本上算是 web 应用程序，但在外观和感觉上与 原生 app相似。反对 PWA 的网站能够提供脱机工作、推送告诉和设施硬件拜访等性能。

Service Worker是浏览器在后盾独立于网页运行的脚本，它关上了通向不须要网页或用户交互的性能的大门。当初，它们已包含如推送告诉和后盾同步等性能。未来，Service Worker将会反对如定期同步或天文围栏等其余性能。本教程探讨的外围性能是拦挡和解决网络申请，包含通过程序来治理缓存中的响应。

JavaScript 类数组对象的定义？

一个领有 length 属性和若干索引属性的对象就能够被称为类数组对象，类数组对象和数组相似，然而不能调用数组的办法。常见的类数组对象有 arguments 和 DOM 办法的返回后果，还有一个函数也能够被看作是类数组对象，因为它含有 length 属性值，代表可接管的参数个数。

常见的类数组转换为数组的办法有这样几种：

（1）通过 call 调用数组的 slice 办法来实现转换

Array.prototype.slice.call(arrayLike);

（2）通过 call 调用数组的 splice 办法来实现转换

Array.prototype.splice.call(arrayLike, 0);

（3）通过 apply 调用数组的 concat 办法来实现转换

Array.prototype.concat.apply([], arrayLike);

（4）通过 Array.from 办法来实现转换

Array.from(arrayLike);

什么是闭包，闭包的作用是什么

当一个外部函数被调用，就会造成闭包，闭包就是可能读取其余函数外部变量的函数。闭包作用：局部变量无奈共享和短暂的保留，而全局变量可能造成变量净化，所以咱们心愿有一种机制既能够短暂的保留变量又不会造成全局净化。