typeof NaN 的结果是什么？
NaN 指“不是一个数字”（not a number），NaN 是一个“警戒值”（sentinel value，有特殊用途的常规值），用于指出数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”。
NaN 是一个特殊值，它和自身不相等，是唯一一个非自反（自反，reflexive，即 x === x 不成立）的值。而 NaN !== NaN 为 true。
new 操作符的实现原理
new 操作符的执行过程：
（1）首先创建了一个新的空对象
（2）设置原型，将对象的原型设置为函数的 prototype 对象。
（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）
（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。
具体实现：
function objectFactory() { let newObject = null; let constructor = Array.prototype.shift.call(arguments); let result = null; // 判断参数是否是一个函数 if (typeof constructor !== "function") { console.error("type error"); return; } // 新建一个空对象，对象的原型为构造函数的 prototype 对象 newObject = Object.create(constructor.prototype); // 将 this 指向新建对象，并执行函数 result = constructor.apply(newObject, arguments); // 判断返回对象 let flag = result && (typeof result === "object" || typeof result === "function"); // 判断返回结果 return flag ? result : newObject;}// 使用方法objectFactory(构造函数, 初始化参数);
复制代码
写代码：实现函数能够深度克隆基本类型
浅克隆：
function shallowClone(obj) { let cloneObj = {};
for (let i in obj) { cloneObj[i] = obj[i]; }
return cloneObj;}
复制代码
深克隆：
function deepCopy(obj) { if (typeof obj === 'object') { var result = obj.constructor === Array ? [] : {};
for (var i in obj) { result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i]; } } else { var result = obj; }
return result;}
复制代码
你在工作终于到那些问题，解决方法是什么
经常遇到的问题就是Cannot read property ‘prototype’ of undefined解决办法通过浏览器报错提示代码定位问题，解决问题
Vue项目中遇到视图不更新，方法不执行，埋点不触发等问题一般解决方案查看浏览器报错，查看代码运行到那个阶段未之行结束，阅读源码以及相关文档等然后举出来最近开发的项目中遇到的算是两个比较大的问题。
复制代码
浏览器渲染优化
（1）针对 JavaScript： JavaScript 既会阻塞 HTML 的解析，也会阻塞 CSS 的解析。因此我们可以对 JavaScript 的加载方式进行改变，来进行优化：
（1）尽量将 JavaScript 文件放在 body 的最后
（2） body 中间尽量不要写<script>标签
（3）<script>标签的引入资源方式有三种，有一种就是我们常用的直接引入，还有两种就是使用 async 属性和 defer 属性来异步引入，两者都是去异步加载外部的 JS 文件，不会阻塞 DOM 的解析（尽量使用异步加载）。三者的区别如下：
script 立即停止页面渲染去加载资源文件，当资源加载完毕后立即执行 js 代码，js 代码执行完毕后继续渲染页面；
async 是在下载完成之后，立即异步加载，加载好后立即执行，多个带 async 属性的标签，不能保证加载的顺序；
defer 是在下载完成之后，立即异步加载。加载好后，如果 DOM 树还没构建好，则先等 DOM 树解析好再执行；如果 DOM 树已经准备好，则立即执行。多个带 defer 属性的标签，按照顺序执行。
（2）针对 CSS：使用 CSS 有三种方式：使用 link、@import、内联样式，其中 link 和 @import 都是导入外部样式。它们之间的区别：
外部样式如果长时间没有加载完毕，浏览器为了用户体验，会使用浏览器会默认样式，确保首次渲染的速度。所以 CSS 一般写在 headr 中，让浏览器尽快发送请求去获取 css 样式。
所以，在开发过程中，导入外部样式使用 link，而不用 @import。如果 css 少，尽可能采用内嵌样式，直接写在 style 标签中。
（3）针对 DOM 树、CSSOM 树： 可以通过以下几种方式来减少渲染的时间：
（4）减少回流与重绘：
操作 DOM 时，尽量在低层级的 DOM 节点进行操作
不要使用table布局， 一个小的改动可能会使整个table进行重新布局
使用 CSS 的表达式
不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。
使用 absolute 或者 fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素
避免频繁操作 DOM，可以创建一个文档片段documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中
将元素先设置display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
将 DOM 的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。
将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，原本应该是触发多次回流，变成了只触发一次回流。
CSS 选择器及其优先级
对于选择器的优先级：
标签选择器、伪元素选择器：1
类选择器、伪类选择器、属性选择器：10
id 选择器：100
内联样式：1000
注意事项：
Promise 是什么，解决了什么，之前怎么实现的
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 解决来之前在请求中回调请求产生的回调地狱，使得现在的代码更加合理更加优雅，也更加容易定位查找问题。
复制代码
组件之间的传值有几种方式
1、父传子2、子传父3、eventbus4、ref/$refs5、$parent/$children6、$attrs/$listeners7、依赖注入(provide/inject)
复制代码
TCP 的重传机制
由于 TCP 的下层网络（网络层）可能出现丢失、重复或失序的情况，TCP 协议提供可靠数据传输服务。为保证数据传输的正确性，TCP 会重传其认为已丢失（包括报文中的比特错误）的包。TCP 使用两套独立的机制来完成重传，一是基于时间，二是基于确认信息。
TCP 在发送一个数据之后，就开启一个定时器，若是在这个时间内没有收到发送数据的 ACK 确认报文，则对该报文进行重传，在达到一定次数还没有成功时放弃并发送一个复位信号。
JSONP
JSONP 核心原理：script 标签不受同源策略约束，所以可以用来进行跨域请求，优点是兼容性好，但是只能用于 GET 请求；
const jsonp = ({ url, params, callbackName }) => { const generateUrl = () => { let dataSrc = '' for (let key in params) { if (params.hasOwnProperty(key)) { dataSrc += `${key}=${params[key]}&` } } dataSrc += `callback=${callbackName}` return `${url}?${dataSrc}` } return new Promise((resolve, reject) => { const scriptEle = document.createElement('script') scriptEle.src = generateUrl() document.body.appendChild(scriptEle) window[callbackName] = data => { resolve(data) document.removeChild(scriptEle) } })}
复制代码
什么是 margin 重叠问题？如何解决？
问题描述： 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。
计算原则： 折叠合并后外边距的计算原则如下：
如果两者都是正数，那么就去最大者
如果是一正一负，就会正值减去负值的绝对值
两个都是负值时，用 0 减去两个中绝对值大的那个
解决办法： 对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠 （1）兄弟之间重叠
（2）父子之间重叠
浏览器的渲染过程
浏览器渲染主要有以下步骤：
首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
然后对 CSS 进行解析，生成 CSSOM 规则树。
根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。
大致过程如图所示：
注意： 这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
实现 JSONP 跨域
JSONP 核心原理：script 标签不受同源策略约束，所以可以用来进行跨域请求，优点是兼容性好，但是只能用于 GET 请求；
实现：
const jsonp = (url, params, callbackName) => { const generateUrl = () => { let dataSrc = ""; for(let key in params) { if(params.hasOwnProperty(key)) { dataSrc += `${key}=${params[key]}&` } } dataSrc += `callback=${callbackName}`; return `${url}?${dataSrc}`; } return new Promise((resolve, reject) => { const scriptEle = document.createElement('script'); scriptEle.src = generateUrl(); document.body.appendChild(scriptEle); window[callbackName] = data => { resolve(data); document.removeChild(scriptEle); } });}
复制代码
深拷贝（考虑到复制 Symbol 类型）
题目描述:手写 new 操作符实现
实现代码如下:
function isObject(val) { return typeof val === "object" && val !== null;}
function deepClone(obj, hash = new WeakMap()) { if (!isObject(obj)) return obj; if (hash.has(obj)) { return hash.get(obj); } let target = Array.isArray(obj) ? [] : {}; hash.set(obj, target); Reflect.ownKeys(obj).forEach((item) => { if (isObject(obj[item])) { target[item] = deepClone(obj[item], hash); } else { target[item] = obj[item]; } });
return target;}
// var obj1 = {// a:1,// b:{a:2}// };// var obj2 = deepClone(obj1);// console.log(obj1);
复制代码
OSI 七层模型
ISO为了更好的使网络应用更为普及，推出了OSI参考模型。
（1）应用层
OSI参考模型中最靠近用户的一层，是为计算机用户提供应用接口，也为用户直接提供各种网络服务。我们常见应用层的网络服务协议有：HTTP，HTTPS，FTP，POP3、SMTP等。
在客户端与服务器中经常会有数据的请求，这个时候就是会用到http(hyper text transfer protocol)(超文本传输协议)或者https.在后端设计数据接口时，我们常常使用到这个协议。
FTP是文件传输协议，在开发过程中，个人并没有涉及到，但是我想，在一些资源网站，比如百度网盘``迅雷应该是基于此协议的。
SMTP是simple mail transfer protocol（简单邮件传输协议）。在一个项目中，在用户邮箱验证码登录的功能时，使用到了这个协议。
（2）表示层
表示层提供各种用于应用层数据的编码和转换功能,确保一个系统的应用层发送的数据能被另一个系统的应用层识别。如果必要，该层可提供一种标准表示形式，用于将计算机内部的多种数据格式转换成通信中采用的标准表示形式。数据压缩和加密也是表示层可提供的转换功能之一。
在项目开发中，为了方便数据传输，可以使用base64对数据进行编解码。如果按功能来划分，base64应该是工作在表示层。
（3）会话层
会话层就是负责建立、管理和终止表示层实体之间的通信会话。该层的通信由不同设备中的应用程序之间的服务请求和响应组成。
（4）传输层
传输层建立了主机端到端的链接，传输层的作用是为上层协议提供端到端的可靠和透明的数据传输服务，包括处理差错控制和流量控制等问题。该层向高层屏蔽了下层数据通信的细节，使高层用户看到的只是在两个传输实体间的一条主机到主机的、可由用户控制和设定的、可靠的数据通路。我们通常说的，TCP UDP就是在这一层。端口号既是这里的“端”。
（5）网络层
本层通过IP寻址来建立两个节点之间的连接，为源端的运输层送来的分组，选择合适的路由和交换节点，正确无误地按照地址传送给目的端的运输层。就是通常说的IP层。这一层就是我们经常说的IP协议层。IP协议是Internet的基础。我们可以这样理解，网络层规定了数据包的传输路线，而传输层则规定了数据包的传输方式。
（6）数据链路层
将比特组合成字节,再将字节组合成帧,使用链路层地址 (以太网使用 MAC 地址)来访问介质,并进行差错检测。网络层与数据链路层的对比，通过上面的描述，我们或许可以这样理解，网络层是规划了数据包的传输路线，而数据链路层就是传输路线。不过，在数据链路层上还增加了差错控制的功能。
（7）物理层
实际最终信号的传输是通过物理层实现的。通过物理介质传输比特流。规定了电平、速度和电缆针脚。常用设备有（各种物理设备）集线器、中继器、调制解调器、网线、双绞线、同轴电缆。这些都是物理层的传输介质。
OSI 七层模型通信特点：对等通信 对等通信，为了使数据分组从源传送到目的地，源端 OSI 模型的每一层都必须与目的端的对等层进行通信，这种通信方式称为对等层通信。在每一层通信过程中，使用本层自己协议进行通信。
实现函数原型方法
call
使用一个指定的 this 值和一个或多个参数来调用一个函数。
实现要点：
this 可能传入 null；
传入不固定个数的参数；
函数可能有返回值；
Function.prototype.call2 = function (context) { var context = context || window; context.fn = this;
var args = []; for(var i = 1, len = arguments.length; i < len; i++) { args.push('arguments[' + i + ']'); }
var result = eval('context.fn(' + args +')');
delete context.fn return result;}
复制代码
apply
apply 和 call 一样，唯一的区别就是 call 是传入不固定个数的参数，而 apply 是传入一个数组。
实现要点：
this 可能传入 null；
传入一个数组；
函数可能有返回值；
Function.prototype.apply2 = function (context, arr) { var context = context || window; context.fn = this;
var result; if (!arr) { result = context.fn(); } else { var args = []; for (var i = 0, len = arr.length; i < len; i++) { args.push('arr[' + i + ']'); } result = eval('context.fn(' + args + ')') }
delete context.fn return result;}
复制代码
bind
bind 方法会创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
实现要点：
Function.prototype.bind2 = function (context) { var self = this; var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function () {};
var fBound = function () { var bindArgs = Array.prototype.slice.call(arguments); return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs)); }
fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound;}
复制代码
实现 new 关键字
new 运算符用来创建用户自定义的对象类型的实例或者具有构造函数的内置对象的实例。
实现要点：
function objectFactory() { var obj = new Object() Constructor = [].shift.call(arguments); obj.__proto__ = Constructor.prototype; var ret = Constructor.apply(obj, arguments);
// ret || obj 这里这么写考虑了构造函数显示返回 null 的情况 return typeof ret === 'object' ? ret || obj : obj;};
复制代码
使用：
function person(name, age) { this.name = name this.age = age}let p = objectFactory(person, '布兰', 12)console.log(p) // { name: '布兰', age: 12 }
复制代码
实现 instanceof 关键字
instanceof 就是判断构造函数的 prototype 属性是否出现在实例的原型链上。
function instanceOf(left, right) { let proto = left.__proto__ while (true) { if (proto === null) return false if (proto === right.prototype) { return true } proto = proto.__proto__ }}
复制代码
上面的 left.proto 这种写法可以换成 Object.getPrototypeOf(left)。
实现 Object.create
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
Object.create2 = function(proto, propertyObject = undefined) { if (typeof proto !== 'object' && typeof proto !== 'function') { throw new TypeError('Object prototype may only be an Object or null.') if (propertyObject == null) { new TypeError('Cannot convert undefined or null to object') } function F() {} F.prototype = proto const obj = new F() if (propertyObject != undefined) { Object.defineProperties(obj, propertyObject) } if (proto === null) { // 创建一个没有原型对象的对象，Object.create(null) obj.__proto__ = null } return obj}
复制代码
实现 Object.assign
Object.assign2 = function(target, ...source) { if (target == null) { throw new TypeError('Cannot convert undefined or null to object') } let ret = Object(target) source.forEach(function(obj) { if (obj != null) { for (let key in obj) { if (obj.hasOwnProperty(key)) { ret[key] = obj[key] } } } }) return ret}
复制代码
实现 JSON.stringify
JSON.stringify([, replacer [, space]) 方法是将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。此处模拟实现，不考虑可选的第二个参数 replacer 和第三个参数 space
基本数据类型：
undefined 转换之后仍是 undefined(类型也是 undefined)
boolean 值转换之后是字符串 "false"/"true"
number 类型(除了 NaN 和 Infinity)转换之后是字符串类型的数值
symbol 转换之后是 undefined
null 转换之后是字符串 "null"
string 转换之后仍是 string
NaN 和 Infinity 转换之后是字符串 "null"
函数类型：转换之后是 undefined
如果是对象类型(非函数)
如果是一个数组：如果属性值中出现了 undefined、任意的函数以及 symbol，转换成字符串 "null" ；
如果是 RegExp 对象：返回 {} (类型是 string)；
如果是 Date 对象，返回 Date 的 toJSON 字符串值；
如果是普通对象；
如果有 toJSON() 方法，那么序列化 toJSON() 的返回值。
如果属性值中出现了 undefined、任意的函数以及 symbol 值，忽略。
所有以 symbol 为属性键的属性都会被完全忽略掉。
对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
function jsonStringify(data) { let dataType = typeof data;
if (dataType !== 'object') { let result = data; //data 可能是 string/number/null/undefined/boolean if (Number.isNaN(data) || data === Infinity) { //NaN 和 Infinity 序列化返回 "null" result = "null"; } else if (dataType === 'function' || dataType === 'undefined' || dataType === 'symbol') { //function 、undefined 、symbol 序列化返回 undefined return undefined; } else if (dataType === 'string') { result = '"' + data + '"'; } //boolean 返回 String() return String(result); } else if (dataType === 'object') { if (data === null) { return "null" } else if (data.toJSON && typeof data.toJSON === 'function') { return jsonStringify(data.toJSON()); } else if (data instanceof Array) { let result = []; //如果是数组 //toJSON 方法可以存在于原型链中 data.forEach((item, index) => { if (typeof item === 'undefined' || typeof item === 'function' || typeof item === 'symbol') { result[index] = "null"; } else { result[index] = jsonStringify(item); } }); result = "[" + result + "]"; return result.replace(/'/g, '"');
} else { //普通对象 /** * 循环引用抛错(暂未检测，循环引用时，堆栈溢出) * symbol key 忽略 * undefined、函数、symbol 为属性值，被忽略 */ let result = []; Object.keys(data).forEach((item, index) => { if (typeof item !== 'symbol') { //key 如果是symbol对象，忽略 if (data[item] !== undefined && typeof data[item] !== 'function' && typeof data[item] !== 'symbol') { //键值如果是 undefined、函数、symbol 为属性值，忽略 result.push('"' + item + '"' + ":" + jsonStringify(data[item])); } } }); return ("{" + result + "}").replace(/'/g, '"'); } }}
复制代码
实现 JSON.parse
介绍 2 种方法实现：
eval 实现
第一种方式最简单，也最直观，就是直接调用 eval，代码如下：
var json = '{"a":"1", "b":2}';var obj = eval("(" + json + ")"); // obj 就是 json 反序列化之后得到的对象
复制代码
但是直接调用 eval 会存在安全问题，如果数据中可能不是 json 数据，而是可执行的 JavaScript 代码，那很可能会造成 XSS 攻击。因此，在调用 eval 之前，需要对数据进行校验。
var rx_one = /^[\],:{}\s]*$/;var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
if ( rx_one.test( json.replace(rx_two, "@") .replace(rx_three, "]") .replace(rx_four, "") )) { var obj = eval("(" +json + ")");}
复制代码
new Function 实现
Function 与 eval 有相同的字符串参数特性。
var json = '{"name":"小姐姐", "age":20}';var obj = (new Function('return ' + json))();
复制代码
实现 Promise
实现 Promise 需要完全读懂 Promise A+ 规范，不过从总体的实现上看，有如下几个点需要考虑到：
then 需要支持链式调用，所以得返回一个新的 Promise；
处理异步问题，所以得先用 onResolvedCallbacks 和 onRejectedCallbacks 分别把成功和失败的回调存起来；
为了让链式调用正常进行下去，需要判断 onFulfilled 和 onRejected 的类型；
onFulfilled 和 onRejected 需要被异步调用，这里用 setTimeout 模拟异步；
处理 Promise 的 resolve；
const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';
class Promise { constructor(executor) { this.status = PENDING; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = [];
let resolve = (value) = > { if (this.status === PENDING) { this.status = FULFILLED; this.value = value; this.onResolvedCallbacks.forEach((fn) = > fn()); } };
let reject = (reason) = > { if (this.status === PENDING) { this.status = REJECTED; this.reason = reason; this.onRejectedCallbacks.forEach((fn) = > fn()); } };
try { executor(resolve, reject); } catch (error) { reject(error); } }
then(onFulfilled, onRejected) { // 解决 onFufilled，onRejected 没有传值的问题 onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (v) = > v; // 因为错误的值要让后面访问到，所以这里也要抛出错误，不然会在之后 then 的 resolve 中捕获 onRejected = typeof onRejected === "function" ? onRejected : (err) = > { throw err; }; // 每次调用 then 都返回一个新的 promise let promise2 = new Promise((resolve, reject) = > { if (this.status === FULFILLED) { //Promise/A+ 2.2.4 --- setTimeout setTimeout(() = > { try { let x = onFulfilled(this.value); // x可能是一个proimise resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }
if (this.status === REJECTED) { //Promise/A+ 2.2.3 setTimeout(() = > { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }
if (this.status === PENDING) { this.onResolvedCallbacks.push(() = > { setTimeout(() = > { try { let x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); });
this.onRejectedCallbacks.push(() = > { setTimeout(() = > { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }); } });
return promise2; }}const resolvePromise = (promise2, x, resolve, reject) = > { // 自己等待自己完成是错误的实现，用一个类型错误，结束掉 promise Promise/A+ 2.3.1 if (promise2 === x) { return reject( new TypeError("Chaining cycle detected for promise #<Promise>")); } // Promise/A+ 2.3.3.3.3 只能调用一次 let called; // 后续的条件要严格判断 保证代码能和别的库一起使用 if ((typeof x === "object" && x != null) || typeof x === "function") { try { // 为了判断 resolve 过的就不用再 reject 了（比如 reject 和 resolve 同时调用的时候） Promise/A+ 2.3.3.1 let then = x.then; if (typeof then === "function") { // 不要写成 x.then，直接 then.call 就可以了 因为 x.then 会再次取值，Object.defineProperty Promise/A+ 2.3.3.3 then.call( x, (y) = > { // 根据 promise 的状态决定是成功还是失败 if (called) return; called = true; // 递归解析的过程（因为可能 promise 中还有 promise） Promise/A+ 2.3.3.3.1 resolvePromise(promise2, y, resolve, reject); }, (r) = > { // 只要失败就失败 Promise/A+ 2.3.3.3.2 if (called) return; called = true; reject(r); }); } else { // 如果 x.then 是个普通值就直接返回 resolve 作为结果 Promise/A+ 2.3.3.4 resolve(x); } } catch (e) { // Promise/A+ 2.3.3.2 if (called) return; called = true; reject(e); } } else { // 如果 x 是个普通值就直接返回 resolve 作为结果 Promise/A+ 2.3.4 resolve(x); }};
复制代码
Promise 写完之后可以通过 promises-aplus-tests 这个包对我们写的代码进行测试，看是否符合 A+ 规范。不过测试前还得加一段代码：
// promise.js// 这里是上面写的 Promise 全部代码Promise.defer = Promise.deferred = function () { let dfd = {} dfd.promise = new Promise((resolve,reject)=>{ dfd.resolve = resolve; dfd.reject = reject; }); return dfd;}module.exports = Promise;
复制代码
全局安装：
npm i promises-aplus-tests -g
复制代码
终端下执行验证命令：
promises-aplus-tests promise.js
复制代码
上面写的代码可以顺利通过全部 872 个测试用例。
Promise.resolve
Promsie.resolve(value) 可以将任何值转成值为 value 状态是 fulfilled 的 Promise，但如果传入的值本身是 Promise 则会原样返回它。
Promise.resolve = function(value) { // 如果是 Promsie，则直接输出它 if(value instanceof Promise){ return value } return new Promise(resolve => resolve(value))}
复制代码
Promise.reject
和 Promise.resolve() 类似，Promise.reject() 会实例化一个 rejected 状态的 Promise。但与 Promise.resolve() 不同的是，如果给 Promise.reject() 传递一个 Promise 对象，则这个对象会成为新 Promise 的值。
Promise.reject = function(reason) { return new Promise((resolve, reject) => reject(reason))}
复制代码
Promise.all
Promise.all 的规则是这样的：
传入的所有 Promsie 都是 fulfilled，则返回由他们的值组成的，状态为 fulfilled 的新 Promise；
只要有一个 Promise 是 rejected，则返回 rejected 状态的新 Promsie，且它的值是第一个 rejected 的 Promise 的值；
只要有一个 Promise 是 pending，则返回一个 pending 状态的新 Promise；
Promise.all = function(promiseArr) { let index = 0, result = [] return new Promise((resolve, reject) => { promiseArr.forEach((p, i) => { Promise.resolve(p).then(val => { index++ result[i] = val if (index === promiseArr.length) { resolve(result) } }, err => { reject(err) }) }) })}
复制代码
Promise.race
Promise.race 会返回一个由所有可迭代实例中第一个 fulfilled 或 rejected 的实例包装后的新实例。
Promise.race = function(promiseArr) { return new Promise((resolve, reject) => { promiseArr.forEach(p => { Promise.resolve(p).then(val => { resolve(val) }, err => { rejecte(err) }) }) })}
复制代码
Promise.allSettled
Promise.allSettled 的规则是这样：
Promise.allSettled = function(promiseArr) { let result = []
return new Promise((resolve, reject) => { promiseArr.forEach((p, i) => { Promise.resolve(p).then(val => { result.push({ status: 'fulfilled', value: val }) if (result.length === promiseArr.length) { resolve(result) } }, err => { result.push({ status: 'rejected', reason: err }) if (result.length === promiseArr.length) { resolve(result) } }) }) }) }
复制代码
Promise.any
Promise.any 的规则是这样：
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')) } }) }) })}
复制代码
JS 闭包，你了解多少？
应该有面试官问过你：
什么是闭包？
闭包有哪些实际运用场景？
闭包是如何产生的？
闭包产生的变量如何被回收？
这些问题其实都可以被看作是同一个问题，那就是面试官在问你：你对JS闭包了解多少？
来总结一下我听到过的答案，尽量完全复原候选人面试的时候说的原话。
答案1: 就是一个function里面return了一个子函数，子函数访问了外面那个函数的变量。
答案2: for 循环里面可以用闭包来解决问题。
for(var i = 0; i < 10; i++){ setTimeout(()=>console.log(i),0)}// 控制台输出10遍10.for(var i = 0; i < 10; i++){ (function(a){ setTimeout(()=>console.log(a),0) })(i)} // 控制台输出0-9
复制代码
答案3： 当前作用域产产生了对父作用域的引用。
答案4： 不知道。是跟浏览器的垃圾回收机制有关吗？
开杠了。请问，小伙伴的答案和以上的内容有多少相似程度？
其实，拿着这些问题好好想想，你就会发现这些问题都只是为了最终那一个问题。
闭包的底层实现原理
1. JS执行上下文
我们都知道，我们手写的 js 代码是要经过浏览器 V8 进行预编译后才能真正的被执行。例如变量提升、函数提升。举个栗子。
// 栗子：var d = 'abc';function a(){ console.log("函数a");};console.log(a); // ƒ a(){ console.log("函数a"); }a(); // '函数a'var a = "变量a"; console.log(a); // '变量a'a(); // a is not a functionvar c = 123;
// 输出结果及顺序：// ƒ a(){ console.log("函数a"); }// '函数a'// '变量a'// a is not a function
// 栗子预编后相当于：function a(){ console.log("函数a");};var d;console.log(a); // ƒ a(){ console.log("函数a"); }a(); // '函数a'
a = "变量a"; // 此时变量a赋值，函数声明被覆盖
console.log(a); // "变量a"a(); // a is not a function
复制代码
那么问题来了。 请问是谁来执行预编译操作的？那这个谁又是在哪里进行预编译的？
是的，你的疑惑没有错。js 代码运行需要一个运行环境，那这个环境就是执行上下文。 是的，js 运行前的预编译也是在这个环境中进行。
js 执行上下文分三种：
那么，执行上下文的周期，分为两个阶段：
你现在猜猜看，预编译是发生在什么时候？
噢，我忘记说了，其实与编译还有另一个称呼：执行期上下文。
预编译发生在函数执行之前。预编译四部曲为：
创建AO对象
找形参和变量声明，将变量和形参作为 AO 属性名，值为undefined
将实参和形参相统一
在函数体里找到函数声明，值赋予函数体。最后程序输出变量值的时候，就是从AO对象中拿。
所以，预编译真正的结果是：
var AO = { a = function a(){console.log("函数a");}; d = 'abc'}
复制代码
我们重新来。
1. 什么叫变量对象？
变量对象是 js 代码在进入执行上下文时，js 引擎在内存中建立的一个对象，用来存放当前执行环境中的变量。
2. 变量对象(VO)的创建过程
变量对象的创建，是在执行上下文创建阶段，依次经过以下三个过程：
//举个栗子 function bar(a, b, c) { console.log(arguments); // [1, 2] console.log(arguments[2]); // undefined}bar(1,2)
复制代码
console.log(a); // function a() {console.log('Is a ?') }function a() { console.log('Is a');}function a() { console.log('Is a ?')}
/**ps: 在执行第一行代码之前，函数声明已经创建完成.后面的对之前的声明进行了覆盖。**/
复制代码
console.log(a); // function a() {console.log('Is a ?') }console.log(b); // undefinedfunction a() { console.log('Is a ');}function a() {console.log('Is a ?');}var b = 'Is b';var a = 10086;
/**这段代码执行一下，你会发现 a 打印结果仍旧是一个函数，而 b 则是 undefined。**/
复制代码
根据以上三个步骤，对于变量提升也就知道是怎么回事了。
3. 变量对象变为活动对象
执行上下文的第二个阶段，称为执行阶段，在此时，会进行变量赋值，函数引用并执行其他代码，此时，变量对象变为活动对象。
我们还是举上面的例子：
console.log(a); // function a() {console.log('fjdsfs') }console.log(b); // undefinedfunction a() { console.log('Is a');}function a() { console.log('Is a?');}var b = 'Is b';console.log(b); // 'Is b'var a = 10086; console.log(a); // 10086var b = 'Is b?';console.log(b); // 'Is b?'
复制代码
在上面的代码中，代码真正开始执行是从第一行 console.log() 开始的，自这之前，执行上下文是这样的：
// 创建过程EC= { VO： {}; // 创建变量对象 scopeChain: {}; // 作用域链}VO = { argument: {...}; // 当前为全局上下文，所以这个属性值是空的 a: <a reference> // 函数 a 的引用地址 b: undefiend // 见上文创建变量对象的第三步}
复制代码
词法作用域（Lexical scope）
这里想说明，我们在函数执行上下文中有变量，在全局执行上下文中有变量。JavaScript的一个复杂之处在于它如何查找变量，如果在函数执行上下文中找不到变量，它将在调用上下文中寻找它，如果在它的调用上下文中没有找到，就一直往上一级，直到它在全局执行上下文中查找为止。(如果最后找不到，它就是 undefined)。
再来举个栗子：
1: let top = 0; // 2: function createWarp() { 3: function add(a, b) { 4: let ret = a + b 5: return ret 6: } 7: return add 8: } 9: let sum = createWarp()10: let result = sum(top, 8)11: console.log('result:',result)
复制代码
分析过程如下：
在全局上下文中声明变量top 并赋值为 0.
2 - 8 行。在全局执行上下文中声明了一个名为 createWarp 的变量，并为其分配了一个函数定义。其中第 3-7 行描述了其函数定义，并将函数定义存储到那个变量(createWarp)中。
第 9 行。我们在全局执行上下文中声明了一个名为 sum 的新变量，暂时，值为 undefined。
第 9 行。遇到()，表明需要执行或调用一个函数。那么查找全局执行上下文的内存并查找名为 createWarp 的变量。 明显，已经在步骤 2 中创建完毕。接着，调用它。
调用函数时，回到第 2 行。创建一个新的createWarp执行上下文。我们可以在 createWarp 的执行上下文中创建自有变量。js 引擎createWarp 的上下文添加到调用堆栈（call stack）。因为这个函数没有参数，直接跳到它的主体部分.
3 - 6 行。我们有一个新的函数声明，在createWarp执行上下文中创建一个变量 add。add 只存在于 createWarp 执行上下文中, 其函数定义存储在名为 add 的自有变量中。
第 7 行，我们返回变量 add 的内容。js 引擎查找一个名为 add 的变量并找到它. 第 4 行和第 5 行括号之间的内容构成该函数定义。
createWarp 调用完毕，createWarp 执行上下文将被销毁。add 变量也跟着被销毁。 但 add 函数定义仍然存在，因为它返回并赋值给了 sum 变量。 （ps: 这才是闭包产生的变量存于内存当中的真相）
接下来就是简单的执行过程，不再赘述。。
……
代码执行完毕，全局执行上下文被销毁。sum 和 result 也跟着被销毁。
小结一下
现在，如果再让你回答什么是闭包，你能答出多少？
其实，大家说的都对。不管是函数返回一个函数，还是产生了外部作用域的引用，都是有道理的。
所以，什么是闭包？
解释一下作用域链是如何产生的。
解释一下 js 执行上下文的创建、执行过程。
解释一下闭包所产生的变量放在哪了。
最后请把以上 3 点结合起来说给面试官听。
说下对 JS 的了解吧
是基于原型的动态语言，主要独特特性有 this、原型和原型链。
JS 严格意义上来说分为：语言标准部分（ECMAScript）+ 宿主环境部分
语言标准部分
2015 年发布 ES6，引入诸多新特性使得能够编写大型项目变成可能，标准自 2015 之后以年号代号，每年一更
宿主环境部分
代码输出结果
const promise = new Promise((resolve, reject) => { console.log(1); console.log(2);});promise.then(() => { console.log(3);});console.log(4);
复制代码
输出结果如下：
promise.then 是微任务，它会在所有的宏任务执行完之后才会执行，同时需要 promise 内部的状态发生变化，因为这里内部没有发生变化，一直处于 pending 状态，所以不输出 3。
评论