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

箭头函数的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压缩

六、算法部分

时间和空间复杂度
多叉树求最大深度
判断数组中两整数之和是否等于某个整数
链表的中序遍历
两个单链表是否相交

以上是关于为期两月的面试整理的主要内容，如果未能解决你的问题，请参考以下文章

CURD程序员花两月吃透这Java岗798道真题解析，三面阿里成功定级P7！

经过两个月的面试，我给你整理了这些面试考点（Java版）

Android 开发面经，历时两月斩获BAT+头条四个公司 Offer

隔壁老王整理了两个月的Java面经，全面到流泪（呜呜呜）

2017-11-06

为期两月的面试整理

一、js部分

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

Promise async和await

js继承

事件循环机制（Event Loop）

js事件阶段和事件委托

js垃圾回收机制

双等于‘==’引出的一系列违反常理的情况

二、vue部分

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

vue组件通信方式

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

vue的生命周期

父子组件生命周期的顺序

vue2.0响应式原理

vue3响应式相对于vue2的进步

三、浏览器部分

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

浏览器缓存

tcp的三次握手和四次挥手

cookie，sessionStorage，localStorage

重绘和重排，以及其发生的条件

http请求和响应的一些问题

四、web安全部分

CSRF

XSS

sql注入

点击劫持

五、优化部分

高内聚，低耦合

减少请求次数

理解原理后，减少渲染或加载dom元素

利用缓存机制

vue优化

六、算法部分

时间和空间复杂度

多叉树求最大深度

判断数组中两整数之和是否等于某个整数

链表的中序遍历

两个单链表是否相交