前端面试哪些是必须要掌握的

浏览器本地存储方式及使用场景

（1）Cookie

Cookie 是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie 就出现了。Cookie 的大小只有 4kb，它是一种纯文本文件，每次发起 HTTP 请求都会携带 Cookie。

Cookie 的特性：

• Cookie 一旦创建成功，名称就无法修改

• Cookie 是无法跨域名的，也就是说 a 域名和 b 域名下的 cookie 是无法共享的，这也是由 Cookie 的隐私安全性决定的，这样就能够阻止非法获取其他网站的 Cookie

• 每个域名下 Cookie 的数量不能超过 20 个，每个 Cookie 的大小不能超过 4kb

• 有安全问题，如果 Cookie 被拦截了，那就可获得 session 的所有信息，即使加密也于事无补，无需知道 cookie 的意义，只要转发 cookie 就能达到目的

• Cookie 在请求一个新的页面的时候都会被发送过去

如果需要域名之间跨域共享 Cookie，有两种方法：

1. 使用 Nginx 反向代理

2. 在一个站点登陆之后，往其他网站写 Cookie。服务端的 Session 存储到一个节点，Cookie 存储 sessionId

Cookie 的使用场景：

• 最常见的使用场景就是 Cookie 和 session 结合使用，我们将 sessionId 存储到 Cookie 中，每次发请求都会携带这个 sessionId，这样服务端就知道是谁发起的请求，从而响应相应的信息。

• 可以用来统计页面的点击次数

（2）LocalStorage

LocalStorage 是 HTML5 新引入的特性，由于有的时候我们存储的信息较大，Cookie 就不能满足我们的需求，这时候 LocalStorage 就派上用场了。

LocalStorage 的优点：

• 在大小方面，LocalStorage 的大小一般为 5MB，可以储存更多的信息

• LocalStorage 是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在

• 仅储存在本地，不像 Cookie 那样每次 HTTP 请求都会被携带

LocalStorage 的缺点：

• 存在浏览器兼容问题，IE8 以下版本的浏览器不支持

• 如果浏览器设置为隐私模式，那我们将无法读取到 LocalStorage

• LocalStorage 受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会访问

LocalStorage 的常用 API：

// 保存数据到 localStoragelocalStorage.setItem('key', 'value');
// 从 localStorage 获取数据let data = localStorage.getItem('key');
// 从 localStorage 删除保存的数据localStorage.removeItem('key');
// 从 localStorage 删除所有保存的数据localStorage.clear();
// 获取某个索引的KeylocalStorage.key(index)

LocalStorage 的使用场景：

• 有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的 LocalStorage 中，当需要换肤的时候，直接操作 LocalStorage 即可

• 在网站中的用户浏览信息也会存储在 LocalStorage 中，还有网站的一些不常变动的个人信息等也可以存储在本地的 LocalStorage 中

（3）SessionStorage

SessionStorage 和 LocalStorage 都是在 HTML5 才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。

SessionStorage 与 LocalStorage 对比：

• SessionStorage 和 LocalStorage 都在本地进行数据存储；

• SessionStorage 也有同源策略的限制，但是 SessionStorage 有一条更加严格的限制，SessionStorage 只有在同一浏览器的同一窗口下才能够共享；

• LocalStorage 和 SessionStorage 都不能被爬虫爬取；

SessionStorage 的常用 API：

// 保存数据到 sessionStoragesessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据sessionStorage.clear();
// 获取某个索引的KeysessionStorage.key(index)

SessionStorage 的使用场景

• 由于 SessionStorage 具有时效性，所以可以用来存储一些网站的游客登录的信息，还有临时的浏览记录的信息。当关闭网站之后，这些信息也就随之消除了。

TCP/IP 五层协议

TCP/IP五层协议和OSI的七层协议对应关系如下：

• 应用层 (application layer)：直接为应用进程提供服务。应用层协议定义的是应用进程间通讯和交互的规则，不同的应用有着不同的应用层协议，如 HTTP 协议（万维网服务）、FTP 协议（文件传输）、SMTP 协议（电子邮件）、DNS（域名查询）等。

• 传输层 (transport layer)：有时也译为运输层，它负责为两台主机中的进程提供通信服务。该层主要有以下两种协议：

• 传输控制协议 (Transmission Control Protocol，TCP)：提供面向连接的、可靠的数据传输服务，数据传输的基本单位是报文段（segment）；

• 用户数据报协议 (User Datagram Protocol，UDP)：提供无连接的、尽最大努力的数据传输服务，但不保证数据传输的可靠性，数据传输的基本单位是用户数据报。

• 网络层 (internet layer)：有时也译为网际层，它负责为两台主机提供通信服务，并通过选择合适的路由将数据传递到目标主机。

• 数据链路层 (data link layer)：负责将网络层交下来的 IP 数据报封装成帧，并在链路的两个相邻节点间传送帧，每一帧都包含数据和必要的控制信息（如同步信息、地址信息、差错控制等）。

• 物理层 (physical Layer)：确保数据可以在各种物理媒介上进行传输，为数据的传输提供可靠的环境。

从上图中可以看出，TCP/IP模型比OSI模型更加简洁，它把应用层/表示层/会话层全部整合为了应用层。

在每一层都工作着不同的设备，比如我们常用的交换机就工作在数据链路层的，一般的路由器是工作在网络层的。 在每一层实现的协议也各不同，即每一层的服务也不同，下图列出了每层主要的传输协议：

同样，TCP/IP五层协议的通信方式也是对等通信：

前端进阶面试题详细解答

代码输出结果

const async1 = async () => {  console.log('async1');  setTimeout(() => {    console.log('timer1')  }, 2000)  await new Promise(resolve => {    console.log('promise1')  })  console.log('async1 end')  return 'async1 success'} console.log('script start');async1().then(res => console.log(res));console.log('script end');Promise.resolve(1)  .then(2)  .then(Promise.resolve(3))  .catch(4)  .then(res => console.log(res))setTimeout(() => {  console.log('timer2')}, 1000)

输出结果如下：

script startasync1promise1script end1timer2timer1

代码的执行过程如下：

1. 首先执行同步带吗，打印出 script start；

2. 遇到定时器 timer1 将其加入宏任务队列；

3. 之后是执行 Promise，打印出 promise1，由于 Promise 没有返回值，所以后面的代码不会执行；

4. 然后执行同步代码，打印出 script end；

5. 继续执行下面的 Promise，.then 和.catch 期望参数是一个函数，这里传入的是一个数字，因此就会发生值渗透，将 resolve(1)的值传到最后一个 then，直接打印出 1；

6. 遇到第二个定时器，将其加入到微任务队列，执行微任务队列，按顺序依次执行两个定时器，但是由于定时器时间的原因，会在两秒后先打印出 timer2，在四秒后打印出 timer1。

代码输出结果

Promise.resolve('1')  .then(res => {    console.log(res)  })  .finally(() => {    console.log('finally')  })Promise.resolve('2')  .finally(() => {    console.log('finally2')      return '我是finally2返回的值'  })  .then(res => {    console.log('finally2后面的then函数', res)  })

输出结果如下：

1finally2finallyfinally2后面的then函数 2

.finally()一般用的很少，只要记住以下几点就可以了：

• .finally()方法不管 Promise 对象最后的状态如何都会执行

• .finally()方法的回调函数不接受任何的参数，也就是说你在.finally()函数中是无法知道 Promise 最终的状态是resolved还是rejected的

• 它最终返回的默认会是一个上一次的 Promise 对象值，不过如果抛出的是一个异常则返回异常的 Promise 对象。

• finally 本质上是 then 方法的特例

.finally()的错误捕获：

Promise.resolve('1')  .finally(() => {    console.log('finally1')    throw new Error('我是finally中抛出的异常')  })  .then(res => {    console.log('finally后面的then函数', res)  })  .catch(err => {    console.log('捕获错误', err)  })

输出结果为：

'finally1''捕获错误' Error: 我是finally中抛出的异常

进程与线程的概念

从本质上说，进程和线程都是 CPU 工作时间片的一个描述：

• 进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。

• 线程是进程中的更小单位，描述了执行一段指令所需的时间。

进程是资源分配的最小单位，线程是 CPU 调度的最小单位。

一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。进程是运行在虚拟内存上的，虚拟内存是用来解决用户对硬件资源的无限需求和有限的硬件资源之间的矛盾的。从操作系统角度来看，虚拟内存即交换文件；从处理器角度看，虚拟内存即虚拟地址空间。

如果程序很多时，内存可能会不够，操作系统为每个进程提供一套独立的虚拟地址空间，从而使得同一块物理内存在不同的进程中可以对应到不同或相同的虚拟地址，变相的增加了程序可以使用的内存。

进程和线程之间的关系有以下四个特点：

（1）进程中的任意一线程执行出错，都会导致整个进程的崩溃。

（2）线程之间共享进程中的数据。

（3）当一个进程关闭之后，操作系统会回收进程所占用的内存， 当一个进程退出时，操作系统会回收该进程所申请的所有资源；即使其中任意线程因为操作不当导致内存泄漏，当进程退出时，这些内存也会被正确回收。

（4）进程之间的内容相互隔离。 进程隔离就是为了使操作系统中的进程互不干扰，每一个进程只能访问自己占有的数据，也就避免出现进程 A 写入数据到进程 B 的情况。正是因为进程之间的数据是严格隔离的，所以一个进程如果崩溃了，或者挂起了，是不会影响到其他进程的。如果进程之间需要进行数据的通信，这时候，就需要使用用于进程间通信的机制了。

Chrome 浏览器的架构图： 从图中可以看出，最新的 Chrome 浏览器包括：

• 1 个浏览器主进程

• 1 个 GPU 进程

• 1 个网络进程

• 多个渲染进程

• 多个插件进程

这些进程的功能：

• 浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。

• 渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。

• GPU 进程：其实， GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。

• 网络进程：主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。

• 插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

所以，打开一个网页，最少需要四个进程：1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程。如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。

虽然多进程模型提升了浏览器的稳定性、流畅性和安全性，但同样不可避免地带来了一些问题：

• 更高的资源占用：因为每个进程都会包含公共基础结构的副本（如 JavaScript 运行环境），这就意味着浏览器会消耗更多的内存资源。

• 更复杂的体系架构：浏览器各模块之间耦合性高、扩展性差等问题，会导致现在的架构已经很难适应新的需求了。

Vue 通信

1.props和$emit2.中央事件总线 EventBus(基本不用)3.vuex(官方推荐状态管理器)4.$parent和$children当然还有一些其他办法，但基本不常用，或者用起来太复杂来。 介绍来通信的方式，还可以扩展说一下使用场景，如何使用，注意事项之类的。

手写发布订阅

class EventListener {    listeners = {};    on(name, fn) {        (this.listeners[name] || (this.listeners[name] = [])).push(fn)    }    once(name, fn) {        let tem = (...args) => {            this.removeListener(name, fn)            fn(...args)        }        fn.fn = tem        this.on(name, tem)    }    removeListener(name, fn) {        if (this.listeners[name]) {            this.listeners[name] = this.listeners[name].filter(listener => (listener != fn && listener != fn.fn))        }    }    removeAllListeners(name) {        if (name && this.listeners[name]) delete this.listeners[name]        this.listeners = {}    }    emit(name, ...args) {        if (this.listeners[name]) {            this.listeners[name].forEach(fn => fn.call(this, ...args))        }    }}

对闭包的理解

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

闭包有两个常用的用途；

• 闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。

• 闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

比如，函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。

function A() {  let a = 1  window.B = function () {      console.log(a)  }}A()B() // 1

在 JS 中，闭包存在的意义就是让我们可以间接访问函数内部的变量。经典面试题：循环中使用闭包解决 var 定义函数的问题

for (var i = 1; i <= 5; i++) {  setTimeout(function timer() {    console.log(i)  }, i * 1000)}

首先因为 setTimeout 是个异步函数，所以会先把循环全部执行完毕，这时候 i 就是 6 了，所以会输出一堆 6。解决办法有三种：

• 第一种是使用闭包的方式

for (var i = 1; i <= 5; i++) {  ;(function(j) {    setTimeout(function timer() {      console.log(j)    }, j * 1000)  })(i)}

在上述代码中，首先使用了立即执行函数将 i 传入函数内部，这个时候值就被固定在了参数 j 上面不会改变，当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量 j，从而达到目的。

• 第二种就是使用 setTimeout 的第三个参数，这个参数会被当成 timer 函数的参数传入。

for (var i = 1; i <= 5; i++) {  setTimeout(    function timer(j) {      console.log(j)    },    i * 1000,    i  )}

• 第三种就是使用 let 定义 i 了来解决问题了，这个也是最为推荐的方式

for (let i = 1; i <= 5; i++) {  setTimeout(function timer() {    console.log(i)  }, i * 1000)}

实现一个三角形

CSS 绘制三角形主要用到的是 border 属性，也就是边框。

平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border 属性是右三角形组成的，下面看一个例子：

div {    width: 0;    height: 0;    border: 100px solid;    border-color: orange blue red green;}

将元素的长宽都设置为 0

（1）三角 1

div {    width: 0;    height: 0;    border-top: 50px solid red;    border-right: 50px solid transparent;    border-left: 50px solid transparent;}

（2）三角 2

div {    width: 0;    height: 0;    border-bottom: 50px solid red;    border-right: 50px solid transparent;    border-left: 50px solid transparent;}

（3）三角 3

div {    width: 0;    height: 0;    border-left: 50px solid red;    border-top: 50px solid transparent;    border-bottom: 50px solid transparent;}

（4）三角 4

div {    width: 0;    height: 0;    border-right: 50px solid red;    border-top: 50px solid transparent;    border-bottom: 50px solid transparent;}

（5）三角 5

div {    width: 0;    height: 0;    border-top: 100px solid red;    border-right: 100px solid transparent;}

还有很多，就不一一实现了，总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。

代码输出结果

console.log(1)
setTimeout(() => {  console.log(2)})
new Promise(resolve =>  {  console.log(3)  resolve(4)}).then(d => console.log(d))
setTimeout(() => {  console.log(5)  new Promise(resolve =>  {    resolve(6)  }).then(d => console.log(d))})
setTimeout(() => {  console.log(7)})
console.log(8)

输出结果如下：

13842567

代码执行过程如下：

1. 首先执行 script 代码，打印出 1；

2. 遇到第一个定时器，加入到宏任务队列；

3. 遇到 Promise，执行代码，打印出 3，遇到 resolve，将其加入到微任务队列；

4. 遇到第二个定时器，加入到宏任务队列；

5. 遇到第三个定时器，加入到宏任务队列；

6. 继续执行 script 代码，打印出 8，第一轮执行结束；

7. 执行微任务队列，打印出第一个 Promise 的 resolve 结果：4；

8. 开始执行宏任务队列，执行第一个定时器，打印出 2；

9. 此时没有微任务，继续执行宏任务中的第二个定时器，首先打印出 5，遇到 Promise，首选打印出 6，遇到 resolve，将其加入到微任务队列；

10. 执行微任务队列，打印出 6；

11. 执行宏任务队列中的最后一个定时器，打印出 7。

响应式设计的概念及基本原理

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。关于兼容： 页面头部必须有 mate 声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

浏览器资源缓存的位置有哪些？

资源缓存的位置一共有 3 种，按优先级从高到低分别是：

1. Service Worker：Service Worker 运行在 JavaScript 主线程之外，虽然由于脱离了浏览器窗体无法直接访问 DOM，但是它可以完成离线缓存、消息推送、网络代理等功能。它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。当 Service Worker 没有命中缓存的时候，需要去调用 fetch 函数获取 数据。也就是说，如果没有在 Service Worker 命中缓存，会根据缓存查找优先级去查找数据。但是不管是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示是从 Service Worker 中获取的内容。

2. Memory Cache： Memory Cache 就是内存缓存，它的效率最快，**但是内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。**一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

3. Disk Cache： Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache **胜在容量和存储时效性上。**在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。

Disk Cache： Push Cache 是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。并且缓存时间也很短暂，只在会话（Session）中存在，一旦会话结束就被释放。其具有以下特点：

• 所有的资源都能被推送，但是 Edge 和 Safari 浏览器兼容性不怎么好

• 可以推送 no-cache 和 no-store 的资源

• 一旦连接被关闭，Push Cache 就被释放

• 多个页面可以使用相同的 HTTP/2 连接，也就是说能使用同样的缓存

• Push Cache 中的缓存只能被使用一次

• 浏览器可以拒绝接受已经存在的资源推送

• 可以给其他域名推送资源​

compose

题目描述:实现一个 compose 函数

// 用法如下:function fn1(x) {  return x + 1;}function fn2(x) {  return x + 2;}function fn3(x) {  return x + 3;}function fn4(x) {  return x + 4;}const a = compose(fn1, fn2, fn3, fn4);console.log(a(1)); // 1+4+3+2+1=11

实现代码如下:

function compose(...fn) {  if (!fn.length) return (v) => v;  if (fn.length === 1) return fn[0];  return fn.reduce(    (pre, cur) =>      (...args) =>        pre(cur(...args))  );}

水平垂直居中的实现

• 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.parent {    position: relative;} .child {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);}

• 利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent {    position: relative;}
.child {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;}

• 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent {    position: relative;}
.child {    position: absolute;    top: 50%;    left: 50%;    margin-top: -50px;     /* 自身 height 的一半 */    margin-left: -50px;    /* 自身 width 的一半 */}

• 使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

.parent {    display: flex;    justify-content:center;    align-items:center;}

其他值到数字值的转换规则？

• Undefined 类型的值转换为 NaN。

• Null 类型的值转换为 0。

• Boolean 类型的值，true 转换为 1，false 转换为 0。

• String 类型的值转换如同使用 Number() 函数进行转换，如果包含非数字值则转换为 NaN，空字符串为 0。

• Symbol 类型的值不能转换为数字，会报错。

• 对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。

为了将值转换为相应的基本类型值，抽象操作 ToPrimitive 会首先（通过内部操作 DefaultValue）检查该值是否有 valueOf()方法。如果有并且返回基本类型值，就使用该值进行强制类型转换。如果没有就使用 toString() 的返回值（如果存在）来进行强制类型转换。

如果 valueOf() 和 toString() 均不返回基本类型值，会产生 TypeError 错误。

absolute 与 fixed 共同点与不同点

共同点：

• 改变行内元素的呈现方式，将 display 置为 inline-block

• 使元素脱离普通文档流，不再占据文档物理空间

• 覆盖非定位文档元素

不同点：

• abuselute 与 fixed 的根元素不同，abuselute 的根元素可以设置，fixed 根元素是浏览器。

• 在有滚动条的页面中，absolute 会跟着父元素进行移动，fixed 固定在页面的具体位置。

代码输出结果

function runAsync (x) {  const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))  return p}function runReject (x) {  const p = new Promise((res, rej) => setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x))  return p}Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])       .then(res => console.log(res))       .catch(err => console.log(err))

输出结果如下：

// 1s后输出13// 2s后输出2Error: 2// 4s后输出4

可以看到。catch 捕获到了第一个错误，在这道题目中最先的错误就是runReject(2)的结果。如果一组异步操作中有一个异常都不会进入.then()的第一个回调函数参数中。会被.then()的第二个回调函数捕获。

对 sticky 定位的理解

sticky 英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

函数防抖

触发高频事件 N 秒后只会执行一次，如果 N 秒内事件再次触发，则会重新计时。

简单版：函数内部支持使用 this 和 event 对象；

function debounce(func, wait) {    var timeout;    return function () {        var context = this;        var args = arguments;        clearTimeout(timeout)        timeout = setTimeout(function(){            func.apply(context, args)        }, wait);    }}

使用：

var node = document.getElementById('layout')function getUserAction(e) {    console.log(this, e)  // 分别打印：node 这个节点 和 MouseEvent    node.innerHTML = count++;};node.onmousemove = debounce(getUserAction, 1000)

最终版：除了支持 this 和 event 外，还支持以下功能：

• 支持立即执行；

• 函数可能有返回值；

• 支持取消功能；

function debounce(func, wait, immediate) {    var timeout, result;
    var debounced = function () {        var context = this;        var args = arguments;
        if (timeout) clearTimeout(timeout);        if (immediate) {            // 如果已经执行过，不再执行            var callNow = !timeout;            timeout = setTimeout(function(){                timeout = null;            }, wait)            if (callNow) result = func.apply(context, args)        } else {            timeout = setTimeout(function(){                func.apply(context, args)            }, wait);        }        return result;    };
    debounced.cancel = function() {        clearTimeout(timeout);        timeout = null;    };
    return debounced;}

使用：

var setUseAction = debounce(getUserAction, 10000, true);// 使用防抖node.onmousemove = setUseAction
// 取消防抖setUseAction.cancel()

代码输出结果

function Dog() {  this.name = 'puppy'}Dog.prototype.bark = () => {  console.log('woof!woof!')}const dog = new Dog()console.log(Dog.prototype.constructor === Dog && dog.constructor === Dog && dog instanceof Dog)

输出结果：true

解析： 因为 constructor 是 prototype 上的属性，所以 dog.constructor 实际上就是指向 Dog.prototype.constructor；constructor 属性指向构造函数。instanceof 而实际检测的是类型是否在实例的原型链上。

constructor 是 prototype 上的属性，这一点很容易被忽略掉。constructor 和 instanceof 的作用是不同的，感性地来说，constructor 的限制比较严格，它只能严格对比对象的构造函数是不是指定的值；而 instanceof 比较松散，只要检测的类型在原型链上，就会返回 true。