面试题，简版

1.解构赋值

es6允许按照一定模式，在数组和对象中取出值，给变量赋值，称为解构赋值

左右必须一样，使用左边的值，快速取出数据中对应的数据值，定义和赋值必须防在一起不然会报错，取不到值，必须是js存在的数据结构，解构赋值就是在数据中能快速的将需要的数据取出来

---

2.数据类型判断

1.typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型不起作用

2.instanceof 判断new关键字创建的引用数据类型不考虑null和undefined 以对象字面量创建的基本数据类型

3.constructor 似乎完全可以应对基本数据类型 和引用数据类型但如果声明了一个构造函数，并且把他的原型指向了array的原型，constructor也显得力不从心

---

3.类组件和函数式组件之间有何不同

1.类组件不仅允许你使用更多额外的功能，如组件自身状态和生命周期钩子，也能使组件直接访问 store 并维持状态

2.当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个无状态组件，可以使用一个纯函数来创建这样的组件

---

4.响应式布局如何实现

让网站同时适配不同分辨率和不同的手机端

一：百分比布局

相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的

二：使用媒体查询

利用媒体查询设置不同分辨率下的css 样式

三.rem 响应式布局

针对于html 元素的font-size 的值进行动态计算的

有两种方法：

第一种利用媒体查询，在不同分辨率下给 html 的 font-size 赋值。

第二种利用 js 动态计算赋值

方案四.vw 响应式布局

元素单位 px 转换为 vw 或 vh

方案五.flex 弹性布局

利用 flex 属性来适配不同屏幕

---

5.rem布局原理

如何使用rem进行布局？

1. 标签的 rem 单位的值怎么计算

通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面

2. 如何实现兼容各种屏幕大小的设备

使用到 javascript 来动态改变 html 标签 font-size 的大小，其他的 rem 单位的数值就会被浏览动态计算转为 px 单位，从而达到和设计图高度的相似。

---

6.生命周期

1. 创建
   beforeCreate()执行这个钩子时只有一些实例本身的事件和生命周期函数用户自定义不能使用
   created()最早开始使用data和methods中数据的钩子
2. 载入
   beforeMount()指令解析完毕，内存中生成dom数
   mounted()dom已经渲染完毕，页面和内存已经同步
3. 更新
   beforeUpdate()当data的数据发生改变会执行这个钩子，内存中数据是新的，页面是旧的
   updated()内存和页面都是新的
4. 销毁
   beforeDestroy()即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
   destroyed()已经销毁完毕

---

7.原型

1.原型的概念

JavaScript的所有对象都包含一个proto属性，这个属性对应的就是自身的原型
JavaScript的函数对象，除了原型proto属性之外还有prototype属性，当函数对象作为构造函数创建实例时，该prototype属性值将被作为实例对象原型proto

2.原型链

获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。

---

8.什么是深拷贝、浅拷贝，如何实现

是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。

深拷贝

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响， 对一个对象的修改并不会影响另一个对象。

浅拷贝

浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

const add = {
	name:'名字',
	age:9,
	sex:{
		sex:'男',
	},
	arr:['a','b','c']
}
//递归函数
function deepClone(obj){
	//判断obj是null或不是数组和对象
	if(typeof obj !== "object" || obj == null){
		return obj;
	}
	//初始化变量
	let result
	
	//判断是否是数组
	if(obj instanceof Array){
		result = []
	}else{
		result = {}
	}
	//循环obj
	for(let key in obj){
		//判断key不是一个原型属性
		if(obj.hasOwnProperty(key)){
			//调用递归函数
			result[key] = deepClone(obj[key])
		}
	}
	//返回数据
	return result
}
//将add拷贝到obj1中
const obj1 = deepClone(add)
console.log(obj1.arr)//['a','b','c']
obj1.arr[0] = 'd'
console.log(obj1.arr)//['d','b','c']
console.log(add.arr)//['a','b','c']

---

9.继承

##1.使用继承的好处

2. 减少代码量，减少代码冗余
3. 可以属性和方法的共用
4. 减少了内存使用

##2.ES5中的继承

1. 原型继承：父类的实例作为子类的原型
2. 借用构造函数继承：在子类中使用call方法调用父类的方法并将父类的this改成子类的this
3. 组合继承：既能调用父类的实例属性又能调用父类的原型属性

##3.ES6继承

1. 使用class构造一个父类
2. 使用class构造一个子类，并使用extends实现继承，super指向父类的原型对象
3. 实例化对象

##4.ES6中class继承

1. class相当于es5中的构造函数
2. class中定义方法是前后不能加function，全部都定义在class的proto