问题预览

1. 什么是事件冒泡，怎么阻止
2. ie盒模型和w3c盒模型的区别?
3. js基本数据类型和引用数据类型有哪些？
4. 怎么判断是什么数据类型怎么判断是否为数组？
5. 什么是原形链？
6. 如何创建一个函数， new一个函数的时候发生了什么？
7. 什么是闭包,闭包的缺点为什么会有内存溢出?
8. es6特性let const var区别?
9. 什么是深拷贝？
10. 怎么画出一个三角形
11. vue的双向绑定vue的通信方式?
12. vue的生命周期
13. 为什么选择vue

手写代码

1. 防抖节流并写出任意一个

详细解答

1. 事件冒泡

事件冒泡： 浏览器从用户点击的按钮从下往上遍历至 window，逐个触发事件处理函数

e.stopPropagation() //可以阻止事件冒泡

2. ie盒模型和w3c盒模型的区别?

W3C的标准盒子模型：content-box

content-box是内容盒模型：宽度=内容的宽度，如果后期添加了border或padding就会使盒子向外扩张

IE盒子模型：border-box边框盒模型

border-box是边框盒模型：设置的宽度就等于=内容宽度+padding+border；添加的padding和border就在原先设置的width里，border和padding越大就会向内部content扩张，导致content变小

3.js基本数据类型和引用数据类型有哪些？

记住口诀：四基两空一对象

四基：string,number,symbol,bool,

两空：null,undefined

一对象：object

string,number,symbol,bool,null,undefined 属于基本数据类型

Function、Object、Date、RegExp、Number、String、Boolean和自定义类等属于引用数据类型

4.怎么判断是什么数据类型?怎么判断是否为数组？

对于原始数据类型，我们可以使用typeof()函数来判断他的数据类型

为什么 typeof 运算符对于 null 值会返回 "object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

instanceof 用来判断一个变量是否是某个对象的实例，所以对于引用类型我们使用instanceof来进行类型判断。

5.什么是原形链？

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

6.如何创建一个函数， new一个函数的时候发生了什么？

创建函数有三种方式

// 声明式
function Fn(x,y){
    return x + y;
}
// 函数表达式
var sum2=function(n1,n2){
  return n1+n2;
};

// 函数构造法
var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));

new一个函数时，一般有四步

1.新创建一个空对象

2.构造函数的显示原型等于实例对象的隐式原型，实例对象的constructor属性为构造函数的名称

3.通过调用call、apply方法执行构造函数并改变this对象（绑定到实例对象上）

4.返回这个对象

7.什么是闭包,闭包的缺点？

闭包概念：闭包是指有权访问另外一个函数作用域中的变量的函数

闭包的缺点：比普通函数更占用内存，会导致网页性能变差，在IE下容易造成内存泄露。

如何防止内存泄漏：在退出函数之前，将不使用的局部变量全部删除，或将变量赋值为null

8.es6特性let const var区别?

var和let都是声明变量的，var有变量提升，let没有，但是let具有块级作用域

const声明常量具有块级作用域

9.什么是深拷贝？

深拷贝：是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

10.怎么画出一个三角形

原理是让一个元素没有宽高，但是给其边框设置足够的宽度，并让其中三条边框的背景色为透明transparent。

<div class="border"></div>
<style>
  .border {
      width: 0;
      height: 0;
      border: 50px solid;
      border-color: transparent transparent red;
  }
</style>

11.vue的双向绑定vue的通信方式?

当数据传入vue的实例中作为data数据时，vue将遍历此对象的所有property,并且使用Object.defineProperty把他们转化为getter和setter方法,而get和set正是对属性的读写进行监控

12.vue的生命周期

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

DOM 渲染在 mounted 中就已经完成了。

13.为什么选择vue

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API

vue两大特点：响应式编程、组件化

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

手写代码

函数节流：任务在指定的间隔时间内只执行一次。

// 节流（一段时间执行一次之后，就不执行第二次）
 function throttle(fn, delay){
     let canUse = true
     return function(){
         if(canUse){
             fn.apply(this, arguments)
             canUse = false
             setTimeout(()=>canUse = true, delay)
         }
     }
 }
 const thro = throttle(()=>console.log('hi'))
 throttled()
 thr()

函数防抖：只有在任务触发的间隔大于等于指定的间隔时间，任务才会被执行。(点击了之后先不做，等了一定的时间之后再做）

 
// 防抖（一段时间会等，然后带着一起做了）
 function debounce(fn, delay){
     let timerId = null
     return function(){
         const context = this
         if(timerId){window.clearTimeout(timerId)}
         timerId = setTimeout(()=>{
             fn.apply(context, arguments)
             timerId = null
         },delay)
     }
 }
 const debo = debounce(()=>console.log('hi'))
 debounced()
 debo()