前端面试之道

另外对于 null 来说，很多人会认为他是个对象类型，其实这是错误的。虽然 typeof null 会输出 object，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。

首先，函数传参是传递对象指针的副本
到函数内部修改参数的属性这步，我相信大家都知道，当前 p1 的值也被修改了
但是当我们重新为 person 分配了一个对象时就出现了分歧，请看下图

所以最后 person 拥有了一个新的地址（指针），也就和 p1 没有任何关系了，导致了最终两个变量的值是不相同的。

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

typeof null // 'object'

typeof [] // 'object'
typeof {} // 'object'

typeof console.log // 'function'

var str = 'hello world'
str instanceof String // false

var str1 = new String('hello world')
str1 instanceof String // true

Symbol.hasInstance 其实就是一个能让我们自定义 instanceof 行为的东西，
以上代码等同于 typeof 'hello world' === 'string'，所以结果自然是 true 了。
这其实也侧面反映了一个问题， instanceof 也不是百分之百可信的。

1、如果已经是原始类型了，那就不需要转换了
2、如果需要转字符串类型就调用 x.toString()，转换为基础类型的话就返回转换的值。
     不是字符串类型的话就先调用 valueOf，结果不是基础类型的话再调用 toString
3、调用 x.valueOf()，如果转换为基础类型，就返回转换的值
4、如果都没有返回原始类型，就会报错

加法运算符不同于其他几个运算符，
它有以下几个特点：

示例1

示例2

对于除了加法的运算符来说，只要其中一方是数字，那么另一方就会被转为数字

示例

解析

在这个例子中，因为包裹箭头函数的第一个普通函数是 a，所以此时的 this 是 window

可以从上述代码中发现，不管我们给函数 bind 几次，fn 中的 this 永远由第一次 bind 决定，所以结果永远是 window

图中的流程只针对于单个规则

两边都是相同数据类型时，==是直接比较两边数据，结果为false，因为[]属于引用类型，在两个[]分别指向不同的堆内存

过程：[]==![] ----> []==false -----> 0==0 --->//true

闭包的定义其实很简单：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。

在 JS 中，闭包存在的意义就是让我们可以间接访问函数内部的变量。

题目

解决办法

Object.assign 只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不是深拷贝

该方法也是有局限性的

MessageChannel

手写深拷贝

原型链就是多个对象通过 __proto__ 的方式连接了起来。为什么 obj 可以访问到 valueOf 函数，就是因为 obj 通过原型链找到了

例子1

例子2

使用 var 声明的变量会被提升到作用域的顶部

console.log(a) // ƒ a() {}
function a() {}
var a = 1

打印结果会是 ƒ a() {}，即使变量声明在函数之后，
这也说明了函数会被提升，并且优先于变量提升

为了解决函数间互相调用的情况

假如不存在提升这个情况，那么就实现不了上述的代码，因为不可能存在 test1 在 test2 前面然后 test2 又在 test1 前面。

1、在子类的构造函数中通过 Parent.call(this) 继承父类的属性

2、然后改变子类的原型为 new Parent() 来继承父类的函数

优点

缺点

将父类的原型赋值给了子类，并且将构造函数设置为子类，
这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数

1、解决命名冲突
2、提供复用性
3、提高代码可维护性

在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题

鉴于目前这两种实现方式已经很少见到，所以不再对具体特性细聊，只需要了解这两者是如何使用的。

CommonJS 最早是 Node 在使用，目前也仍然广泛使用，比如在 Webpack 中你就能见到它，当然目前在 Node 中的模块管理已经和 CommonJS 有一些区别了

ES Module 是原生实现的模块化方案

ES Module与 CommonJS 有以下几个区别

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

我们通过自定义 set 和 get 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。

第一轮遍历 parseInt('1', 0) -> 1
第二轮遍历 parseInt('2', 1) -> NaN
第三轮遍历 parseInt('3',

let array = [1, 2, 4, 6]
let newArray = array.filter(item => item !== 6)
console.log(newArray) // [1, 2, 4]

const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

对于 reduce 来说，它接受两个参数，分别是回调函数和初始值，接下来我们来分解上述代码中 reduce 的过程

首先初始值为 0，该值会在执行第一次回调函数时作为第一个参数传入
回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大家都可以明白作用，这里着重分析第一个参数
在一次执行回调函数时，当前值和初始值相加得出结果 1，该结果会在第二次执行回调函数时当做第一个参数传入
所以在第二次执行回调函数时，相加的值就分别是 1 和 2，以此类推，循环结束后得到结果 6

1、嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
2、嵌套函数一多，就很难处理错误

比如不能使用 try catch 捕获错误，
不能直接 return。

因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

第一，它和 setTimeout 一样，不能保证在预期的时间执行任务

第二，它存在执行累积的问题，请看以下伪代码

关键点

1、首先我们创建了三个常量用于表示状态，对于经常使用的一些值都应该通过常量来管理，便于开发及后期维护
2、在函数体内部首先创建了常量 that，因为代码可能会异步执行，用于获取正确的 this 对象
3、一开始 Promise 的状态应该是 pending
4、value 变量用于保存 resolve 或者 reject 中传入的值
5、resolvedCallbacks 和 rejectedCallbacks 用于保存 then 中的回调，因为当执行完 Promise 时状态可能还是等待中，这时候应该把 then 中的回调保存起来用于状态改变时使用

1、首先两个函数都得判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态
2、将当前状态更改为对应状态，并且将传入的值赋值给 value
3、遍历回调数组并执行

1、实现很简单，执行传入的参数并且将之前两个函数当做参数传进去
2、要注意的是，可能执行函数过程中会遇到错误，需要捕获错误并且执行 reject 函数

1、首先判断两个参数是否为函数类型，因为这两个参数是可选参数

2、当参数不是函数类型时，需要创建一个函数赋值给对应的参数，同时也实现了透传，比如如下代码
// 该代码目前在简单版中会报错
// 只是作为一个透传的例子
Promise.resolve(4).then().then((value) => console.log(value))

3、接下来就是一系列判断状态的逻辑，当状态不是等待态时，就去执行相对应的函数。
如果状态是等待态的话，就往回调函数中 push 函数，比如如下代码就会进入等待态的逻辑

不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。
在 ES6 规范中，microtask 称为 jobs，macrotask 称为 task。
下面来看以下代码的执行顺序：

首先先来解释下上述代码的 async 和 await 的执行顺序。当我们调用 async1 函数时，会马上输出 async2 end，并且函数返回一个 Promise，接下来在遇到 await的时候会就让出线程开始执行 async1 外的代码，所以我们完全可以把 await 看成是让出线程的标志。

然后当同步代码全部执行完毕以后，就会去执行所有的异步代码，那么又会回到 await 的位置执行返回的 Promise 的 resolve 函数，这又会把 resolve 丢到微任务队列中，接下来去执行 then 中的回调，当两个 then 中的回调全部执行完毕以后，又会回到 await 的位置处理返回值，这时候你可以看成是 Promise.resolve(返回值).then()，然后 await 后的代码全部被包裹进了 then 的回调中，所以 console.log('async1 end') 会优先执行于 setTimeout。

把 async 的这两个函数改造成你一定能理解的代码

1、首先 context 为可选参数，如果不传的话默认上下文为 window
2、接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数
3、因为 call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来
4、然后调用函数并将对象上的函数删除

1、前几步和之前的实现差不多，就不赘述了
2、bind 返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过 new 的方式，我们先来说直接调用的方式
3、对于直接调用来说，这里选择了 apply 的方式实现，但是对于参数需要注意以下情况：因为 bind 可以实现类似这样的代码 f.bind(obj, 1)(2)，所以我们需要将两边的参数拼接起来，于是就有了这样的实现 args.concat(...arguments)
4、最后来说通过 new 的方式，在之前的章节中我们学习过如何判断 this，对于 new 的情况来说，不会被任何方式改变 this，所以对于这种情况我们需要忽略传入的 this

1、创建一个空对象
2、获取构造函数
3、设置空对象的原型
4、绑定 this 并执行构造函数
5、确保返回值为对象

只要你在士兵前面使用 new 关键字，那么可以少做四件事情：

不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
不用 return 临时对象，因为 new 会帮你做；
不要给原型想名字了，因为 new 指定名字为 prototype。

这话说的，(⊙o⊙)…迷迷糊糊

三个阶段：捕获，目标，冒泡；

（1）捕获阶段：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。（所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。）在目标元素对象本身上注册的捕获事件处理程序不会被调用。
（2）目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。
（3）冒泡阶段：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点（我们平时用的事件绑定就是利用的事件冒泡的原理）
事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。

参数，省略。。

1、节省内存
2、不需要给子节点注销事件

原理

局限性

jsonp的简单实现

CORS 需要浏览器和后端同时支持

浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。
只要后端实现了 CORS，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。
该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，
会在发送请求时出现两种情况，分别为简单请求和复杂请求。

该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。

只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域

这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息

首先需要先注册 Service Worker，
然后监听到 install 事件以后就可以缓存需要的文件，
那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。
以下是这个步骤的实现：

Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。

Memory Cache 也就是内存中的缓存，读取内存中的数据肯定比磁盘快。
但是内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。
 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？

Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。

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

Push Cache 在国内能够查到的资料很少，也是因为 HTTP/2 在国内不够普及，但是 HTTP/2 将会是日后的一个趋势。

如果所有缓存都没有命中的话，那么只能发起请求来获取资源了。

Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效

Cache-control: max-age=30

Cache-Control 出现于 HTTP/1.1，优先级高于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码。

Last-Modified 存在一些弊端

ETag 类似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。
并且 ETag 优先级比 Last-Modified 高。

对于这种情况，浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。

设置节点为图层的方式有很多，
我们可以通过以下几个常用属性可以生成新图层

持久型也就是攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。

举例

非持久型相比于前者危害就小的多了，一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。

举例

转义输入输出的内容

白名单黑名单

CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。

CSP开启

对于这种方式来说，只要开发者配置了正确的规则，那么即使网站存在漏洞，攻击者也不能执行它的攻击代码，并且 CSP 的兼容性也不错。

举个例子，假设网站中有一个通过 GET 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口
<img src="http://www.domain.com/xxx?comment='attack'"/>

可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。

服务器下发一个随机 Token，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

X-FRAME-OPTIONS 是一个 HTTP 响应头，在现代浏览器有一个很好的支持。这个 HTTP 响应头 就是为了防御用 iframe 嵌套的点击劫持攻击。

该响应头有三个值可选，分别是

对于某些远古浏览器来说，并不能支持上面的这种方式，那我们只有通过 JS 的方式来防御点击劫持了。

以上代码的作用就是当通过 iframe 的方式加载页面时，攻击者的网页直接不显示所有内容了。

从上图中我们可以发现，JS 会首先被解析为 AST，解析的过程其实是略慢的。代码越多，解析的过程也就耗费越长，这也是我们需要压缩代码的原因之一。另外一种减少解析时间的方式是预解析，会作用于未执行的函数，这个我们下面再谈。

这里需要注意一点，对于函数来说，应该尽可能避免声明嵌套函数（类也是函数），因为这样会造成函数的重复解析。
function test1() {
    // 会被重复解析
    function test2() {}
}

优化 Loader 的文件搜索范围

将 Babel 编译过的文件缓存起来

思路引导

略

module.exports = {
    optimization: {
        concatenateModules: true
    }
}

// test.js
export const a = 1
export const b = 2
// index.js
import { a } from './test.js'

对于以上情况，test 文件中的变量 b 如果没有在项目中使用到的话，就不会被打包到文件中。

思路引导

在第一步算法中我们需要判断
1)新旧节点的 tagName 是否相同，如果不相同的话就代表节点被替换了。
2)如果没有更改 tagName 的话，就需要判断是否有子元素，有的话就进行第二步算法。

在第二步算法中，我们需要判断:
1)原本的列表中是否有节点被移除，
2)在新的列表中需要判断是否有新的节点加入，
3)还需要判断节点是否有移动。

这个属性是用来给每一个节点打标志的，用于判断是否是同一个节点。

www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.com。

window.addEventListener('hashchange', () => {
// ... 具体逻辑
})

History 模式是 HTML5 新推出的功能，主要使用 history.pushState 和 history.replaceState 改变 URL。

通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。

当用户做出浏览器动作时，比如点击后退按钮时会触发 popState 事件

父->子

子->父

这种父子通信方式也就是典型的单向数据流

使用语法糖 v-model 来直接实现，因为 v-model 默认会解析成名为 value 的 prop 和名为 input 的事件。
这种语法糖的方式是典型的双向绑定，常用于 UI 控件上，但是究其根本，还是通过事件的方法让父组件修改数据。

可以通过访问 $parent 或者 $children 对象来访问组件实例中的方法和数据

略过了，真的不想看。。。。

会先判断是否能使用 setImmediate ，不能的话降级为 MessageChannel ，以上都不行的话就使用 setTimeout

最常用的方式，可以自主选择需要监控的数据然后在相应的地方写入代码。
这种方式的灵活性很大，但是唯一的缺点就是工作量较大，每个需要监控的地方都得插入代码。

基本不需要开发者手写埋点了，而是统计所有的事件并且定时上报。
这种方式虽然没有前一种方式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的数据。

对于代码运行错误，通常的办法是使用 window.onerror 拦截报错。
该方法能拦截到大部分的详细报错信息，

但是也有例外

对于异步代码来说，可以使用 catch 的方式捕获错误。
比如 Promise 可以直接使用 catch 函数，async await 可以使用 try catch

对于捕获的错误需要上传给服务器，通常可以通过 img 标签的 src 发起一个请求

200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容
206 Partial Content，进行范围请求

301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求

400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源

1、在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。
2、在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
3、观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。
4、观察者 模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

8 ^ 7 // -> 15
8 ^ 8 // -> 0
// 1000 ^ 0111 -> 1111 -> 15
// 1000 ^ 1000 -> 0000 -> 0

冒泡排序的原理如下，从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素，那么此时最后一个元素就是该数组中最大的数。下一轮重复以上操作，但是此时最后一个元素已经是最大数了，所以不需要再比较最后一个元素，只需要比较到 length - 2 的位置。

该算法的操作次数是一个等差数列 n + (n - 1) + (n - 2) + 1 ，去掉常数项以后得出时间复杂度是 O(n * n)