什么是高阶函数？
高阶函数只是，将函数作为参数 ， 函数的返回值返回值是函数
构造函数
new的原理
new实际上是在堆内存中开辟一个空间。 ①创建一个空对象，构造函数中的this指向这个空对象；
②这个新对象被执行[ [ 原型 ] ]连接；
③执行构造函数方法，属性和方法被添加到this引用的对象中；
④如果构造函数中没有返回其它对象，那么返回this，即创建的这个的新对象，否则，返回构造函数中返回的对象。
自己理解的new：
new实际上是在堆内存中开辟一个新的空间。首先创建一个空对象obj，然后呢，把这个空对象的原型(proto)和构造函数的原型对象 (constructor.prototype)连接(等于)；然后执行函数中的代码，就是为这个新对象添加属性和方法。最后进行判断其返回值，如果构造函数返回的是一个对象，那就返回这个对象，如果不是，那就返回我们创建的对象。
作用域，js的机制
垃圾回收机制和内存机制
垃圾回收
浏览器的js具有自动垃圾回收机制，垃圾回收机制也就是自动内存管理机制，垃圾收集器会定期的找出那些不在继续使用的变量，然后释放内存。但是这个过程不是实时的，因为GC(垃圾回收)开销比较大并且时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。
内存泄露
如果 那些不再使用的变量，它们所占用的内存 不去清除的话就会造成内存泄漏
内存泄露其实就是我们的程序中已经动态分配的堆内存，由于某些原因没有得到释放，造成系统内存的浪费导致程序运行速度减慢甚至系统崩溃等严重后果。
比如说：
1、闭包：在闭包中引入闭包外部的变量时，当闭包结束时此对象无法被垃圾回收（GC）。
2、DOM：当原有的DOM被移除时，子结点引用没有被移除则无法回收
3、Times计时器泄露
作用域
1、作用域
作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域
全局作用域就是Js中最外层的作用域
函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套
Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）
2、自由变量
当前作用域外的变量都是自由变量，一个变量在当前作用域没有定义，但是被使用了，就会向上级作用域，一层一层依次查找，直至找到为止，如果全局作用域都没有找到这个变量就会报错。这个自由变量查找的过程就是作用域链。
3、变量提升
当栈内存(作用域)形成的,js代码自上而下执行之前,浏览器首先会把带有 “var”、"function"关键字的进行提前“声明”或“定义“,这种预先处理的机制就是变量提升。
每个var声明的变量，function声明的函数存在变量提升。let const不存在变量提升
在js中声明之前未定义，会在js的最上方会形成一个预解析池，用来存储声明了但没有先定义的变量名
4、作用域链：
作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，我们可以访问到外层环境的变量和函数，简单来说：内部函数访问外部函数的变量这种链式查找的机制被称为作用域链
谈谈JS的运行机制
- js单线程
JavaScript语言的一大特点就是单线程，即同一时间只能做一件事情。
- js事件循环
js代码执行过程中会有很多任务，这些任务总的分成两类：
同步任务
异步任务
需要注意的是除了同步任务和异步任务，任务还可以更加细分为macrotask(宏任务)和microtask(微任务)，js引擎会优先执行微任务
微任务包括了 promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。
宏任务包括了 script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲 染等。
首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。
在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务
当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。
任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。
当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。
JS延迟加载的方式
JavaScript会阻塞DOM的解析，因此也就会阻塞DOM的加载。所以有时候我们希望延迟JS的加载来提高页面的加载速度。
1.把JS放在页面的最底部
2.script标签的defer属性：脚本会立即下载但延迟到整个页面加载完毕再执行。该属性对于内联脚本无作用 (即没有 「src」 属性的脚本）。
3.是在外部JS加载完成后，浏览器空闲时，Load事件触发前执行，标记为async的脚本并不保证按照指定他们的先后顺序执行， 该属性对于内联脚本无作用 (即没有 「src」 属性的脚本）。
4.动态创建script标签，监听dom加载完毕再引入js文件
宏任务和微任务
js中的一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入eventqueue，然后在执行微任务。
宏任务：setTimeout,setInterval,Ajax,DOM事件
微任务：Promise async/await
因为JS是单线程语言，只能同时做一件事儿。js任务需要排队顺序执行，如果一个任务时间过长，后边的任务也会等着。假如，我们在请求一个网址时，图片加载很慢，网页总不能一直卡不出来， 这个时候就可以用异步来解决了，异步的特点不会阻塞代码的执行 ,解决了单线程等待的这个问题
在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务
异步和单线程是相辅相成的，js是一门单线程语言，所以需要异步来辅助。
宏任务macrotask： 可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到 执行栈中执行)。 常见的宏任务：script, setTimeout, setInterval, setImmediate, I/O, UI rendering。
微任务microtask(异步)： 可以理解是在当前task执行结束后立即执行的任务。
常见的微任务：process.nextTick(Nodejs),Promise.then(), MutationObserver。
线程，进程?
线程是最小的执行单元，进程是最小的资源管理单元一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程
JS预解析（变量提升），它导致了什么问题？
JS代码在执行前，浏览器会对js代码进行扫描，默认的把所有带var和function声明的变量进行提前的声明或者定义，遵循先解析后使用的原则。 变量提升的表现是，在变量或函数声明之前访问变量或调用函数而不会报错。
原因 JavaScript引擎在代码执行前有一个解析的过程（预编译），创建执行上线文，初始化一些代码执行时需要用到的对象。 当访问一个变量时，会到当前执行上下文中的作用域链中去查找，而作用域链的首端指向的是当前执行上下文的变量对象，这个变量对象是执行上下文的一个属性， 它包含了函数的形参、所有的函数和变量声明，这个对象的是在代码解析的时候创建的。
首先要知道，JS在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。
1.在解析阶段 JS会检查语法，并对函数进行预编译。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来， 变量先赋值为undefined，函数先声明好可使用。在一个函数执行之前，也会创建一个函数执行上下文环境，跟全局执行上下文类似， 不过函数执行上下文会多出this、arguments和函数的参数。
全局上下文：变量定义,函数声明
函数上下文：变量定义,函数声明，this，arguments
2.在执行阶段，就是按照代码的顺序依次执行。
那为什么会进行变量提升呢？主要有以下两个原因：
1、提高性能 2、容错性更好
（1）提高性能 在JS代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了提高性能，如果没有这一步， 那么每次执行代码前都必须重新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会改变，解析一遍就够了。 在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计声明了哪些变量、创建了哪些函数，并对函数的代码进行压缩，去除注释、 不必要的空白等。这样做的好处就是每次执行函数时都可以直接为该函数分配栈空间（不需要再解析一遍去获取代码中声明了哪些变量，创建了哪些函数）， 并且因为代码压缩的原因，代码执行也更快了。
（2）容错性更好 变量提升可以在一定程度上提高JS的容错性
总结
解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行
函数是一等公民，当函数声明与变量声明冲突时，变量提升时函数优先级更高，会忽略同名的变量声明
服务端渲染
定义：将组件或页面通过服务器生成html字符串，在发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
解释：服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。 客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。 使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。 有了服务端渲染，当请求用户页面时，返回的body里已经有了首屏的html结构，之后结合css显示出来。
优点： ①首屏渲染快(关键性问题)：相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件； ②SEO(搜索引擎)优化：不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本。 使用了React或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少。另外， 浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML， 网络爬中就可以抓取到完整页面的信息。 ③可以生成缓存片段、节能；
缺点：用户体验较差，不容易维护、通常前端改了部分html或者css，后端也需要改；
使用场景：vue全家桶或者react全家桶，都是推荐通过服务端渲染来实现路由的。
客户端渲染和服务端渲染的区别
服务端渲染：DOM树在服务端生成，然后返回给前端。
客户端渲染（SSR）：前端去后端取数据生成DOM树。
服务端渲染的优点：
1、尽量不占用前端的资源，前端这块耗时少，速度快。
2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。
服务端渲染的缺点：
1、不利于前后端分离，开发的效率降低了。
2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。
客户端渲染的优点：
1、前后端分离，开发效率高。
2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。
客户端渲染的缺点：
1、前端响应速度慢，特别是首屏，这样用户是受不了的。
2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。
服务端和客户端渲染的区别：
1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。
2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。
3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。
4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。
eventloop(事件循环)：进程和线程，任务队列；
浏览器内核是多线程，JavaScript是单线程；
JS单线程详解：因为 js 是面向客户端的一门语言，主要是用户交互，操作dom，渲染数据。试想一下。 如果是多线程，我们在一个线程删除了一个dom节点，另外一个线程添加了一个dom节点，以那个线程为主呢， 就会出现混乱的情况。当然你可以说我们在操作一个dom之后加上锁，只允许一个线程操作，这样其实增加了程序的复杂度， 并不是一个好办法。
单线程产生的问题：必须要等待前一个程序执行完毕才执行下一个，所以将程序分为了两类：同步任务和异步任务。 异步任务又可以分为宏任务和微任务。(前面有详解)
栈：先进后出的数据结构，存储基本数据类型的变量。
堆：主要负责引用数据类型的存储。
任务队列：为什么会有任务队列呢，还是因为 javascript 单线程的原因，单线程，就意味着一个任务一个任务的执行， 执行完当前任务，执行下一个任务，这样也会遇到一个问题，就比如说，要向服务端通信，加载大量数据，如果是同步执行， js 主线程就得等着这个通信完成，然后才能渲染数据，为了高效率的利用cpu, 就有了同步任务和异步任务之分。
同步任务： 指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步任务： 指的是不进入主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
同步和异步的区别？各举一个Js中同步和异步的案例？
同步：上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会做下一件事情
异步： 规划要做一件事情,如果是异步事情，不是当前立马去执行这件事情，需要等一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作
对于写程序，同步往往会阻塞，没有数据过来，我就等着，异步则不会阻塞，没数据来我干别的事，有数据来去处理这些数据。
同步案例：for循环语句，alert(),console.log()等 js大部分都是同步编程
异步案例：所有定时器，ajax异步请求，所有的事件绑定都是异步;
BOM浏览器对象模型
js操作BOM
浏览器对象模型（BOM ：Browser Object Model）是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。
window : alert() , prompt() , confirm() , setInterval() , clearInterval() , setTimeout() , clearTimeout() ;
history : go(参数) , back() , foward() ;
location : herf属性.
1、window.location.href = '你所要跳转到的页面';
2、window.open('你所要跳转到的页面’);
3、window.history.back(-1):返回上一页
4、window.history.go(-1/1):返回上一页或下一页五、
5、history.go("baidu.com")；
说出5个以上Math对象中的成员。
Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入版 就近取整
Math.abs() 绝对值
Math.max()/Math.min() 求最大和最小值
Math.random() 获取范围在[0,1)内的随机值
setTimeout与setInterval区别与机制
setTimeout()和setInterval()经常被用来处理延时和定时任务。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
机制：
因为js是单线程的。浏览器遇到setTimeout 和 setInterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的 待执行时间队列里面，等到浏览器执行完当前代码之后会看下事件队列里有没有任务，有的话才执行定时器里的代码
window的onload事件和domcontentloaded
window.onload：当一个资源及其依赖资源已完成加载时，将触发onload事件。
document.onDOMContentLoaded：当初始的HTML文档被完全加载和解析完成之后， DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载。
区别：
①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。 ②onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。 ③当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoaded事件是个更好的选择，会比onload事件执行时间更早。
cookies，sessionStorage 和 localStorage 的区别?
cookie：一个大小不超过4K的小型文本数据，一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了 时间，cookie就会存放在硬盘里，过期才失效，每次http请求，header都携带cookie
localStorage：5M或者更大，永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除或者js代码清除，因此用作持久数据，不参与和服务器的通信
sessionStorage关闭页面或浏览器后被清除。存放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
location、lnavigator
location为全局对象window的一个属性，且window.location===document.location，其中的属性都是可读写的，但是只有修改href和hash才有意义，href会重新定位到一个URL，hash会跳到当前页面中的anchor名字的标记(如果有)，而且页面不会被重新加载
lnavigator对象 window.navigator`对象包含有关浏览器的信息，可以用它来查询一些关于运行当前脚本的应用程序的相关信息
navigator.appCodeName 只读,任何浏览器中，总是返回 'Gecko'。该属性仅仅是为了保持兼容性。
navigator.appName 只读,返回浏览器的官方名称。不要指望该属性返回正确的值。
navigator.appVersion 只读,返回一个字符串，表示浏览器的版本。不要指望该属性返回正确的值。
navigator.platform 只读,返回一个字符串，表示浏览器的所在系统平台。
navigator.product 只读,返回当前浏览器的产品名称（如，"Gecko"）。
navigator.userAgent 只读,返回当前浏览器的用户代理字符串（user agent string）
DOM文档对象模型
DOM是 document 用来表示文档中对象的标准模型，他是由节点和对象组成的结构集合。在浏览器解析HTML标签时，会构建一个DOM树结构。
操作说明书
拿到指定节点 var id = document.getElementById("id"); //返回带有指定id的元素
var name = document.getElementByTagName("li"); //返回带有指定标签的元素
var class = document.getElementByClassName("class"); //返回带有包含执行类名的所有元素节点列表。`
创建DOM节点
var node = document.createElement("div");
var attr = document.createAttribute("class");
var text = document.createTextNode("菜呀菜");`
插入DOM节点
node.appendChild(text) //插入新的子节点
node.insertBefore(pre,child) //在node元素内child前加入新元素`
删除DOM节点
node.removeChild(text) //从父元素删除子元素节点
修改DOM节点
node.setAttribute("class","name") //修改设置属性节点
node.replaceChild(pre,child) //父节点内新子节点替换旧子节点`
常用DOM属性
node.innerHtml //获取/替换元素内容
node.parentNode //元素节点的父节点
node.parentElement //元素节点的父元素节点（一般与Node节点相同）
node.firstChild //属性的第一个节点
node.lastChild //属性的最后一个节点
node.nextSibling //节点元素后的兄弟元素（包括回车，空格，换行）
node.nextElementSibling //节点元素后的兄弟元素节点
node.previousSibling //获取元素的上一个兄弟节点（元素，文本，注释）
node.previousElementSibling //获取元素的上一个兄弟节点（只包含元素节点）
node.childNodes //元素节点的子节点（空格，换行默认为文本节点）
node.children //返回当前元素的所有元素节点
node.nodeValue //获取节点值
node.nodeName //获取节点名字
node.attributes //元素节点的属性节点
node.getAttribute("name") //元素节点的某个属性节点
node.style.width = "200px" //设置css样式`
常用的api
offset、client、scroll的用法? offset系列 经常用于获得元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
js面试题的扩展
什么是函数式编程? 命令式编程？声明式编程？
声明式编程：专注于”做什么”而不是”如何去做”。在更高层面写代码，更关心的是目标，而不是底层算法实现的过程。 如：css, 正则表达式，sql 语句，html, xml…
命令式编程(过程式编程) : 专注于”如何去做”，这样不管”做什么”，都会按照你的命令去做。解决某一问题的具体算法实现。
如： for（）
函数式编程：把运算过程尽量写成一系列嵌套的函数调用。
如 ： forEach（）
iframe(HTML的内联标签)的优缺点有哪些？
优点：
①iframe能够原封不动的把嵌入的网页展现出来；
②如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
③网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
④如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
①会产生很多页面不易管理；
②iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
③代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
④很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
⑤iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
本题延申： frame框架：
优点： ①重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)； ②技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面； ③方便制作导航栏 ； 缺点： ①搜索引擎程序不能解读这种页面； ②不能打印全框架； ③浏览器的后退按钮无效； ④手机等终端设备无法显示全部框架内容； iframe和frame区别： ①frame不能脱离frameSet单独使用，iframe可以； ②frame不能放在body中,否则不能正常显示，frame不能和body同时使用，iframe可以； ③嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用； ④frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制； ⑤iframe 可以放到表格里面。frame 则不行。
如何让(a == 1 && a == 2 && a == 3)的值为true？
" == "操作符在左右数据不一致的时候，会先进行隐式转换，该值意味着不是基本数据类型， 因为如果a是null或者undefined、bool类型都不可能返回true；可以推测a是复杂数据类型。
方法一：数组的 toString 接口默认调用数组的 join 方法，重新 join 方法
方法二：利用数据劫持(Proxy/Object.definedProperty)
为什么0.1+0.2 ! == 0.3，如何让其相等
在开发过程中遇到类似这样的问题：
let n1 = 0.1, n2 = 0.2 console.log(n1 + n2) // 0.30000000000000004
这里得到的不是想要的结果，要想等于0.3，就要把它进行转化：
(n1 + n2).toFixed(2) // 注意，toFixed为四舍五入 复制代码 toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字。那为什么会出现这样的结果呢？
计算机是通过二进制的方式存储数据的，所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和
