前端面试题第二次整理（第二次找工作）

浏览器相关

有哪几种浏览器，它们的内核是

浏览器有ie /safari/ chrome /mozilla firefox /opera

对应的内核有：ie----trident  safari/chrome---webkit    mozilla firefox---gecko     opera---presto

说下对浏览器内核的理解

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。

排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器

JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；

2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手

          a.客户端向服务器发送一个建立连接的请求

          b.服务器接到请求后发送同意连接的信号

         c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功

3.浏览器发送HTTP请求

        浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；

4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：

       a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；

       b.服务器将得到的 HTML 文件发送给浏览器；

       c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；

       d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。

5.断开连接

浏览器缓存有哪些

sessionStorage/localStorage/cookie

数据存放有效期

sessionStorage:仅在当前浏览器窗口关闭之前有效，浏览器关闭就没了

localStorage:始终有效，窗口或者浏览器关闭也保存，所以叫持久化存储

cookie只在设置的cookie过期时间之前有效，即使窗口或浏览器关闭也有效

过期时间设置

sessionStorage/localStorage不可以设置过期时间

cookie有过期时间，可以设置过期时间（把时间调整到之前的时间，就过期了）

存储大小

cookie存储量最大不能超过4k

sessionStorage/localStorage不能超过5M(localstorage大小有点争议，另外一个地方我看到的说说是10mb,不知道谁为准)

注意：不同的浏览器存储的大小是不同的，会有影响

http状态码有哪些，有哪些

1xx代表临时响应并需要请求者继续执行操作的状态码   

       100，服务器已收到请求的第一部分，正在等待其余部分

2xx表示成功处理了请求的状态码

        200，成功处理了请求

        202，服务器已接受请求，但尚未处理

3xx重定向，要完成请求，需要进一步操作

        304，自上次请求后，请求的网页未修改过

4xx 请求出错，妨碍了服务器的处理

        400 服务器不理解请求的语法

        401 未授权，需要进行身份验证

        404  找不到请求的网页

5xx服务器错误，服务器在处理请求时发生内部错误

        500 服务器内部错误

http与https的区别

HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

前端三要素是

html 结构，超文本标记语言，决定网页的结构和内容

css表现，层叠样式表，设定网页的表现样式

js,行为，弱类型的脚本语言，源码不需要经过编译，由浏览器解释运行，用于控制网页的行为。

强缓存、协商缓存、cdn缓存

http2

三次握手与四次握手

跨域（jsonp/cors）

跨域时如何处理cookie

垃圾回收机制

网络安全

https

什么是xss以及如何防止它

什么是csrf以及如何预防它

为什么会引起csrf攻击

事件循环-----涉及宏任务、微任务、ui渲染等的执行顺序

Vue部分

Vue中的v-if和v-for为什么不能一起用

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表, 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

v-if与v-for都是vue模板系统中的指令，在vue模板编译的时候，会将指令系统转化成可执行的render函数

v-for优先级比v-if高,  v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐v-if和v-for同时使用

Vue的三种常用传值方式

父组件向子组件传值，在子组件中通过props传递过去的数据

子组件向父组件传值，在子组件中定义数据，使用$emit来进行自定义事件的触发及事件的发送

非父子组件传值，公共的vuex来进行传递值和获取值，或者用localsstorage来传值和取值

通过vuex来进行传递或者获取值，在state中定义变量，对变量值进行修改通过mutations，比如点击按钮进行加减，对变量值进行变异使用getters,比如变量初始值为100，修改后为10000，有异步使用action

兄弟组件之间

兄弟组件指的是平级之间的组件，他们中得传值方式比较多

1.第一种是属于一种比较麻烦的方法，可以将值先传给父组件，再通过父组件传值给子组件得传值方式传值给另一个子组件

2.可以使用Bus事件总线，创建一个中转站来进行传值。

组件之间如何通信

父子组件之间如何通信

 组件间传递数据

父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on
监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。
祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。
通过属性$root / $parent / $children /
ref，访问根组件、父级组件、子组件中的数据；缺点：要求组件之间要有传递性。
通过事件总线(event bus)的方式，可以实现任意两个组件间进行数据传递；缺点：不支持响应式，这个概念是vue1.0版本中的，现在已经废弃。
通过 VueJs 的状态管理模式 Vuex，实现多个组件进行数据共享，推荐使用这种方式进行项目中各组件间的数据传递。
 

vue中的父组件及子组件生命周期的执行顺序

什么是MVVM

MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。

2.Model 代表数据层，负责存放业务相关的数据；

3.View 代表视图层，负责在页面上展示数据；

4.ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

MVC：MVC是Model-View- Controller的简写，即模型-视图-控制器，M和V和MVVM中的M和V是一样的。C是Controller即页面义务逻辑。区别。MVC是单向的数据传递。MVVM是双向的数据绑定，解决了MVC中大量的DOM操作使页面的渲染性能降低，加载速度变慢，影响用户体验。

为什么使用MVVM

低耦合-----视图view可以独立于model数据的变化和修改

可复用----你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑

独立开发------开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计

可测试-----现在可以针对ViewModel来写测试

什么是Vue

Vue是一套用于构建用户界面的渐进式JavaScript框架

与传统JS和JQuery框架不同，Vue的渐进式框架，开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
Vue渐进式框架的核心概念：组件化，MVVM，响应式，和生命周期

Vue的优缺点

优点：轻量级、易上手、高性能、便于测试，移动优先（更适合移动端， 比如移动端的Touch事件）
缺点：生态环境不够完善

vue组件中data为什么是一个函数

javascript的特性导致，在component中，data必须以函数的形式存在，不可以是对象
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data,相当于每个组件实例都要自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。

写成对象形式，就是所有的组件实例共用了一个data,这样一个修改等于全部都改了
 

 案列对比：图1图二对比

图1   当data为函数时，组件里的count各自独立

<template>
  <!-- 组件页 HelloWorld页面 -->
  <div class="hello">
    <button @click="count++">+</button>
   <h2>count:{{count}}</h2>
   <button @click="count--">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
//data为一个函数时，组件里的count各自独立
  data(){
    return{
      count:0
    }
  }
}
</script>


<style scoped>

</style>

<template>
  <div id="app">
   <hello-world></hello-world>
   <br/><br/>
   <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
    name: "App",
    components:{
      HelloWorld
    },
    data() {
        return {
  
        };
    },
}
</script>

<style>

</style>

图2    data为对象时，数据会发生混乱

<template>
  <!-- 组件页 HelloWorld页面 -->
  <div class="hello">
    <button @click="count++">+</button>
   <h2>count:{{count}}</h2>
   <button @click="count--">-</button>
  </div>
</template>

<script>
// data为一个对象时
const data = {count:0}
export default {
  name: 'HelloWorld',
  data(){
    return data;
  }
}
</script>


<style scoped>

</style>

<template>
  <div id="app">
   <hello-world></hello-world>
   <br/><br/>
   <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
    name: "App",
    components:{
      HelloWorld
    },
    data() {
        return {
  
        };
    },
}
</script>

<style>

</style>

Vue 中 methods,computed, watch 的区别

computed：
有缓存性，依赖于属性值，属性变化才会重新计算

methods：
没有缓存性，只要调用就会执行

watch：
没有缓存性，监听属性，当属性发生改变就会被调用

vue路由传参到底有几种方式

有两种:
query和params

query和params的区别：

params传参只能由name引入路由，如果写成path页面会显示undefined报错。
query传参的话可以使用path也可以使用name引入路由，不过建议使用path引入路由。

Vue-router 路由有哪些模式？

一般有两种模式：

hash 模式：监听hashchange事件实现前端路由，利用url中的hash来模拟一个hash，以保证url改变时，页面不会重新加载。

history 模式：利用pushstate和replacestate来将url替换但不刷新，但是有一个致命点就是，一旦刷新的话，就会可能404，因为没有当前的真正路径，要想解决这一问题需要后端配合，将不存在的路径重定向到入口文件。

GET和POST的区别

1、url可见性：

get，参数url可见； post，url参数不可见

2、数据传输上：

get，通过拼接url进行传递参数； post，通过body体传输参数

3、缓存性：

get请求是可以缓存的 post请求不可以缓存

==4、传输数据的大小: ==

get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大）

post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。

keep-alive 的作用

1、 在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果 之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候 会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索 的结果列表,这时候就需要用到 vue 的 keep-alive 技术了.

2、 在 router-view 上使用可以缓存该路由组件

3、 有两个参数 include - 字符串或正则表达，只有匹配的组件会被缓存 exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

promise 是什么？有哪些状态和参数？如何使用？

1、主要用于异步计算

2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

3、可以在对象之间传递和操作 promise，帮助我们处理队列

promise 有三个状态：

1、pending[待定]初始状态

2、fulfilled[实现]操作成功

3、rejected[被否决]操作失败

resolve与reject两种参数

resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即 从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果， 作为参数传递出去；

reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错 误，作为参数传递出去

当 promise 状态发生改变，就会触发 then()里的响应函数处理后续步骤；

Promise 对象的状态改变，只有两种可能： 从 pending 变为 fulfilled 从 pending 变为 rejected。

这两种情况只要发生，状态就凝固了，不会再变了。

常见的修饰符

Vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个：

1：stop：阻止冒泡（通俗的讲就是阻止事件向上级DOM元素传递）

2：prevent：阻止默认事件

3：capture：捕获冒泡，即有冒泡发生时，有此修饰的DOM元素会先执行，如果有多个就从外向内依次执行，然后再按照自然顺序依次执行。

4：self：将事件绑定到自身，只有自身触发时才能触发，通常用于避免冒泡事件的影响。(官网) 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此， 用 v-on:click.prevent.self 会阻止所有的点击， 而 v-on:click.self.prevent 只会阻止对元素自身的点击。

5：once：设置事件只能触发一次

6：passive尤其能够提升移动端的性能，滚动事件的默认事件，即滚动行为，滚就会触发。

7按键修饰符：keydown和keyup 键盘事件。（keycode）

vue 自定义指令如何使用

【全局指令】 使用 Vue.diretive()来全局注册指令。

【局部指令】 也可以注册局部指令，组件或 Vue 构造函数中接受一个 directives 的选项。

【bind】只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在 绑定时执行一次的初始化动作。

【update】 所在组件的VNode更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略 不必要的模板更新。

【unbind】 只调用一次，指令与元素解绑时调用。

生命周期有几个，他们的作用是什么

new Vue() ---创建了一个Vue的实例对象

init--表示，刚初始化一个Vue空的实例对象，这个时候，这个对象身上，只有默认的一些生命周期函数和事件，其他东西都来创建

befotrecreate:生命周期函数执行的时候，data和methods中的数据都还没有初始化

created: data和methods已经被初始化好了，如果要调用methods中的方法或者操作data中的数据，最早，只能在created中操作。

beforeMount:此函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的

Mounted：内存中编译好的模板，已经挂载到页面上了，用户可以看见了

beforeUpdate:当执行beforeupdate时，页面中的显示数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步

updated:执行时，页面和data数据已经保持同步，都是最新的

beforeDestory:执行时，组件身上所有的data和所有methods以及过滤器指令等，都处于可用状态，还没有真正执行销毁过程

Destoryed:执行时，组件已经完全销毁了，组件中的所有的数据方法指令等都不可以用了

Vue 中 v-if 和 v-show 有什么区别？

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。

v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。

一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

v-for 中 key 的作用是什么？

key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。

为什么要设置key值，特别是循环操作的时候

因为Vue是采用虚拟Dom，diff算法。需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

key的作用主要是为了高效的更新虚拟DOM。

vue在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

注意：·1：v-for循环的时候，key属性只能使用number或string 2：key使用的时候，必须使用v-bind绑定属性的形式，指定key的值
 

vue核心是

数据驱动，组件化

Vuex是什么？它的五大核心是

vuex是一个专为vue.js应用程序开发的状态管理模式，它作用是将应用中的所有状态都放在一起，集中式来管理

1.state： 用来存储变量，通过$store.state.变量名访问
2.mutations: 相当于我们vue里面方法,用来改变state存储的变量值，通过this.$store. commit来获取值
3.getters: 相当于组件中的计算属性，改变mutations变异的值
4.actions: 需要异步处理的时候可以使用actions,它跟mutations的区别是dispatch
5.modules: 这个是对处理过后的状态进行分类。

Vue的双向数据绑定原理是什么?

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

三个参数 to 、from 、next 分别的作用：

1.to: Route，代表要进入的目标，它是一个路由对象

2.from: Route，代表当前正要离开的路由，同样也是一个路由对象

3.next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

路由守卫有几种，是哪些

1.全局路由守卫：

定义：所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查

全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫

前置守卫：router.beforeEach((to, from, next) => {}

后置守卫：router.afterEach((to, from, next) => {}

2.组件路由守卫：

定义：跟 methods: {}等同级别书写，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

beforeRouteEnter (to, from, next){}

beforeRouteUpdate((to, from, next){}

beforeRouteLeave((to, from, next){}

3.独享路由守卫：

定义：路由独享守卫是在路由配置页面单独给路由配置的一个守卫

beforeEnter(to, from, next) =>{}

在Vue文件中template模板部分 使用template标签的作用是什么

使用template时，会忽略template标签直接输出template中的内容。template不会渲染成元素，用div的话会被渲染成元素。把if,show,for等语句抽取出来放在template上面，把绑定的事件放在temlpate里面的元素上，可以使html结构更加清晰，还可以改善一个标签过长的情况。

介绍一下SPA，优势以及不足，如何解决

SPA的全称是单页面应用。一个SPA就是一个web应用，他所需 的资源有HTML JS CSS等，一次请求就加载完成，不需要刷新的动态加载 。术语“单页”就是在页面初始化加载以后就永远不会刷新重新加载。 2：优势：减轻服务器端的压力 ，提高页面的渲染效果，减少请求数量。 3：不足之处：首屏加载时间会很长。 SEO不友好。

nextTick的作用是什么

 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

应用

想要在Vue生命周期函数中的created()操作DOM可以使用Vue.nextTick()回调函数

在数据改变后要执行的操作，而这个操作需要等数据改变后而改变DOM结构的时候才进行操作，需要用到nextTick

单向数据流与双向数据绑定的区别是怎么样的

单向数据流，以往的MVC模式,它是单向绑定，即Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新

数据的双向绑定 由MVVM框架实现，由View、ViewModel和Model组成，view和model不能直接进行通信，他们通过中间件ViewModel来进行通信。 当Model部分数据改变时，Data Bindings监听数据变化，会通知view更新视图； DOMListeners 监听视图，当view变化也会同步到Model中,View和Model之间的同步是自动的.

Vue中如何实现全局变量的定义

1：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。 使用方式1：在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。 使用方式2：在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

Vue优化方式

v-if 和v-show

使用Object.freeze()方式冻结data中的属性，从而阻止数据劫持

组件销毁的时候会断开所有与实例联系，但是除了addEventListener，所以当一个组件销毁的时候需要手动去removeEventListener

图片懒加载

路由懒加载

为减少重新渲染和创建dom节点的时间，采用虚拟dom

diff算法

diff算法是指对新旧虚拟节点进行对比，并返回一个patch对象，用来存储两个节点不同的地方，最后利用patch记录的消息局部更新DOM

虚拟DOM的优缺点

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢

优点：减少了dom操作，减少了回流与重绘

保证性能的下限，虽说性能不是最佳，但是它具备局部更新的能力，所以大部分时候还是比正常的DOM性能高很多的

为什么选Vue进行项目开发

Vue是一个以数据驱动为核心的渐进式MVVM模式框架。采用了虚拟DOM,diff算法，在页面的渲染上性能要好一些。同时他还是一个高性能，轻巧，可组件化的库，并且拥有非常易用上手的API库。

深拷贝和浅拷贝的区别

浅拷贝 扩展运算符...    赋值符号=     object.assign

深拷贝  json.parse(json.stringify())、递归拷贝 、var newobje=object.create(oldobj)

浅拷贝是拷贝对象指针，之间会相互影响，深拷贝是重新分配内存，不会影响

怎么把网址里的参数传出来呢？

querystring.parse

怎样实现继承

class的extends、Object.setPrototypeOf(子对象，父对象)、prototype

   //父类型定义子类型都有的属性方法
       class Enemy{
           constructor(x,y) {
               this.x=x;
               this.y=y;
           }
           fly(){
               console.log(`飞到x=${this.x},y=${this.y}位置`);
           }
       }
       
       //子类型plane  继承extends父类型Enemy
       class plane extends Enemy{
           constructor(x,y,score) {
               //子类型请求super父类型
               super(x,y);
               this.score=score;
           }
           getScore(){
               console.log(`击落敌机，得${this.score}分`);
           }
       }
       
      var Kevin=new plane(50,100,5);
      console.log(Kevin);
      Kevin.fly();
      Kevin.getScore();

//正常的
        function Student(name,age){
            this.name=name;
            this.age=age;
        }
        var Kevin=new Student("Kevin",18);
        var Alan=new Student("Alan",20);
        console.log(Kevin);
        console.log(Alan);
        
        //继承的对象
        var father={
            money:10000,
            car:"大众"
        }
        //给子对象Kevin添加father
        Object.setPrototypeOf(Kevin,father)
        console.log(Kevin);

axios怎样封装

安装axios模块，然后建立request.js文件，引入axios文件，建立request函数请求，通过axios.create存放网址，再建立请求拦截 instance.interceptors.request.use 响应拦截instance.interceptors.reponse.use()

之后再建立对应模块的文件，引入request文件，存放路由地址

import axios from 'axios'

export function request(config){
  //创建axios的实例
  const instance=axios.create({
    baseURL:'http://152.136.185.210:7878/api/hy66/',
    timeout:5000
  })

//2.axios的拦截器
//2.1请求拦截的作用
instance.interceptors.request.use(config=>{
  //console.log(config);
  //1.比如config中的一些信息不符合服务器的要求

  //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

  //3.某些网络请求（比如登录（token））,必须携带一些特殊的信息
  return config
}, err => {
  console.log(err);
})

//2.2响应拦截
instance.interceptors.response.use(res=>{
  //console.log(res);
  return res.data
},err=>{
  console.log(err);
})

//3.发送真正的网络请求
return instance(config)
}

import {request} from "./request";

export function getHomeMultidata(){
  return request({
    url:'/home/multidata'
  })
}

说下axios 

axios是一个可以用在浏览器端和node js的异步通信框架，主要作用就是实现ajax异步通信。

功能特点:从浏览器中创建XMLHttpRequests

                从node.js创建http请求

                支持PromiseAPi ---js中链式编程

                拦截请求和响应

               转换请求数据和响应数据

               取消请求

               自动转换json数据

               客户端支持防御XSRF

简单说下webpack

webpack是一个js程序的静态模块打包器，当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.

webpack.config.js配置文件如何写

module.exports = {
  entry:"",//入口文件，指定web pack用哪个文件作为项目的入口
  output:{  //output 输出，指定webpack把处理完成的文件放置到指定路径
    path:"", 
    filename:""
  },
  module:{ //module模块，用于处理各种类型的文件
    loaders:[
      {test:/\.js$/,;loade:""}
    ]
  },
  plugins:{},//插件，如热更新，代码重用等
  resolve:{},//设置路径指向
  watch:true//监听，用于设置文件改动后直接打包
}

watch与computed的区别

vue生命周期及对应的行为

vue父子组件生命周期执行顺序

组件间通讯方法

如何实现一个指令

vue.nextTick实现原理

diff算法

如何做到的双向绑定

虚拟dom为什么快

如何设计一个组件

webpack部分

用过哪些loader和plugin

loader的执行顺序为什么是后写的先执行

webpack配置优化

webpack打包优化（happypack/dll）

plugin与loader的区别

webpack执行的过程

如何编写一个loader/plugin

tree-shaking作用，如何才能生效

首屏加载如何优化

一个网页从请求到呈现花了很长时间，如何排查

css部分

什么是箱型

箱型阴影 box-shadow

具体的答案没有，就是指怎样用这个属性看起来的效果更好，光影和日照关系的更好。

怎样把元素垂直居中心

这个问题我打算分开答水平居中和垂直居中，到时候试验答复。

如何三栏式布局

我之前做过，之后把答案整理过来

选择器权重计算方法

!important优先级最高

内联优先级又比较高，在html元素中直接添加样式---1000

id选择器---100

类class和伪类选择器--10

元素/标签选择器----1

通配选择器*

继承的样式

种类规则：

只要有！important，优先级就最高

优先级相同，就使用靠近的样式，就近原则

比较优先级时，需要将每个选择器的所有结果相加后进行比较

选择器的累加不会超过最大的数量级，比如类选择器再高也不会超过id选择器

--------------------奇怪，明明我记得我在html/css基础知识写了的，但就是找不到这块内容，为什么啊啊啊啊啊！！！！！！

如何清除浮动

clear:both

还有一个是通过：：after/::befter写的，之后补

说下flex

flex是css方式布局的一种，它有主轴和交叉轴，通过dispaly:flex设定flex布局，flex-direction属性来决定主轴方向是水平方向还是垂直方向，justify-content主轴对齐方式，align-items交叉轴对齐方式，flex-wrap决定是否换行，flex:是flex-grow（项目放大，有剩余空间）   flex-shrink（项目缩小，空间不够）  flex-basis （元素的宽就是它的值  ）的缩写

什么是bfc,可以解决什么问题

bfc块级格式化上下文，它是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素。

多用于清除浮动，解决高度塌陷，父子margin重叠等问题

//清除浮动
.clearfix:after{
    content:"";    /*内容为空*/
    height:0;  /*高度为0*/
    line-height:0;  /*行高为0*/
    display:block;  /*块级元素*/
    visibility:hidden;  /*隐藏*/
    clear:both;   /*清除浮动*/
}
.clearfix{
    zoom:1;   /*兼容IE678*/
}

位置属性

就是问的是position，position五个值，然后是relative和ansoluted的关系

如何实现自适应平方

我搜了一下，出来的是css实现自适应的正方形，都说高不固定，不能用height值，需要用width值实现正方形的height赋值。

可以用vw单位，具体的之后再说。

如何用css实现三角形

宽高设为0，border-三边为transparent，有一边有颜色值。

border边值设为1就是一个点，为何用border就可以，我首先想的就是padding/margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width:0;
				height:0;
				border-top: 40px solid transparent;
				border-bottom: 40px solid transparent;
				border-right: 40px solid black;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

什么是css预处理器

css预处理器定义了一种新的语言，用一种专门的编程语言，为css增加一些编程的特性，再通过编译器转换为正常的css文件，以供项目使用。

常见的css预处理器有：sass less

js部分

js构建工具有哪些

babel:JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript

webpack:模块打包器，主要作用就是打包、压缩、合并及按序加载

手写防抖和节流

手写深拷贝

手写数组去重、数组乱序

说下继承

手写call/apply/bind

sleep函数

实现promise、实现promise.all、实现promise.retry

将一个同步callback包装成promise形式

写一个函数，可以控制最大并发数

jsonp的实现

eventEmitter（emit，on,off,once）

实现instanceof

实现new

实现数组flat/filter等方法

lazyMan

函数currying

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

变量的解构赋值

promise.async await 和generator的区别

es6和es5继承有何不同

js模块化（common/amd/cmd/es6）

说下this,如何改变this指向，call/apply/bind的区别

this一般有5种情况   全局和独立调用中指向window

                                箭头函数的this看父级情况

                                构造函数是指向new的实例

                                use strice 模式下，指向undefined

                                其他的就是谁调用指向谁。比如对象.对象里的函数指向对象