前端面试题

最近因为公司不景气，一直发不下工资来，因为有房贷压力，所以有离职的打算，现在整理一下面试题。
一. css盒模型的认知

1.w3c：margin 、border、padding、content、 元素的宽度width=content
2.万恶的ie：margin 、border、padding、content、 元素的宽度width=content+border+padding

二、css设置这两种盒模型

1. javascript box-sizing：content-box; // w3c
2. javascript box-sizing：border-box; // ie

三、清除浮动的几种方式

1.利用clear样式 clear:left/right
2.父元素里插入清楚浮动的块级元素 clear:both
3.利用伪类元素 .clear:after{ clear:both}
4.overflow:hidden

四、flex布局

这个盒子布局非常常用而且也非常好用
display:flex
当然了里面有很多的属性可以用，比如横向排列，竖向排列，两端对齐，垂直居中显示了

五、定位

1.相对定位：相对定位的元素不会脱离文档流，占用文档流的空间，绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。
2.绝对定位：绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。
3.固定定位：相对于浏览器窗口

六、js面试题数据类型判断

1.typeof 操作符判断字符串得到string，数字和NaN得到number，函数会得到function等，但是判断数组，对象和null时都会得到object，这就是typeof的局限性，
2.使用instanceof（比较运算符）可以用来判断一个变量是数组还是对象
3.constructor（构造函数）
4.Object.prototype.toString.call()

七、数据类型

1.基本数据类型：String,Boolean,number,Null,undefined,object,
2.引用数据类型：Object(Array,Date,RegExp,Function)

八、闭包

闭包外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象
创建闭包最常见方式，就是在一个函数内部创建另一个函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都
永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数本
举个例子：

function funA(){
  var a = 10;  // funA的活动对象之中;
  return function(){   //匿名函数的活动对象;
        alert(a);
  }
}
var b = funA();
b();  //10

九、原型和原型链

1.构造函数
构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象。每个构造函数都有prototype(原型)属性
2.原型对象
在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中。
3.在声明了一个函数后，这个构造函数（声明了的函数）中会有一个属性prototype，这个属性指向的就是这个构造函数（声明了的函数）对应的原型对象；原型对象中有一个属性constructor，这个属性指向的是这个构造函数
4.使用构造函数创建对象

 function students() {
 
        /* 我就是构造函数 */
    }
    var stu = new students();

5.原型链：
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

十、什么是跨域

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

十一、解决跨域的几种方式

1. JSONP是服务器与客户端跨源通信的常用方法
   2.通过修改document.domain来跨子域
   3.使用window.name来进行跨域
   4.通过CORS解决AJAX跨域
   5.像vue、uniapp等就是配置代理

十二、事件冒泡机制

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

十三、cookies，sessionStorage和localStorage的区别

十四、简述vue

Vue是一个 MVVM框架，其各层的对应关系如下:
View层：在Vue中是绑定dom对象的HTML(代表UI视图，负责数据的展示；)
ViewModel层：在Vue中是实例的vm对象 (负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；)
Model层：在Vue中是data、computed、methods等中的数据(代表数据模型，数据和业务逻辑都在Model层中定义；)
在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新

十五、vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
vue的生命周期各阶段都做了什么？
beforeCreate: 实例创建前：这个阶段实例的data、methods是读不到的
created: 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，
el属性目前不可见，数据并没有在DOM元素上进行渲染beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。mounted：el选项的DOM节点被新创建的vm.el 属性目前不可见，数据并没有在DOM元素上进行渲染beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用。mounted： el选项的DOM节点 被新创建的 vm.el属性目前不可见，数据并没有在DOM元素上进行渲染beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。mounted：el选项的DOM节点被新创建的vm.el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
beforeUpdate： 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated： 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
beforeDestory： 实例销毁之前调用。
destroyed： Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

十六、DOM树渲染在哪个周期中完成?

mounted函数

十七、第一次加载页面会触发哪几个钩子

第一次加载会触发 beforeCreate、created、beforeMount、mounted四个钩子

十八、如何让css只在当前组件中起作用

将当前组件的 (style)修改为(styple scoped)

十九、Vuex

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统
Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。
vuex:是vue提供的状态管理工具，简单解释就是vue各个组件直接的变量是不能直接共享的，组件直接的参数传递才多层的时候变得异常复杂，所以就诞生了vuex的状态管理工具，保证了状态的统一和可追踪

二十、router是什么？

vue-router:是vue生态里面的路由工具，采用路由能轻松实现单页面程序
route是路由信息对象，包括path,params,hash,query,fullPath,matched,name等路由信息参数。
router是路由实例对象，包括了路由的跳转方法，钩子函数。

二十一、vue.nextTick()的用处？

nextTick可以使我们在下次DOM更新循环结束之后执行延迟回调，用于获得更新后的DOM。

二十二、vue加载数据时防抖

v-cloak

1. js的typeof 返回哪些数据类型
   string ，Boolean，number，undefined ， function，object
2. 列举三种强制类型转换和2种隐式类型转换
   强制 parseInt() , parseFloat(), number(), 隐式（== ， ===）
3. split（） 和 join()的区别
   split（）函数是将字符串按照规则转换成数组，
   join（）是将数组转换成字符串
4. pop（）,push() ,unshift(), shift()
   push 是在数组的最后增加，
   pop是在数组的最后删除，
   unshift 实在数组的第一增加
   shift 是移出数组的第一个
5. IE和标准下有哪些兼容性的写法
   var ev = ev || window.event
   doument.documentElement.clientWidth || document.body.clientWidth
   window.location 取代（window.location.href）
6. ajax请求的时候get和post方式的区别
   一个再url后面，会带有参数
   一个放在虚拟载体里面
   get有大小限制，只能提交少量参数
   post 更安全
7. call（）和 apply（）的区别
   Object.call(this,val1,val2,val3)
   Object.apply(this,arguments)
8. ajax 请求时，如何解析JSON
   使用JSON.parse();
9. 事件委托是什么
   通过冒泡的原理，让自己的所触发的事件，让他的父元素代替执行
10. 闭包是什么
    闭包就是一个函数内部有其他的函数和变量，内部函数可以读取其中的变量，使得函数不能被CG回收，如果使用过多，容易当值内存泄漏
11. 如何阻止事件冒泡
    IE：ev.cancelBubble=true
    其他：ev.stopPropagation()
12. 如何阻止默认事件
    return false
13. 添加，删除，替换，插入到某个节点的方法
    创建：createElement()
    createTextNode();
    添加、移出、替换、插入
    appendChild()//添加
    removeChild()//删除
    replaceChild()//替换
    insertBefore()//插入
    插入
    getElementByTagName();//标签查找
    getElementByName();//name 查找
    getElementById();//ID
14. == 和 === 的不同
    前者会自动转换类型，再判断
    后者不会转换，直接比较