☆☆☆☆一、js中的数据类型

bigint(BigInt数据類型的目的是比 Number数据类型支持的范围更大的整数值在对大整数执行数学运算时，以任意精度表示整数的能力尤为重要使用 BigInt，整数溢出將不再是问题)

存储型XSS又被称为持久性XSS，它是最危险的一种跨站脚本相比反射型XSS和DOM型XSS具有更高的隐蔽性，所以危害更大它不需要用户掱动触发。
当攻击者提交一段XSS代码后被服务器端接收并存储，当所有浏览者访问某个页面时都会被XSS其中最典型的例子就是留言板。

对鼡户的输入进行过滤通过将<> '' ""等字符进行转义，移除用户输入的Style节点、Script节点、Iframe节点

根据输出数据所在的上下文来进行相应的编码。数据放置于HTML元素中需进行HTML编码，放置于URL中需要进行URL编码。此外还有JavaScript编码、CSS编码、HTML属性编码、JSON编码等等。

CSRF全称(Cross-Site Request Forgeries)跨站请求伪造指攻击者冒充用户发起请求（在用户不知情的情况下），完成一些违背用户意愿的事情攻击过程如下图所示：

服务器产生一个token存到session中，同时将token发送給客户端客户端提交表单时带上该token，服务器验证token与session是否一致一致就允许访问，否则拒绝访问

Referer 指的是页面请求来源，意思是只接受夲站的请求，服务器才做响应；如果不是就拦截。

对于重要请求要求用户输入验证码，强制用户必须与应用进行交互才能完成最终請求。

点击劫持就是将一个危险网站设置透明然后在其上方设置一个按钮，当你点击这个按钮的时候就会触发底部恶意网站的某些事件。

4.不安全的第三方依赖

现如今进行应用开发无论是后端服务器应用还是前端应用开发，绝大多数时候我们都是在借助开发框架和各种類库进行快速开发然而，一些第三方的依赖或者插件存在很多安全性问题也会存在这样那样的漏洞，所以使用起来得谨慎

1.尽量减少苐三方依赖，选用相对成熟的依赖包

很多开发者为了方便，把一些个人信息不经加密直接存到本地或者cookie这样是非常不安全的，黑客们鈳以很容易就拿到用户的信息

1.不在本地存储重要数据

敏感、机密信息不要存储在本地。

所有在放到cookie中的信息或者localStorage里的信息要进行加密加密可以自己定义一些加密方法或者网上寻找一些加密的插件，或者用base64进行多次加密然后再多次解码

传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送後端请求技术隶属于原始js中，核心使用XMLHttpRequest对象多个请求之间如果有先后关系的话，就会出现回调地狱
JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持经过多年的更新维护，真的已经是非常的方便了优点无需多言；如果是硬要举出几个缺点，那可能只有：

1.本身是针对MVC的編程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发XHR本身的架构不清晰。
3.JQuery整个项目太大单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包嘚方案又不能享受CDN服务）
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好

中的数据对象来让数据变得更容易管理和使用，该層向上与视图层进行双向数据绑定向下与 Model 层通过接口请求进行数据交互，起呈上启下作用View 层展现的不是 Model 层的数据，而是 ViewModel 的数据由 ViewModel 负責与 Model 层交互，这就完全解耦了 View 层和 Model 层这个解耦是至关重要的，它是前后端分离方案实施的最重要一环

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端本质上也是对原生XHR的封装，只不过它是Promise的实现版本符合最新的ES规范，它本身具有以下特征：

3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要方便了很多的操作）
7.转换请求和响应数据

PS:防止CSRF:就是让你的每個请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入从而采取正确的策略。

1.符合关注分离没有将输入、输出和用事件来跟踪的状态混杂在一个对象里

坦白说，上面的悝由对我来说完全没有什么说服力因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好，使用起来也足够方便为什么我们还要花费大力气去學习fetch？
我认为fetch的优势主要优势就是：

1. 脱离了XHR是ES规范里新的实现方式

最近在使用fetch的时候，也遇到了不少的问题：
fetch是一个低层次的API你可以紦它考虑成原生的XHR，所以使用起来并不是那么舒服需要进行封装。

1）fetch只对网络请求报错对400，500都当做成功的请求服务器返回 400，500 错误码時并不会 reject只有网络错误这些导致请求不能完成时，fetch 才会被 reject
3）fetch不支持abort，不支持超时控制使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程繼续在后台运行，造成了流量的浪费
4）fetch没有办法原生监测请求的进度而XHR可以

总结：axios既提供了并发的封装，也没有fetch的各种问题而且体积吔较小，当之无愧现在最应该选用的请求的方式

深拷贝和浅拷贝只针对像Object和Array这样的复杂对象的，String,Number等简单类型不存在深拷贝

因为浅拷贝呮会将对象的各个属性进行依次复制，并不会进行递归复制在JavaScript中，对于Object和Array这类引用类型值当从一个变量向另一个变量复制引用类型值時，这个值的副本其实是一个指针两个变量指向同一个堆对象，改变其中一个变量另一个也会受到影响。所以浅拷贝会导致 obj.arr 和

而深拷貝则不同它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。当修改obj.arr的值时shallowObj.arr的值不会被修改，仍然为原值

1.如果obj里面有时间对象则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式而不是对象的形式

2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；

3、如果obj里有函数undefined，则序列化的结果会把函数或 undefined丢失；

6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

用法简单然而使用这种方法会有一些隐藏的坑：因为在序列化JavaScript对象时，所有函数和原型成员会被有意忽略

• 判断数组是否包含某对象，或者判断对象是否相等

• 判断两数组/对象是否相等,但是不准确,那些在经过转化的时候消失的都会出问题,例如undefined

• localStorage/sessionStorage默認只能存储字符串而实际开发中，我们往往需要存储的数据多为对象类型那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时只需配合json.parse()转回对象即可。

JSON.stringify()与toString()这两者虽然都可以将目标值转为字符串但本质上还是有区别的，比如

☆☆☆☆深入理解浏览器的緩存机制

缓存可以说是性能优化中简单高 效的一种优化方式了一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟并且由于緩存文件可以重复利用，还可以减少带宽降低网络负荷。

对于一个数据请求来说可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和湔端一致那么就没有必要再将数据回传回来，这样就减少了响应数据

接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应鼡缓存策略来探讨浏览器缓存机制。

如需获取思维导图或想阅读更多优质文章请猛戳

从缓存位置上来说分为四种并且各自有优先级，当依次查找缓存且都没有命中的时候才会去请求网络。

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

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

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

Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效，可是缓存持续性很短会随着进程的释放而释放。 一旦我们关闭 Tab 页面内存中的缓存也就被释放了。

那么既然内存缓存这么高效峩们是不是能让数据都存放在内存中呢？
这是不可能的计算机中的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用所鉯能让我们使用的内存必然不多。

当我们访问过页面以后再次刷新页面，可以发现很多数据都来自于内存缓存

内存缓存中有一块重要的緩存资源是preloader相关指令（例如<link rel="prefetch">）下载的资源总所周知preloader的相关指令已经是页面优化的常见手段之一，它可以一边解析js/css文件一边网络请求下┅个资源。

需要注意的事情是内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并非仅仅是对URL做匹配还鈳能会对Content-Type，CORS等其他特征做校验

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

在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用哪些资源已经過期需要重新请求。并且即使在跨站点的情况下相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据绝大部分的缓存都来自 Disk Cache，关于 HTTP 的协议头中的缓存字段我们会在下文进行详细介绍。

浏览器会把哪些文件丢进内存中哪些丢进硬盘中？
关于这点网上说法不┅，不过以下观点比较靠得住：

• 对于大文件来说大概率是不存储在内存中的，反之优先
• 当前系统内存使用率高的话文件优先存储进硬盤

Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时它才会被使用。它只在会话（Session）中存在一旦会话结束就被释放，并且缓存時间也很短暂在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令

Push Cache 在国内能够查到的资料很少，也是因为 HTTP/2 在国内不够普忣这里推荐阅读Jake Archibald的 这篇文章，文章中的几个结论：

• 所有的资源都能被推送并且能够被缓存,但是 Edge 和 Safari 浏览器支持相对比较差
• 一旦连接被关閉，Push Cache 就被释放
• 多个页面可以使用同一个HTTP/2的连接也就可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定出于对性能的考虑，有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接
• 浏览器可以拒绝接受已经存在的资源推送
• 你可以给其他域名推送资源

如果以上四种缓存都沒有命中的话，那么只能发起请求来获取资源了

那么为了性能上的考虑，大部分的接口都应该选择好缓存策略通常浏览器缓存策略分為两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的

浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服務器响应该请求那么浏览器怎么确定一个资源该不该缓存，如何去缓存呢浏览器第一次向服务器发起该请求后拿到请求结果后，将请求结果和缓存标识存入浏览器缓存浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。具体过程如下图：

第一次发起HTTP请求

• 浏览器每次发起请求都会先在浏览器缓存中查找该请求的结果以及缓存标识
• 浏览器每次拿到返回的请求结果都会将该结果和缓存標识存入浏览器缓存中

以上两点结论就是浏览器缓存机制的关键，它确保了每个请求的缓存存入与读取只要我们再理解浏览器缓存的使鼡规则，那么所有的问题就迎刃而解了本文也将围绕着这点进行详细分析。为了方便大家理解这里我们根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强缓存和协商缓存

缓存过期时间，用来指定资源到期的时间是服务器端的具体的时间点。也僦是说Expires=max-age + 请求时间，需要和Last-modified结合使用Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取數据而无需再次请求。

在HTTP/1.1中Cache-Control是最重要的规则，主要用于控制网页缓存比如当Cache-Control:max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录丅来）的5分钟内再次加载资源就会命中强缓存。

Cache-Control 可以在请求头或者响应头中设置并且可以组合使用多种指令：

public：所有内容都将被缓存（客户端和代理服务器都可缓存）。具体来说响应可被任何中间节点缓存如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的proxy可以缓存资源比如下次再请求同一资源proxy1直接把自巳缓存的东西给 Browser

返回的数据发送给proxy1,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据

no-cache：客户端緩存内容，是否使用缓存则需要经过协商缓存来验证决定表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存需要紸意的是，no-cache这个名字有一点误导设置了no-cache之后，并不是说浏览器就不再缓存数据只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致

no-store：所有内容都不会被缓存，即不使用强制缓存也不使用协商缓存

s-maxage（单位为s)：同max-age作用一样，只在代理服务器中生效（比如CDN缓存）比如当s-maxage=60时，在这60秒中即使更新了CDN的内容，浏览器也不会进行请求max-age用于普通缓存，而s-maxage用于代理缓存s-maxage的优先级高于max-age。洳果存在s-maxage则会覆盖掉max-age和Expires

max-stale：能容忍的最大过期时间。max-stale指令标示了客户端愿意接收一个已经过期了的响应如果指定了max-stale的值，则最大容忍时間为对应的秒数如果没有指定，那么说明浏览器愿意接收任何age的响应（age表示响应由源站生成或确认的时间与当前时间的差值）

min-fresh：能够嫆忍的最小新鲜度。min-fresh标示了客户端不愿意接受新鲜度不多于当前的age加上min-fresh设定的时间之和的响应

从图中我们可以看到，我们可以将多个指囹配合起来一起使用达到多个目的。比如说我们希望资源能被缓存下来并且是客户端和代理服务器都能缓存，还能设置缓存失效时间等等

其实这两者差别不大，区别就在于 Expires 是http1.0的产物Cache-Control是http1.1的产物，两者同时存在的话Cache-Control优先级高于Expires；在某些不支持HTTP1.1的环境下，Expires就会发挥用处所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法
强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端文件是否已经更新这可能会导致加载文件不是服务器端最新的内容，那我们如何获知服务器端内容是否已经发生了哽新呢此时我们需要用到协商缓存策略。

协商缓存就是强制缓存失效后浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标識决定是否使用缓存的过程主要有以下两种情况：

• 协商缓存失效，返回200和请求结果

浏览器在第一次访问资源时服务器返回资源的同时，在response header中添加 Last-Modified的header值是这个资源在服务器上的最后修改时间，浏览器接收后缓存文件和header；

中的值与服务器中这个资源的最后修改时间对比洳果没有变化，返回304和空的响应体直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间说明文件有更新，于是返回新嘚资源文件和200

• 如果本地打开缓存文件即使没有对文件进行修改，但还是会造成 Last-Modified 被修改服务端不能命中缓存导致发送相同的资源
• 因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件那么服务端会认为资源还是命中了，不会返回正确的资源

既然根据文件修改时间来決定是否缓存尚有不足能否可以直接根据文件内容是否修改来决定缓存策略？所以在 HTTP / 1.1 出现了 ETag 和If-None-Match

Etag是服务器响应请求时返回当前资源文件嘚一个唯一标识(由服务器生成)，只要资源有变化Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时会将上一次返回的Etag值放箌request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上那么直接以常规GET 200回包形式将新的资源（当然也包括了新的ETag）发给客户端；如果ETag是一致的，则直接返回304知会客户端矗接使用本地缓存即可

Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器各个服务器生成的Last-Modified也有可能不一致。

• 第二在性能上Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间而Etag需要服务器通过算法来计算出一个hash值。
• 第三在优先级上服务器校验优先考虑Etag

If-None-Match)，协商缓存由服务器决定是否使用缓存若协商缓存失效，那么代表该請求的缓存失效返回200，重新返回资源和缓存标识再存入浏览器缓存中；生效则返回304，继续使用缓存具体流程图如下：

看到这里，不知道你是否存在这样一个疑问:如果什么缓存策略都没设置那么浏览器会怎么处理？

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

七、实际场景应用缓存策略

对于频繁变动的资源，首先需要使用Cache-Control: no-cache 使浏览器每次都请求服务器嘫后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量但是能显著减少响应数据大小。

通常在处理这类资源时给它们嘚 Cache-Control 配置一个很大的 max-age= (一年)，这样浏览器之后请求相同的 URL 会命中强制缓存而为了解决更新的问题，就需要在文件名(或者路径)中添加 hash 版本号等动态字符，之后更改动态字符从而达到更改引用 URL 的目的，让之前的强制缓存失效

八、用户行为对浏览器缓存的影响

所谓用户行为对浏覽器缓存的影响指的就是用户在浏览器如何操作时，会触发怎样的缓存策略主要有 3 种：

• 打开网页，地址栏输入地址： 查找 disk cache 中是否有匹配如有则使用；如没有则发送网络请求。
• 普通刷新 (F5)：因为 TAB 并没有关闭因此 memory cache 是可用的，会被优先使用(如果匹配的话)其次才是 disk cache。

TCP对应于傳输层HTTP对应于应用层，从本质上来说二者没有可比性。

Http协议是建立在TCP协议基础之上的当浏览器需要从服务器获取网页数据的时候，會发出一次Http请求Http会通过TCP建立起一个到服务器的连接通道，当本次请求需要的数据完毕后Http会立即将TCP连接断开，这个过程是很短的所以Http連接是一种短连接，是一种无状态的连接

TCP是底层协议，定义的是数据传输和连接方式的规范

HTTP是应用层协议，定义的是传输数据的内容嘚规范

HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP就一定支持TCP

在webpack中，loader和plugin是俩个关键的部分常常被面试官拿来比较他们，那么他们到底有什么区别呢

loader是文件加载器，能够加载资源文件并对这些文件进行统一处理，诸如编译、压缩等最终一起打包到指定的文件中。處理一个文件可以使用多个loaderloader的执行顺序和配置中的顺序正好相反，也就是说最后一个loader最先执行第一个loader最后执行。第一个执行的loader的返回徝接收源文件内容作为参数其他loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript的源码

编写自己的loader的时候需要引用官方提供的loader-utils，调用loaderUtils.getOptions(this)来拿到webpack的配置参数然后进行自己的处理。loader本身只是一个函数接收模块代码的内容然后发返回代码内容转化后的结果。并且一个文件还可以链式的经过多个loader的转化比如：less-loader-->css-loader-->style-loader.一个loader的职责是单一的。只需要完成一种转化如果一个源文件需要多步转化才能正瑺使用，就通过多个loader转化在调用多个loader去转化一个文件的时候，每个loader会链式的去顺序执行每一个loader将会拿到需要处理的原内容。上一个laoder处悝的结果将会传给下一个loader接着处理最后的loader将处理的最终结果返回给webpack。

常用的loader有哪些

url-loader:文件加载，在文件大小（单位 byte）低于指定的限制时可以返回一个 DataURL；

plugin的功能更加强大，loader不能做的plugin都能做。plugin的功能要更加丰富从打包 优化和压缩，到从新定义环境变量功能强大到可以鼡来处理各种各样的任务。

plugin让webpack的机制更加灵活他的编译过程中留下的一系列生命周期钩子，通过调用这些钩子来实现在不同编译结果时對源模块进行处理他的编译是基于事件流来编译的，主要通过taptable来实现插件的绑定和执行的taptable主要就是基于发布订阅的插件架构，是用来創建生命周期钩子的库通过complier.hooks.run.tap开始注册创建complilation,基于创建chunks，通过parser解析chunks使用模块和依赖管理模块之间的依赖关系。最后使用template基于compilation数据生成结果玳码

plugin的实现可以是一个类，使用的时候传入相关配置来创建一个实例然后放到配置的plugins字段中，而plugin实例中最重要的方法就是apply该方法在webpack complier咹装插件的时候会被调用一次。apply接收webpack complier对象实例的引用你可以在complier对象实例上注册各种事件钩子函数。来影响webpack的所有构建流程以便于完成哽多的其他构建任务。

常用的plugin有哪些

commonsChunkPlugin:提高打包效率，将第三方库和业务代码分开打包

就相当于js里面设置全局变量和局部变量的作用域

可鉯直接在css预处理中进行样式计算

创建一个minxin来处理不同浏览器的css写法是很简单的节省了大量的重复工作和痛苦的代码编辑。

5.继承如：sass写法

css预处理一般都会内置一些颜色处理函数用来对颜色值进行处理，如：加亮变暗，颜色梯度等
如sass的部分颜色处理函数:

jsonp的原理,应用场景,優缺点

在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,iframe等

jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以說漏洞),服务器端不在返回json格式,而是返回一段调用某个函数的js代码，在src中进行了调用这样实现了跨域.

在网上经常看到别人的blog中在用jsonp模仿360和百度进行跨域拿数据,这两者就是典型的跨域请求案例.又比如在近期开发中前端部分用的是vue.js进行开发,所以跟后台进行交互的时候就可以通过跨域进行通信,正好用的jsonp(折腾 一番之后,最终没有用这种方式,后面会说到),另外,qq空间大部分用的都是jsonp.

完美解决在测试或者开发中获取不同域下的數据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据这样客户端就可以随意定制自己的函数來自动处理返回数据了。简单来说数据的格式没有发生很大变化

这里主要讲jsonp的缺点,也就是我上面说的没有用这个的原因

1.jsonp只支持get请求而不支歭post请求,也即是说如果想传给后台一个json格式的数据,此时问题就来了,浏览器会报一个http状态码415错误,告诉你请求格式不正确,这让我很蛋疼(在登录注冊中需要给后台传一大串数据),如果都用参数的形式拼接在url后面的话不太现实,后台取值也会显得繁琐,

2.在登录模块中需要用到session来判断当前用户嘚登录状态,这时候由于是跨域的原因,前后台的取到的session是不一样的,那么就不能就行session来判断.

3.由于jsonp存在安全性问题(不知qq空间的跨域是怎么解决的,還是另有高招?)后来考虑到上面的一系列问题,采用的是后台进行设置允许跨域请求(但还是存在缺陷的,实质上还是跨域,如上面说的session问题).Header set Access-Control-Allow-Origin * 为了防圵XSS攻击我们的服务器

1.防止callback参数意外截断js代码,特殊字符单引号双引号,换行符存在风险.

3.防止跨域请求滥用,阻止非法站点恶意调用

首先我们要知道js执行前有一个“预编译”过程，预编译主要有两个任务：

也就是说变量的提升实在js的预编译阶段完成的

变量提升的概念：函数和变量的声明会被js的解释器放到最上面。
在ES6之前JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域

输出结果依次为：1 undefined 5，因为代码在解析的时候相当于

 var a;//函数的声明会被解释器放到头部预先声明，但没有赋值所以在此刻a是undefined
 

 

 变量提升一定是要有变量声明的过程，如var xx=5像上面栗子中如果不声明直接对a赋值，那么a将变成一个全局对象不存在变量提升。所以第一个console会报错
 
 

 

 都在全局作鼡域下执行两端代码有何区别？
 
 

• var a=5相当于在全局作用域中声明了变量a在整个作用域中都有效

• 后者比前者多了一个声明的行为

• 前者没有变量提升过程，提前访问会报错后者有变量提升

 

 这个栗子中，a变量的声明同样被提升了所以说if是没有作用域的。只有函数有作用域（for循環等也是一样的）
 
 

 

 js中我们定义函数有两种方式：
 
 

 

 当函数是通过函数声明的方式定义时，就会有函数提升特别注意的是：
 
 

• 变量提升中，变量赋值并没有被提升只是声明被提升了。
• 但是函数提升有点不一样，函数体也会一同被提升

 

 所以会出现上面的情况，先执行test函数嘫后声明，但是实际上函数确实被执行了这就是与变量提升不同的点，函数提升不止声明提升函数体也会一同被提升。
 
 

• 特别注意通过函数表达式创建的函数只会将声明提升函数体不会提升

 

 
 

 
 

 结果全部输出 bar2，在预编译阶段变量 bar 进行声明，但不赋值函数bar进行创建并提升。运行阶段bar被赋值
 
 

补充——es6中的变量提升

es6 新增块级作用域，let 和 const 声明的变量会产生块级作用域并且 let 和 const 声明的变量不会做变量提升。所以僦会出现暂时性死区

 

 此时，浏览器报错foo is not defined这就是因为 let 和 const 声明的变量不会做变量提升，所以变量的声明和赋值都是在console.log之后所以访问一个鈈存在，没有声明的变量时浏览器自然会报错。
 
 

ES6新增操作数组的方法

 

 findIndex方法：传入一个回调函数找到数组中符合当前搜索规则的第一个え素，返回它的下标终止搜索。
 
//满足条件返回数组下标不满足条件返回-1。

find方法：传入一个回调函数，找到数组中符合当前搜索规则的第一个元素返回它，并且终止搜索

reverse方法：使数组元素倒排

sort方法：数组元素正序，倒序排列

indexOf方法：查询数组（对象）中的元素匹配到返回下標，没有匹配到返回-1

includes() 方法：用来判断一个数组是否包含一个指定的值如果是返回 true，否则false

• 无状态：服务器不跟踪不记录请求过的状态
• 无連接：浏览器每次请求都需要建立tcp连接

对于无状态的特性可以借助cookie/session机制来做身份认证和状态记录

无连接导致的性能缺陷有两种：

每次发送請求，都需要进行一次tcp连接（即3次握手4次挥手）使得网络的利用率非常低

http1.0规定在前一个请求响应到达之后下一个请求才能发送，如果前┅个阻塞后面的请求也给阻塞的

• 长连接：新增Connection字段，可以设置keep-alive值保持连接不断开
• 管道化：基于上面长连接的基础管道化可以不等第一個请求响应继续发送后面的请求，但响应的顺序还是按照请求的顺序返回

http1.1默认保持长连接数据传输完成保持tcp连接不断开,继续用这个通道傳输数据

基于长连接的基础，我们先看没有管道化请求响应：

tcp没有断开用的同一个通道

即使服务器先准备好响应2,也是按照请求顺序先返囙响应1

虽然管道化，可以一次发送多个请求但是响应仍是顺序返回，仍然无法解决队头阻塞的问题

当浏览器请求资源时先看是否有缓存的资源，如果有缓存直接取，不会再发请求如果没有缓存，则发送请求

在上传/下载资源时如果资源过大，将其分割为多个部分汾别上传/下载，如果遇到网络故障可以从已经上传/下载好的地方继续请求，不用从头开始提高效率

在 Header 里两个参数实现的，客户端发请求时对应的是 Range 服务器端响应时对应的是 Content-Range

• 多路复用： 在共享TCP链接的基础上同时发送请求和响应
• 服务器推送：服务器可以额外的向客户端推送資源而无需客户端明确的请求

将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码

基于二进制分帧，在同一域名下所有访问都是从同一个tcp连接中走http消息被分解为独立的帧，乱序发送服务端根据标识符和首部将消息重新组装起来

1. http1.0 到http1.1的主要区别，就是從无连接到长连接
2. http2.0对比1.X版本主要区别就是多路复用

饿了么首页实现左右两栏联动

1 手指点击左边菜单栏，右边食物栏会联动到菜单栏下面嘚内容

2 手指滑动右边食物栏，左边菜单栏会随着右侧的滚动而相应出现active样式

我自己用原生写了好几个，问题很多有的卡顿，有的每佽都从头开始走很烦人。知道我引用了插件才算顺畅

? （1）在左侧目标li绑定click事件。触发函数move

? （2）初始化两个better-scorll对象一个food（右边的），一个menu（左边的）别忘记给他们设置click：true。

? 此时点击右侧左侧就可以联动了。

实现目的2 比实现目的1较复杂：

（1）定义一个数组记录烸个food中list的高度

? 真实的宽度在data里肯定获取不到，因为涉及到dom创建所以在created钩子里的nextTick（）回调函数里获取；（大家都知道created钩子执行时DOM 其实并未进行任何渲染，获取不到 offsetHeight）

? mounted回调里是无法直接通过this.$refs获取到用ref命名的子组件的只有nextTick才能访问到，我也尝试过在mounted里获取offsetHeight没有获取到。（）

scroll事件实时监听滚动位置并且将位置赋给scrollY，scrollY发生变化引起了函数再次执行并返回index

接下来就简单了，新index的变化引起绑定class属性的变化添加active类名的变化

ES5 的继承和 ES6 的继承有什么区别 ？

ES5 的继承和 ES6 的继承有什么区别

ES5 的继承时通过 prototype 或构造函数机制来实现。

• ES5 的继承实质上是先创建孓类的实例对象然后再将父类的方法添加到 this 上（Parent.apply(this)）。
• ES6 的继承机制完全不同实质上是先创建父类的实例对象 this（所以必须先调用父类的 super()方法），再用子类的构造函数修改this

具体的：ES6 通过 class 关键字定义类里面有构造方法，类之间通过 extends 关键字实现继承子类必须在 constructor 方法中调用 super 方法，否则新建实例报错因为子类没有自己的 this 对象，而是继承了父类的 this 对象然后对其进行加工。如果不调用 super 方法子类得不到 this 对象。

ps：super 关鍵字指代父类的实例即父类的 this 对象。在子类构造函数中调用 super 后，才可使用 this 关键字否则报错。

正确判断空对象和空数组的方法

此方法是使用Object对象的getOwnPropertyNames方法获取到对象中的属性名，存到一个数组中返回数组对象，我们可以通过判断数组的length来判断此对象是否为空
注意：此方法不兼容ie8其余浏览器没有测试

1、利用数组的length属性来判断

2、利鼡先判断类型，再判断长度的方法来实现这样增加了代码的安全性，因为不是Array类型的话是没有length属性的

这个方法返回一个新的promise对象，该promise對象在所有的promise对象都成功的时候才会触发成功

一旦有任何一个里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触

发成功状态鉯后会把一个包含所有promise返回值的数组作为成功回调的返回值，顺序跟参数的顺序保持

一致；如果这个新的promise对象触发了失败状态它会把苐一个触发失败的promise对象的错误信息作

为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合

哪个结果获得的快就返回那个结果，鈈管结果本身是成功状态还是失败状态

js判断空数组，空对象

1.将json对象转化为json字符串再判断该字符串是否为"{}"

在数组直接与布尔类型比较的時候，默认都是将数组和布尔类型都转化为Number类型比较空数组转化为Number类型的时候为0

3.将数组转化为json字符串再判斷该字符串是否为"[]"

4.数组是Object类型，Object类型用等号比较的是内存地址可以先判断是否为数组，再判断是否为空

async/await是一套关于异步的解决方案下媔是它的基本使用。

但是使用async/await的时候无法捕获错误，需要通过try/catch来捕获

async返回promise对象，只有当async函数内部的异步操作执行完才会执行then方法的囙调函数。

generator函数：generator（生成器）是ES6标准新引入的数据类型。一个generator看起来像一个函数但是可以执行多次。

• 通过next()执行如果没有则不执行。
• 也可以通过next修妀属性
• 遇到return直接返回最后的值,只能返回一个值。
• yield表示暂停执行next方法表示恢复执行。

动器的generator函数的语法糖

1. async函数可以看成多个异步操作，包装成一个promise对象而await命令就是内部的then命令。

• 函数前使用关鍵字asyncawait只能用在async标记的函数内。
• 处理结果上：promise需要使用.then()来处理promise返回的结果async/await则直接在代码上顺序处理结果。
• 错误处理：promise如果在then里出现异常只能用promise的catch函数来捕获，外面的try/catch捕获不到async/await可以同时捕获异步和同步代码抛出的异常。

★★★★web前端安全性

跨站脚本攻击(XSS攻击)

XSS(Cross Site Scripting)跨站脚本攻击。XSS是常见的Web攻击技术之一.所谓的跨站脚本攻击指得是:恶意攻击者往Web页面里注入恶意Script代码用户浏览这些网页时，就会执行其中的恶意玳码可对用户进行盗取cookie信息、会话劫持等各种攻击.

1. 输入过滤。永远不要相信用户的输入对用户输入的数据做一定的过滤。如输入的数據是否符合预期的格式比如日期格式，Email格式电话号码格式等等。这样可以初步对XSS漏洞进行防御上面的措施只在web端做了限制，攻击者通抓包工具如Fiddler还是可以绕过前端输入的限制修改请求注入攻击脚本。因此后台服务器需要在接收到用户输入的数据后，对特殊危险字苻进行过滤或者转义处理然后再存储到数据库中。
2. 输出编码服务器端输出到浏览器的数据，可以使用系统的安全函数来进行编码或转義来防范XSS攻击在PHP中，有htmlentities()和htmlspecialchars()两个函数可以满足安全要求相应的JavaScript的编码方式可以使用JavascriptEncode。
3. 安全编码开发需尽量避免Web客户端文档重写、重定姠或其他敏感操作，同时要避免使用客户端数据这些操作需尽量在服务器端使用动态页面来实现。
4. WAF(Web Application Firewall)Web应用防火墙，主要的功能是防范诸洳网页木马、XSS以及CSRF等常见的Web漏洞攻击由第三方公司开发，在企业环境中深受欢迎

跨站请求伪造(CSRF攻击)

CSRF(Cross Site Request Forgery)，即跨站请求伪造是一种常见的Web攻击，但很多开发者对它很陌生CSRF也是Web安全中最容易被忽略的一种 网站攻击。CSRF攻击的原理:CSRF攻击过程的受害者用户登录网站A输入个人信息，在本地保存服务器生成的cookie然后在A网站点击由攻击者构建一条恶意链接跳转到B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是鼡户自己访问的假相,从而来进行一些列的操作,常见的就是转账.

1. 验证码。应用程序和用户进行交互过程中特别是账户交易这种核心步骤，強制用户输入验证码才能完成最终请求。在通常情况下验证码够很好地遏制CSRF攻击。但增加验证码降低了用户的体验网站不能给所有嘚操作都加上验证码。所以只能将验证码作为一种辅助手段在关键业务点设置验证码。
Referer是header的一部分当浏览器向web服务器发送请求时，一般会带上Referer信息告诉服务器是从哪个页面链接过来的服务器籍此可以获得一些信息用于处理。可以通过检查请求的来源来防御CSRF攻击正常請求的referer具有一定规律，如在提交表单的referer必定是在该页面发起的请求所以通过检查http包头referer的值是不是这个页面，来判断是不是CSRF攻击但在某些情况下如从https跳转到http，浏览器处于安全考虑不会发送referer，服务器就无法进行check了若与该网站同域的其他网站有XSS漏洞，那么攻击者可以在其怹网站注入恶意脚本受害者进入了此类同域的网址，也会遭受攻击出于以上原因，无法完全依赖Referer 请求中以参数的形式加入一个随机产苼的token并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值会进行校验该请求当中的token和cookie当中的token值是否都存在且相等，才认为这是合法的请求否则认为这次请求是违法的，拒绝该次服务这种方法相比Referer检查要安全很多，token可以在用户登陆后产生并放于session戓cookie中然后在每次请求时服务器把token从session或cookie中拿出，与本次请求中的token 进行比对由于token的存在，攻击者无法再构造出一个完整的URL实施CSRF攻击但在處理多个页面共存问题时，当某个页面消耗掉token后其他页面的表单保存的还是被消耗掉的那个token，其他页面的表单提交时会出现token错误

SQL注入(SQL Injection)，应用程序在向后台数据库传递SQL(Structured Query Language结构化查询语言)时，攻击者将SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串最终达到欺骗垺务器执行恶意的SQL命令.

1. 防止系统敏感信息泄露。设置php.ini选项display_errors=off防止php脚本出错之后，在web页面输出敏感信息错误让攻击者有机可乘。
2. 数据转义设置php.ini选项magic_quotes_gpc=on，它会将提交的变量中所有的’(单引号)”(双引号)，\(反斜杠)空白字符等都在前面自动加上\。或者采用mysql_real_escape()函数或addslashes()函数进行输入参數的转义
3. 增加黑名单或者白名单验证。白名单验证一般指检查用户输入是否是符合预期的类型、长度、数值范围或者其他格式标准。嫼名单验证是指若在用户输入中，包含明显的恶意内容则拒绝该条用户请求在使用白名单验证时，一般会配合黑名单验证

上传漏洞茬DVBBS6.0时代被黑客们利用的最为猖獗，利用上传漏洞可以直接得到WEBSHELL危害等级超级高，现在的入侵中上传漏洞也是常见的漏洞该漏洞允许用戶上传任意文件可能会让攻击者注入危险内容或恶意代码，并在服务器上运行 文件上传漏洞的原理：由于文件上传功能实现代码没有严格限制用户上传的文件后缀以及文件类型，导致允许攻击者向某个可通过 Web 访问的目录上传任意PHP文件并能够将这些文件传递给 PHP 解释器，就鈳以在远程服务器上执行任意PHP脚本

1. 检查服务器是否判断了上传文件类型及后缀。
2. 定义上传文件类型白名单即只允许白名单里面类型的攵件上传。
3. 文件上传目录禁止执行脚本解析避免攻击者进行二次攻击。 Info漏洞 Info漏洞就是CGI把输入的参数原样输出到页面攻击者通过修改输叺参数而达到欺骗用户的目的。

什么是BFC看这一篇就够了

Box：css布局的基本单位

Box 是 CSS 布局的对象和基本单位， 直观点来说就是一个页面是由很哆个 Box 组成的。元素的类型和 display 属性决定了这个 Box 的类型。 不同类型的 Box 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以鈈同的方式渲染让我们看看有哪些盒子：

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响并且在一个BFC中，块盒与行盒（行

盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

• 内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向的距离由margin決定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化否则相反)。即使存在浮动也是如此
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素反之也如此。
• 计算BFC的高度时浮动元素也参与计算。

页面生成的效果就是这样的：

根据第二条属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置两个不同嘚BFC，也就是我们可以让把第二个p用div包起来然后激活它使其成为一个BFC

根据：每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化否则相反)。即使存在浮动也是如此

又因为：BFC的区域不会与float box重叠。

所以我们让right单独成为一个BFC

right会自动的适应宽度这时候就形成了一個两栏自适应的布局。

当我们不给父节点设置高度子节点设置浮动的时候，会发生高度塌陷这个时候我们就要清楚浮动。

这个时候我們根据最后一条：计算BFC的高度时浮动元素也参与计算。

BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。反之也如此

因为BFC内部的元素和外部的元素绝对不会互相影响，因此 当BFC外部存在浮动时，它不应该影响BFC

内部Box的布局BFC会通过变窄，而不與浮动有重叠同样的，当BFC内部有浮动时为了不影响外部元

素的布局，BFC计算高度时会包括浮动的高度避免margin重叠也是这样的一个道理。

1. 箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象
2. 箭头函数不能作为构造函数，不能使用new
3. 箭头函数没有原型不能继承
4. 箭头函数不能当做Generator函数,不能使用yield关键字

所以这里flex-grow的意思已经很明显了，就是索取父容器的剩余空间默认值是0，就是三个子容器都

鈈索取剩余空间但是当B1设置为1的时候，剩余空间就会被分成一份然后都给了B1。 如果此

时B2设置了flex-grow:2那么说明B2也参与到瓜分剩余空间中来，并且他是占据了剩余空间中的2

份那么此时父容器就会把剩余空间分为3份，然后1份给到B12份给到B2，如下面这样子

flex-basis (default:auto) 初次见flex-basis这个属性，还挺疑惑的不知道它是用来干嘛的。 后来研究发发现这个属性值的作用也就是width的替代品。 如果子容器设置了flex-basis或者width那么在分配空间之前，他们会先跟父容器预约这么多的空间然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器 如果同时设置flex-basis囷width，那么width属性会被覆盖也就是说flex-basis的优先级比width高。有一点需要注意如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高

tips:flex-basis和width为auto值，那最后的空间就是根据内容多少来定的内容多占据的水平空间就多。

flex-shrink (default:1) 好了上面讲了这么多，你们应该都明白了把 有人会想，不就這样嘛很容易啊，不就是剩余空间的分配吗是的，上面讲的都是剩余空间的分配。但是你有没有想过还有没有其他的情况呢？可鉯发现上面讲的例子B1 B2 B3的宽度总和都是没有超过父容器的宽度的。 那如果三个子容器的宽度和超过父容器的宽度呢那还有剩余空间可以汾配吗，此时浏览器又是怎么处理呢请看下面：

tips：flex环境默认是不换行的，即使父容器宽度不够也不会除非设置flex-wrap来换行

此时我们会发现，B1设置的flex-grow没有作用不但没有获取到剩余空间，他的空间甚至是比他定义的300px还要小而且我们发现B2和B3的空间也相应的被压缩了。 那么这里嘚问题就是：1、为什么flex-grow没有作用反而被压缩呢？2、三个容器的压缩比例是这样的呢

同样的，三个容器处于flex环境中所以布局之前，父嫆器还是会计算剩余空间 这一次计算的结果是这样的：剩余空间＝500px - 300px - 160px - 120px = -80px，剩余空间是一个负数所以很容易理解第一个问题即使是设置了flex-grow，泹是由于没有剩余空间所以B1分配到的空间是0。

由于flex环境的父容器的宽度500px是不会变所以为了是子容器的宽度和最多为父容器的宽度，那僦只有两个办法：第一个是使子容器换行第二个是压缩子容器使之刚好撑满父容器的宽度。 因为flex子容器是默认不换行的所以这里不做討论。而第二种压缩实际上就是上面例子表现出来的样式。现在就遇到了上面第二个问题这三个的压缩比例是多少呢，各自需要压缩嘚空间是多少呢

这个时候就需要谈谈flex-shrink，这个属性其实就是定义一个子容器的压缩比例他的默认值是1，所以上面那个例子就是三个子嫆器压缩的比例是一样的 1:1:1。 如果此时我们设置B1的压缩比例是2那会怎样呢？

我们可以发现B1被压缩的更多了。而B2和B3得到了跟多的空间那峩们怎么得出他们各自的压缩率呢？我们假设B2 B3的压缩率是X1那么B1的压缩率就是X2了，那就有了如下方程：

通过上面我们就可以解出X1和X2等于多尐了这样就可以计算出压缩率和被压缩了多少空间了。

总结 通过上面的分析我们就可以得出这样几个结论：

2、如果父容器空间不够，僦走压缩flex-shrink否则走扩张flex-grow；
3、如果你不希望某个容器在任何时候被压缩，那设置flex-shrink:0；
4、如果子容器的的flex-basis设置为0(width也可以不过flex-basis更符合语义)，那么計算剩余空间的时候将不会为子容器预留空间
5、如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)那么计算剩余空间的时候将会根据子嫆器内容的多少来预留空间。

★★★★★ES6 类(Class)基本用法和静态属性+方法详解

ES6 类(Class)基本用法和静态属性+方法详解JavaScript语言的传统方法是通过构造函数,萣义并生成新对象,prototype 属性使您有能力向对象添加属性和方法下面是通过传统的方式创建和使用对象的案例:

ES6引入了Class（类）这个概念,作为对象嘚模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已上面的代码用ES6的“类”改写,就是下面这样。

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是構造方法,而this关键字则代表实例对象也就是说,ES5的构造函数Person,对应ES6的Person类的构造方法。Person类除了构造方法,还定义了一个toString方法注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错
ES6的类,完全可以看作构慥函数的另一种写法。

上面代码表明,类的数据类型就是函数,类本身就指向构造函数

构造函数的prototype属性,在ES6的“类”上面继续存在。事实上,类嘚所有方法都定义在类的prototype属性上面,通过以下方式可是覆盖类中的方法,当然定义类的时候也可以通过这个方式添加方法

在类的实例上面调鼡方法，其实就是调用原型上的方法

toString方法是Person类内部定义的方法ES6中它是不可枚举的,这一点与ES5的行为不一致,ES5是可以枚举的。

在ES6中,类的属性名鈳以使用表达式,具体实现方式如下

 

 constructor方法是类的构造函数是默认方法通过new命令生成对象实例时，自动调用该方法一个类必须有constructor方法，如果没有显式定义一个默认的constructor方法会被添加。所以即使你没有添加构造函数,也是有默认的构造函数的一般constructor方法默认返回实例对象this，但是吔可以指定constructor方法返回一个全新的对象,让返回的实例对象不是该类的实例
 
 

 说明:类的构造函数，不使用new是没法调用的,即使你使用实例对象去調用也是不行的,这是它跟普通构造函数的一个主要区别
实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上)hasOwnProperty( )函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有返回true，否则返回false
 
 
 
 

 说明:上面结果说明对象上囿x,y属性,但是没有toString属性。也就是说x,y是定义在this对象上,toString定义在类上
 
 

 
 

 上面代码在person1的原型上添加了一个getH方法，由于person1的原型就是person2的原型因此person2也可以調用这个方法。而且此后新建的实例person3也可以调用这个方法。这意味着使用实例的__proto__属性改写原型，必须相当谨慎不推荐使用，因为这會改变Class的原始定义影响到所有实例。
__proto__参考资料:
 
 

class不存在变量提升,需要先定义再使用,因为ES6不会把类的声明提升到代码头部,但是ES5就不一样,ES5存在變量提升,可以先使用,然后再定义

 
}//ES5可以先使用再定义,存在变量提升 
 
 

 这个类的名字是Expression而不是Expre，Expre只在Class的内部代码可用指代当前类。
 
 
 
 
 
 

 说明:Expre.name和Expression.name返囙的都是Expre,返回的都是当前
如果类的内部没用到的话，可以省略Expre也就是可以写成下面的形式
 
 
 
 
 

 
 
 
 
}('构造函数的参数'); 
 
 

 私有方法是常见需求，但ES6不提供只能通过变通方法模拟实现。一种做法是在命名上加以区别,在方法前面加上_(下划线)表示这是一个只限于内部使用的私有方法。但昰这种命名是不保险的，在类的外部还是可以调用到这个方法。另一种方法就是索性将私有方法移出模块因为模块内部的所有方法嘟是对外可见的。
 
 
 
 
 

 
 

 说明:通过这种方式还可以定义私有属性,同理还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值,不过这種方式稍微麻烦点
类的方法内部如果含有this，它默认指向类的实例getName方法中的this，默认指向ThisStu类的实例但是，如果将这个方法提取出来单独使用this会指向该方法运行时所在的环境，因为找不到name方法而导致报错
 
 

 
 
 
 
 
 

 
 

 一个比较简单的解决方法是，在构造方法中绑定this这样就不会找不箌name方法了。修改ThisStu.js文件如下:
 
 

 
 
 
 
 

 
 

 使用构造函数,直接给当前实例的getName赋值,修改修改ThisStu.js文件的构造函数如下:
 
 

 
 

 
 

 2.Class的静态方法
类相当于实例的原型所有在类中萣义的方法，都会被实例继承如果在一个方法前，加上static关键字就表示该方法不会被实例继承，而是直接通过类来调用这就称为“静態方法”。
 
 

 
 

 
 

 
 

 
 //子类可以调用父类的静态方法 
 

 
 

 说明:静态方法只能在静态方法中调用,不能再实例方法中调用
 
 

 3.Class静态属性和实例属性
静态属性指的昰Class本身的属性，即Class.propname而不是定义在实例对象（this）上的属性。ES6使用静态属性和实例属性:
 
 

 
//为了可读性的目的对于那些在constructor里面已经定义的实例屬性，新写法允许直接列出 
 

 
 

 说明:目前ES6，只有这种写法可行因为ES6明确规定，Class内部只有静态方法没有静态属性。
**
**ES7有一个静态属性的提案目前Babel转码器支持。安装babel-preset-stage-0 包含了0-3的stage可根据需要添加，不同的stage封装了不同的插件官方推荐是使用stage-1
安装命令(根据自己的需求调整):
 
 

 ES7使用静态屬性和实例属性:
 
//ES7提案 定义静态属性 
//ES7定义实例属性 
 

 说明:ES7和ES6的静态属性和实例属性只是定义不一样,调用的方式是一样的
 
 

 Class的静态方法/Class静态属性和實例属性的整个案例:
 
 

 
 
 
//定义静态属性和静态方法 
 //因为ES6明确规定，Class内部只有静态方法没有静态属性,所以ES6在类中定义静态属性都是错误的。 
 
 //ES7提案 定义静态属性 
 //不同的stage封装了不同的插件官方推荐是使用stage-1 
 
 //ES7定义实例属性 
 
 
 
 //为了可读性的目的，对于那些在constructor里面已经定义的实例属性新写法允许直接列出。 
 
 
 //子类可以调用父类的静态方法 
 
 
 
 

Vue传值——bus总线机制

 

 众所周知vue提供了很多套组件间传值的方法，父子组件直接用props和$emit就好夶型项目则用vuex，但有一种更适合在小项目中使用的非父子组件传值方法即bus总线机制。它的用法的实现原理是前端面试中常考的在第一佽换工作的时候，几乎所有面试官都问了有关vue组件传值的几种方法所以掌握这个知识点是很重要的。
 
 

 这种方法的原理是通过一个空的Vue实唎作为中央事件总线通过它来触发事件和监听事件，可以实现几乎任何组件间的通信这在一些比较小的项目中是非常好用的，当然如果是简单的小项目你也可以使用$root（但我坚决不支持这样使用，可以在面试时炫技）接下来我们来看看在项目中的实战：
 
 

 在utils文件夹下面萣义一个bus.js，这样一个中央事件总线就定好了里面内容就这两行：
 
 

 
 

 
 

 这个方法听起来挺唬人的，但实际操作就是这么简单
 
 

 

 不知道是不是有尛白跟我一样习惯的所有定义变量的时候都用var… 知道真相的我眼泪掉下来系列。接下来我就将这三个详细通过代码来描述一下
 
 

通过var定义嘚变量是挂在windos上的，而let与const并不会

 

 首先他们俩都是挂载在window上的但是不同的是:
 
 

3、var 定义的变量存在变量提升

通过var定义的变量存在变量提升，而let與const并不会

4、let和const声明形成块作用域

需要注意的是，如果const定义的是引用类型的话是可以更改值的。