JS部分
1、什么是原型，什么是原型链
每个构造函数（class）都有一个显示的原型prototype
每个实例对象都有个隐示原型 _proto_
实例的隐示原型 _proto_等于其构造函数的显示原型protype
当查找一个对象的属性或方法时先在实例上查找，找不到沿着 _proto_向上逐级查找
我们把 _proto_的_proto_形成的链条关系成为原型链
作用：原型链实现了js继承，原型可以给构造函数创建的实例添加公用方法解释：
1. 实例对象a只有__proto__（隐式原型），构造函数既有 __proto__（隐式原型）也有prototype（显式原型）
2. __proto__ 和 prototype 都是一个对象，既然是对象，就表示他们也有一个 __proto__
2、var、const和let的区别
var在ES5提出，let和const是在ES6提出的
let和const 不存在变量提升，var声明变量会存在变量提升。即变量可以在声明之前调用，值为undefined
let 和const在同一作用域下不能重复声明，var可重复声明
const 声明必须赋值，值不能修改
3、this指向问题
- 事件响应函数的this指向调用者
- setTimout setInterval 的this指向window
- 箭头函数的this指向上一层作用域的this
- 对象中的this指向对象
- call，apply，bind响应的函数this指向第一个参数
- 构造函数new函数名（）this指向new出来的对象的实例
4、http状态码代表什么
- 1xx 表示HTTP请求已经接受，继续处理请求
- 2xx 表示HTTP请求已经处理完成(200)
- 3xx 表示把请求访问的URL重定向到其他目录(304资源没有发生变化，会重定向到本地资源)
- 4xx 表示客户端出现错误(403禁止访问、404资源不存在)
- 5xx 表示服务器出现错误
5、异步和同步
同步是按顺序执行，会阻塞代码
异步是非阻塞式执行代码
异步方法：回调函数，Promise，订阅发布模式，事件响应，async和await
6、null和undefined的不同
null的数据类型为object，代表空，空指针
undefined的数据类型为undefined，代表定义了没有赋值，
console.log(null);//null console.log(undefined);//NaN console.log(null+22);//22 console.log(undefined+22)//NaN //NaN代表非数字，代表未定义或者不可表示的值
7、事件流
冒泡流：事件由最具体的元素响应然后逐渐冒泡到最不具体的元素
捕获流：从最不具体的元素捕获事件
开启捕获addEventListenter 第三个参数true
阻止事件冒泡：e.stopPropagation
8、cookie、localstorage、sessionstrorage之间有什么区别？
1、与服务器交互：
cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）
cookie 始终会在同源 http 请求头中携带（即使不需要），在浏览器和服务器间来回传递
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
2、存储大小：
cookie 数据根据不同浏览器限制，大小一般不能超过 4k
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，与浏览器是否关闭无关
9、ajax和axios的区别
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现js封装一样。
优缺点：ajax本身是针对MVC的编程，不符合现在前端MVVM
10、箭头函数和普通函数的区别
1、箭头函数的this指向上一层作用域的this
2、箭头函数不能作为构造函数，没有constructor
11、值类型和引用类型的区别
1、值类型key和value都存储在栈中
2、引用类型栈中存内存地址，真正值存储在堆中
3、实例：
(1)、var a=15 ; var b=a; b=20; b与a互相不影响
(2)、var a= {age:15} ; var b = a; b.age=18; 此时a.age也是18
12、什么是闭包，闭包的应用场景，闭包的缺点
1、闭包就是函数嵌套函数，函数作为参数被传入，作为返回值被返回
2、闭包的作用
（1）、在函数外部访问函数内部变量成为可能
（2）、形成局部作用域
3、闭包的缺点
被闭包引用的变量不会被js垃圾回收机制回收，会常驻内存，使用不当容易造成内存崩溃
4、如何解决闭包的缺点
少用或者不用闭包
手动释放
13、数组去重的方法
14、浅拷贝和深拷贝
15、JavaScript数据类型
基本数据类型：字符型，布尔型，数字型，空（null），未定义（undefined）、symbol
引用数据类型：对象，数据，函数，正则（RegExp），Date（日期）
HTML和CSS部分
1.transition和animation的区别
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，
他们的主要区别是
transition需要触发一个事件才能改变属性；
animation不需要触发任何事件的情况下才会随时间改变属性值；
并且transition为2帧，从from .... to，而animation可以一帧一帧的。
2.BFC是什么，如何开启BFC？
定义：
BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。
W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。
简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性
如何开启BFC：
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
3、定位区别
relative 相对定位 正常文档流 相对于自身的位置
absolute 绝对定位 脱离文档流 相对于开启了position非static最近的父辈元素
fixed 固定定位 脱离文档流 相对于浏览器定位（不随滚动条滚动）
4、简述href和src的区别
src（source）用于替换当前的元素，指向外部资源的位置，指向的内容会嵌入到文档中的标签所在的位置，；在请求src资源时会将其指向的资源下载并应用到文档内；例如：js脚本，img图片
href（Hypetext Reference），指向网络所在的位置（可指向在线资源），建立和当前元素或文档之间的链接；
src和href最大的区别，src使用时，会先暂停其他资源的下载和处理，直到该资源加载完成。href指向资源所在位置，加载时并不会停止其他资源的加载。
5、优雅降级和渐进增强
优雅降级：先针对高版本的浏览器构建页面，以求功能的完善，然后再对低版本浏览器进行兼容
渐进增强：先对低版本浏览器以求最基本的功能，然后再对高版本浏览器的效果和交互等功能追求更好的用户体验。
6、css权重
第一等：内联样式 >内部样式 > 外部样式
第二等：id选择器 权重100
第三等：class（类）选择器； 伪类选择器；属性选择器 权重 10
第四等：标签选择器，伪元素选择器 权重 1
选择器权重总结：id选择器 > class选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪类选择器
7、如何写个三角形
width: 0px;
height: 0px;
display:block;
border:10px solid transparent(全背景透明)
border-left-color:red;
8、html5标签有哪些
header（头部）、nav（导航栏）、main（主要部分）、section（节）、aside（侧边栏）、arcticle（文章段落）、footer（脚注）。
9、清除浮动，解决父元素坍塌问题
1、父元素坍塌，给父元素设置overflow属性
2、使用伪元素清除浮动
注意：伪元素清除浮动，display：block；content： ' ';
10、 css垂直居中的几种方法
1、弹性盒子
2、父元素position：relative ；子元素position：absolute
top:0px;bottom:0px;left:0px;right:0px;margin: auto;
3、父元素不动，子元素设置
position：relative；top:50%; left:50%; tranfrom:translate(-50%,-50%)
11、html5新增的元素和功能
语义化标签：header、nav、section、article、aside、detailes、summary、dialog
新增音频和视频标签：video、audio
新整Canvas绘图
新增svg绘图
新增拖放<div draggble="true"></div>
小程序部分
1、小程序传递参数的方法
1、使用全局变量，在app.js中this.globalData={}中放入要存储的数据，在组件.js中，头部引入const app=getApp（）；湖区全局变量，直接app.globalData.key来进行赋值
2、使用路由，wx.你avigateTo和wx.redirectTo时，可以通过在url后拼接+变量，然后在目标页通过onLoad周期中，通过参数来获取传递过来的值
3、使用本地缓存
Vue部分
1、v-if和v-show的区别
都可以隐藏节点，v-show是通过操作css隐藏，v-if是直接移除dom节点，频繁切换显示和隐藏用v-show，反之用v-if。
2、$router和$route 的区别
$route的当前页面路由信息，params，query，path，fullpath
$router使整个路由实例，通常带方法，push，replace，back，forward，go
3、什么是MVVM（前后端分离）
M：model模式存储数据
V：view显示内容
VM：viewModel视图模块，连接视图与model模型
当model数据发生变化时通过VM可以监听变化更新视图
当view视图发生变化时可以通过VM监听变化自动更新视图
4、Vue的router-link和a标签的本质区别
a标签：a标签跳转，页面会重新加载，相当于重新打开一个网页。
router-link：通过router-link跳转不会跳转到新的页面，不会重新渲染。
a标签和router-link对比，router-link避免了重复渲染，减少了dom性能的损耗。
5、在vue-for循环中为什么必须要加上key
key为了让vue虚拟dom节点查找与更新更加优化，
6、computed与watch区别
computed有缓存，watch没有
computed从现有数据计算出新的数据，watch是监听数据变化执行handler回调函数
computed 多对一，watch 一对多
7、vue生命周期
1、 概念：我们把一个对象从生成（new）到销毁（destory）的过程，称为生命周期
2、八大生命周期钩子函数
beforeCreated |
Vue实例初始化之前调用 |
created |
Vue实例化初始化之后调用 |
beforeMount |
挂载到DOM树之前调用 |
mounted |
挂载到DOM树之后调用 |
beforeUpdate |
数据更新之前调用 |
update |
数据更新之后调用 |
beforeDestory |
Vue实例销毁之前调用 |
destoryed |
Vue实例销毁之后调用 |
8、谈谈Vuex。
1、什么是Vuex？
Vuex是vue的全局状态管理器，当state更新，引用state组件的视图会响应式更新；本质上就是一个没有template的Vue文件，通过Vuex可以更好集中管理数据，多个组件共享数据。
2、Vuex有哪些组件？
存储数据的：state
获取数据state数据唯一方式：getters
修改数据唯一方式：mutations
异步操作的：actions
模块：module
9、Vuex和全局变量的区别
1、都可以实现多个组件全局共享数据
2、Vuex的数据是响应式的，会自动更新视图
3、Vuex的修改必须是mutations，更加利于调试
4、Vuex还支持异步操作，方便Vuex插件便于调试
10、哪些数据你存储在vuex中
当多个组件都需要的数据通常存储在Vuex里面
用户相关信息：token，用户信息，权限信息，第三方登陆信息，用户访问历史
设置信息：主题，自定义菜单
11、在Vue-for循环中为什么设置key值
12、什么是虚拟dom，优点
1、虚拟dom就是一个普通的js对象，包含了tag、props、children三个属性，以这三个属性来描述一个dom节点
2、优点：虚拟dom是一个普通的js对象，实际是对js对象属性的更改；虚拟dom是运用diff算法来计算出真正需要更新的节点，最大限度地减少dom操作以及dom操作带来的排版和重绘，从而提高性能。
13、nextTick作用（全局方法）
数据更新，等待视图更新执行的回调函数（dom操作常用）
14、vue的修饰符有哪些
15、单页面spa和多页面mpa的区别
单页面（spa）
概念：只有一个html页面，所有的跳转方式都是通过组件切换完成的
优点：页面之间跳转流畅、组件开发可复用，开发便捷，易维护
缺点：首屏加载较慢，加载整个项目中使用的css，js，seo优化不好
多页面（mpa）
概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转
优点：首屏加载比较快，只加载本页面所用的css、js；seo优化比较好
16、哈希路由（hash）和历史路由的区别（history）
hash路由：
原理：通过监听浏览器onhashchange事件变化查找对应的路由应用，通过改变localtion.hash改变页面路径
history路由:
原理：通过html5中history interface新增的pushState（）和replaceState（）方法，改变页面路径
17、vue修饰符
vue中五种修饰符：事件修饰符、鼠标修饰符、表单修饰符、键值修饰符、v-bind修饰符
表单修饰符
v-model-lazy：光标离开表单时，赋值给value
v-model-trim：自动过滤用户输入的首空格字符，而中间的空格不能过滤
v-model-number：自动将用户的输入值转化为数值类型
事件修饰符：
@click.stop:阻止事件冒泡
@click.prevent:阻止事件默认行为
@click.self：当前元素触发时处理函数
@click.once:绑定了只能触发一次
@click.captrue:使事件触发从包含这个元素的顶层开始往下触发
@scroll.passive:
鼠标修饰符：
@click.left左键点击
@click.right右键点击
@click.middle中键点击
18、vue插槽
微信小程序
1、微信小程序有几个文件
wxml：微信自己定义的一套组件
wxss：用于描述wxml的组件样式
js：逻辑处理
json：小程序页面配置
闭包
什么是闭包
函数嵌套函数，函数作为参数被传入，作为返回值被返回
要理解闭包就要去理解变量的作用域，在JS中存在两种变量的作用域，一种是全局变量，一种是局部变量。两种变量的区别就是函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。
那什么是闭包呢？闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
闭包的特点
- 让外部访问函数内部变量成为可能
- 局部变量会常驻在内存中
- 可以避免使用全局变量，防止全局变量污染
- 会造成内存泄漏（有一块内存空间被长期占用，而不被释放）
闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，并且互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据，那么这个时候，这个数据不删除，保留一根指针给内部活动对象。大概意思就是说当外部函数运行结束甚至销毁时，局部的变量key=value,尽管key被垃圾回收机制给回收了，但是value仍不会被回收，会变成一个自由变量留下引用的指针。
例子1（手动释放闭包）
<script>
var age = 10;
function foo() {
console.log(age);//-----------------1
//name作为函数内部的变量，外部访问不到。
var name = "hunt_bo";
//name作为函数值被返回，实现了外部访问函数内部变量
return function () {
console.log(name);
}
}
console.log(name);//---------------2
var bar = foo();
bar();
//手动释放闭包
bar=null
</script>
例子2
function addCount(){
var count = 0;
return function(){
count += 1;
console.log(count);
}
}
var fun1 = addCount();
var fun2 = addCount();
fun1();//1
fun1();//2
fun1();//3
fun2();//1
fun2();//2
解析：就会发现替他打印的不是12345，而是12312，那这是什么原因呢，这就回到了上边介绍的那句话：每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。所以说虽然fun1和fun2都是addCount()，但是呢都创建了新地址，都是自己的，互不干扰。
例子3
function fnnn(){
var arr = [];
for(var i = 0;i < 5;i ++){
arr[i] = function(){
return i;
}
}
return arr;
}
var list = fnnn();
for(var i = 0,len = list.length;i < len ; i ++){
console.log(list[i]());
}
//打印结果 5 5 5 5 5
手写ajax
//1、创建一个xhr对象
var xhr=new XMLHttpRequest();
//2、打开连接get方式
xhr.open("get","url地址")
//3、发送数据
xhr.send(data)
//4、发送数据到服务器
xhr.onreadystatechange = function () {
// 监听xhr的变化
if (xhr.readystate === 4) { //状态4成功
if (xhr.status === 200) { //响应码200
// xhr.responseText 获取的数据
}
}
}
清除浮动的方法
为什么要清除浮动，因为浮动的盒子脱离标准流，如果父盒子没有设置高度的话，子盒子就会把父盒子撑起来。
解决浮动带来的问题
1、额外标签法（在最后一个浮动标签后，新加了一个标签，给其设置clear：both；）
2、父级元素overflow属性（父元素添加overflow：hidden）（不推荐）
3、使用after伪元素清除浮动（推荐）
.box {
background-color: pink;
}
.one {
width: 300px;
height: 300px;
float: left;
background-color: red;
}
.two {
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
.box:after {
content: "";//必加
display: block;//伪元素只对块元素起作用
clear: both;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
2、给父元素加overflow属性进行清除浮动
.box {
background-color: pink;
overflow: auto;
}
.one {
width: 300px;
height: 300px;
float: left;
background-color: red;
}
.two {
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
使用after和before双伪元素清除浮动
.box {
background-color: pink;
}
.one {
width: 300px;
height: 300px;
float: left;
background-color: red;
}
.two {
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
.box:after,
.box:before {
content: '';
display: block;
}
.box:after {
clear: both;
}
.box:before {
*zoom: 1;
}
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>