为期两月的面试整理

箭头函数与普通函数的区别

箭头函数的this是由箭头函数的外部函数决定的

箭头函数不能作为构造函数，因为箭头函数的原型链在他这就断了，他没有prototype属性，没有办法链接他的实例的原型链

箭头函数没有arguments参数，通过剩余参数语法获取到全部参数

可通过排除参数(...args)=>{

console.log(args)

}
Promise async和await

Promise状态只改变一次

Promise().then()返回一个新的期约示例。如果有返回,链式调用中then的参数为上一个then的返回值。更准确的理解是，then()的返回值会被Promise.resolve()包装，而接下来的链式then()的参数会取上一个resolve包装的。

Promise.then()，.catch()，.finally()

Promise.all()，

三种返回

1、所有resolve的数组。

2、有一个rejected,则返回第一个reject(),后续的reject会被静默处理。

3、有一个待定，则返回待定。有reject和pending则返回reject

Promise.race() 对第一个状态改变的Promise进行处理，无论是哪个Promise 出现resolve或reject状态

async await

async 返回Promise

await是暂停当前等待其他完成在执行
js继承

1.原型链继承
```
function Person(name,age){
    this.name = name || '默认';
    this.age = age || '默认';
}
function Black(){
    this.type = 'Black';
}
Black.prototype = new Person()
```
可影响原型对象的所有后代

缺点：

无法实现多继承

创建子类的实例时，无法向父类的构造函数传参

来自原型对象的所有属性被后代共享

2. 构造继承
```
function Black(name,age){
    new Person().call(this,name,age);
    this.type = 'Black'
}
```
特点：

可以在子类创建时，向父类构造函数传参

子类实例就是子类实例

父类构造函数原型的改变不会影响子类

可以实现多继承

缺点：

不继承父类的原型属性

无法实现跨级继承

3.实例继承
```
function Black(){
    let instance = new Person();
    instance.type = 'Black';
    return instance
}
```
特点：

在父类实例上创建属性

缺点：不支持多继承

4.拷贝继承？（我的理解这不算是继承，只能算是将其父类属性拷贝给子类）
```
function Black(){
    let instance = new Person();
    for(let key in instance){
        Black.prototype[key] = instance[key];
    }
    this.type = 'Black';
}
```
事件循环机制（Event Loop）

无论是哪种说法，都在问一个问题，js是如何运行的

先确定，js是单线程的。

再确定，js先执行同步任务，再执行异步任务。

然后梳理，单线程，意味着，无论有多少要处理的任务，无论时间长短，在前面任务未执行完，后面的任务都要等待其执行完毕。

setTimeout就说明了这个问题

setTimeout(fn,0)这个0不意味着立即执行，他会等待他前面的任务执行完，才会执行。
js事件阶段和事件委托

事件阶段可以理解为两个也可以理解为三个。看怎么好理解

捕获阶段

从html逐级向下，直到找到目标元素

目标阶段（可选）

在目标元素上触发

冒泡阶段

从目标元素逐级向上，直到html，或遇到冒泡阻止函数。e.stopPropagation()
js垃圾回收机制
标记引用，如果引用不到则删除，从根开始标记
双等于‘==’引出的一系列违反常理的情况
== 先转换为同类型，再判断

二、vue部分

vue插件、指令、组件和过滤器

一、插件：

1.创建js文件，一般命名为vue-插件名.js

2.定义插件内的install方法，第一个参数为vue对象，第二个参数为可选的选项对象。内部可自定义指令，方法属性等。

(function(){
    var MyPlugin = {};
    MyPlugin.install = function(Vue,options){
        Vue.MyGlobalMethod = function(){
            //...逻辑
            console.log('注册全局属性或方法')
        }
        Vue.directive('my-direct'，function(el, bind, vNode, oldNode){
            //...逻辑
            console.log('定义 自定义指令')
        });
        Vue.mixin({
            create(){
                //...逻辑
                console.log('定义全局组件')
            }
        })
        Vue.property.$method = function(methodOptions){
            //...逻辑
            console.log('定义实例方法')
        }
    }
    window.MyPlugin = MyPlugin;
});

//使用
Vue.use(MyPlugin);
//或者传参
Vue.use(Mypulgin,{param:'xxx'})

二、自定义指令

钩子函数：

1.bind:只调用一次，绑定元素时调用

2.inserted:第一次插入父元素时调用

3.update:VNode更新时调用，也可能更新之前。可比较Vnode和oldNode

4.componentUpdated:Vnode及其子元素全部更新时调用

5.unbind:解绑时调用。

钩子函数参数：

el:绑定的元素,可用来直接操作DOM

binding:一个对象，包含以下属性

name:指令名，不包括v-

value:指令值。例在v-my-directive='1+1'中 value=2

oldValue: 指令的前一个值，仅在update和componentUpdated中使用。无论值是否改变都可用。

expressions:字符串形式的指令表达式。例v-my-directive='1+1'表达式为'1+1'

arg:传给指令的参数。例v-my-directive：foo。arg为foo

modifiers:包含修饰符的对象。v-my-directive.foo.bar的修饰符对象为{foo:true,bar:true}

vnode:Vue编译的虚拟节点

oldVnode:上一个虚拟节点。仅在update和componentUpdated中使用。

全局自定义指令：

Vue.directive('my-direct',{
    bind:function(el,binding,vNode,oldNode){
        //...逻辑
        console.log('全局自定义指令');
    }
})

局部自定义指令：

//定义在vue对象中
directives：{
    my-direct:{
        bind:function(el){
            //...逻辑
            console.log('第一次绑定元素时调用')
        }
    }
}

三、自定义过滤器

全局过滤器

Vue.filter('filterA', function(value){
    //...逻辑
    console.log('我是全局过滤器filterA')
});
Vue.filter('filterB', function(value, arg1, arg2){
    //...逻辑
    console.log('我是带参数的全局过滤器filterB')
})

局部过滤器

filters:{
    filterA:function(value){
        //...逻辑
        console.log('我是局部过滤器filterA')
    },
    filterC:function(value,arg1,arg2){
        //...逻辑
        console.log('我是带参数的局部过滤器filterC')
    },
}

在vue中使用过滤器时，可以在{{}}中，也可在v-bind中

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在双花括号中 message为第一个参数，arg1是第二个参数，arg3是第三个参数-->
{{ message | capitalize(arg1,arg2) }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

如果全局过滤器和局部过滤器重名时，使用局部过滤器

3.x取消了过滤器，建议计算属性替代

vue组件通信方式

1.props

2.$emit

3.provide/inject

4.$parent/$children

5.全局（$on/$emit）

$on绑定全局事件，$emit调用事件

6.$attrs/$listeners

7.vuex
vuex的使用、加载流程极其原理

vuex是全局状态管理工具

什么是状态管理模式？

当我们多个组件共用一个状态，而vue的兄弟组件通信是个问题，这时候就需要将这个状态进行全局共享，将其注册到window中。

vuex的5个基本对象？

state、getter、mutation、action、module

vuex的store是什么？与5个基本对象有什么关系

注册在全局的一个变量，他是整个状态管理对象。

5个基本对象是定义在store中的

vuex中state的作用是什么？

vuex中的getter、mutation、以及action实际操作的都是state，state就是一个状态。

要理解vuex的加载流程。

vueComponents->dispatch action->commit mutation->state（getter是计算属性，存储缓存中，计算state）

vuex中mutation和action有什么异同？

mutation是同步的，action是可以执行异步操作的。

并且action实际执行的是mutation。action相当于在mutation外包了一层。mutation执行的是state

项目中使用vuex需要遵循什么原则？

如果需要在组件外部需要管理状态，则可以使用vuex。

vuex的实现原理？

通过vue.mixin进行全局注册，在beforeCreate生命周期注册到vue.prototype中
vue的生命周期
父子组件生命周期的顺序
vue2.0响应式原理
vue3响应式相对于vue2的进步
1.可以深度监听数组。
2.更主要的时proxy是劫持监听整个对象，对整个对象架设拦截。而费某一个属性。

三、浏览器部分

从页面输入一个url，到页面呈现，详细说明发生了什么？
浏览器缓存

浏览器分为强缓存和对比缓存。可同时存在。

强缓存：

客户端 ----->未超时--->读取缓存数据库。

客户端------>超时----->请求服务端------>获取数据，放入缓存

强制缓存：cache-control

cache-control：no-cache。每次请求都需向服务端验证。

cache-control:public。

对比缓存：Last-Modified、ETag

第一次发送请求，请求服务端，服务端给ETag为了下次验证是否修改。Last-Modified，最后的修改时间.code 200

第二次发送请求，未超时，则直接调取缓存数据库。code:200

第三次发送请求，超时，发送请求到服务端，资源未修改，通知客户端调取缓存数据库。状态码304
tcp的三次握手和四次挥手
cookie，sessionStorage，localStorage
cookie会被携带在同源http请求中，cookie大小限制4K，在设置的过期时间内一直有效
session Storage 浏览器关闭数据删除，大小一般在5M，或更大
local Storage 存储持久化数据，浏览器关闭不会删除，大小同sessionStorage
localStorage和sessionStorage不会将信息在http请求中携带
重绘和重排，以及其发生的条件
http请求和响应的一些问题

四、web安全部分

CSRF
XSS
1.富文本编辑器过滤script标签
2.用户图片上传禁止使用用户填写地址
3.在setCokkIE时，代上httponly字段，阻止JavaScript获取cookie
4.对用户的输入进行转义，<>转义为&lt；&gt；
5.使用innerText取代innerHTML，使用 v-text取代v-html，禁止使用eval()执行JavaScript
sql注入
点击劫持

五、优化部分

高内聚，低耦合
css 优化雪碧图（通过webpack配置spriteSmith）
js优化请求外部封装sdk 放cdn 减少重绘减少闭包减少dom节点更改
h5 尽量避免多层嵌套增加title keyword利于seo
公共组件公共方法公共样式抽取
减少请求次数
理解原理后，减少渲染或加载dom元素
利用缓存机制
vue优化

一、代码层面

1.v-if,v-show

频繁变动使用v-show，不频繁使用v-if。原因：v-if只有为true才会渲染，v-show总是渲染

2.v-for,v-if

同时存在时，v-for优先级更高。因此会先加载所有，才生效v-if。可以在computed中对数组进行过滤，filter只有通过定义函数测试的才会返回给数组

Array.user.filter((result)=>result)

3.图片懒加载vue-lazy

4.路由懒加载

import page = ()=>'' 更快的首屏。缺点，路由加载变慢

5.ssr服务端渲染预渲染 seo和更快的首屏

6.长列表取消监听.不会发生改变，无需响应式

this.key = Object.freeze(obj)

7.watch，computed

computed存入缓存，并依赖于其他属性。其他属性变动后，第一次使用时才会改变

watch 可以理解为监听，某个值一旦发生改变，将要做的操作，无返回

8.对绑定事件进行移除

beforeDestroy（）{

el.removeEventListener('click',this.click,false)

}

9.第三方插件的按需引入

安装babel-plugin-component

npm i babel-plugin-component --D

配置.babelrc文件（babel.config.js）
```
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```
main.js引入
```
import Vue from 'vue';
import { Button, Select } from 'element-ui';

 Vue.use(Button)
 Vue.use(Select)
```
二、传统web优化

1.缓存优化

采取强制缓存和对比缓存，减少请求。

2.文件压缩，gzip

3.使用cdn

4.通过chrom工具查看耗时，发现代码问题

三、webpack优化

1.大图片压缩

image-webpack-loader 限制limit，超过limit压缩