记录自己在面试过程中碰到的一些重要问题-持续更新

1.对于class类的理解

ES6之前的js中并没有类的概念，只有对象的概念，由于js是一种基于原型的面向对象语言，他的特点是可以吧自身的一些属性或者方法，通过原型对象的方式进行类似于类的操作。通过创建函数的方法来生成一个对象实例，通过prototypre的方法继承，通过new方法来构建新对象。将构造函数的作用域赋给新对象，这时候构造函数的this就指向了这个对象，后台通过构造函数来return返回新对象。
ES6之后，w3c正式引入了class，可以使用class的方法来定义类，本质上还是一个函数（class类似于一个语法糖）。当使用class定义一个类的时候，类里面的的指向就是构造函数，所有的类方法都是定义在prototype上，当对类添加方法的时候，也是通过prototype属性。用class定义类的时候，会有一个constructor的方法，在通过new生成实例对象的时候，constructor会自动执行，默认返回this。
class需要先定义再使用。
在constructor内定义的属性是实例属性，实例属性在new的时候会被每个实例对象复制出去，成为实例对象单独的属性，在构造器外定义的属性是原型属性，原型属性都是在prototype上的，被所有new出来的实例对象共享，每个类只有一个prototype，内存占用小。（判断是否是实例/原型属性可以用hasOwnProperty方法判断，true实例属性，false是原型属性）
构造函数内通过指针绑定在this上边的方法称为实例方法，只能被实例调用，绑定在prototype上的方法叫做原型方法，也是只能被实例调用。构造函数内的静态方法（没有被绑定在this上）或者通过在构造函数外绑定一个函数的类方法只能被类调用

2. js里面object的方法

参考https://blog.youkuaiyun.com/weixin_38788947/article/details/78260087

1. Object.keys用于遍历对象属性的一个方法（es5），它传入的参数是一个对象，返回的是一个数组，数组中包含的是该对象所有的可枚举的属性名。
2. Object.getOwnPropertyNames，（es5）返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。
3. Object.values()，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。（顺序按照键名的从小到大遍历）
4. Object.create()，创建一个新对象，使用现有的对象来提供新创建的对象的__proto__语法Object.create(proto, [propertiesObject])
5. Object.hasOwnProperty()，判断对象自身属性中是否具有指定的属性（不包括原型属性）
6. Object.getOwnPropertyNames()，返回对象的所有自身属性的属性名组成的数组，但不会获取原型链上的属性。
7. Object.assign()，用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）
8. Object.defineProperty()，可以用来定义新属性或修改原有的属性Object.defineProperty(obj, prop, descriptor)参数说明
   obj：必需。目标对象
   prop：必需。需定义或修改的属性的名字
   descriptor：必需。目标属性所拥有的特性
9. Object.is()， 它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

Object对象的实例方法
除了Object对象本身的方法，还有不少方法是部署在Object.prototype对象上的，所有Object的实例对象都继承了这些方法。Object实例对象的方法，主要有以下六个。

1. valueOf()返回当前对象对应的值
2. toString()返回当前对象对应的字符串形式,用来判断一个值的类型
3. toLocaleString()返回当前对象对应的本地字符串形式、
4. hasOwnProperty()判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性
5. isPrototypeOf()判断当前对象是否为另一个对象的原型
6. propertyIsEnumerable()判断某个属性是否可枚举.

Object自带一个prototype的属性，即Object.prototype，Object.prototype本身也是一个对象，也会有一些属性和方法。如下：
1、属性
Object.prototype.writable：默认为false
Object.prototype.enumerable：默认为false
Object.prototype.configurable：默认为false
Object.prototype.constructor：用于创建一个对象的原型。
2、常用方法
Object.prototype.hasOwnProperty():返回一个布尔值，表示某个对象是否含有指定的属性，而且此属性非原型链继承。

Object.prototype.isPrototypeOf():返回一个布尔值，表示指定的对象是否在本对象的原型链中。

Object.prototype.propertyIsEnumerable():判断指定属性是否可枚举。

Object.prototype.toString():返回对象的字符串表示。

Object.prototype.watch():给对象的某个属性增加监听。

Object.prototype.unwatch():移除对象某个属性的监听。

Object.prototype.valueOf():返回指定对象的原始值。

3.rem与em区别，响应式布局，xs，sm，md，lg，dpr，vwvh

1.rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。

rem是根据html根节点来计算的，而em是继承父元素的字体
响应式布局概念
2.Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
3.当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap

也就是在pc端以及不同手机（显示屏大小不同）端内容也能够正常显示的时候；

一行最多占十二个标签，不管是大屏还是超小屏的时候.

col-lg-* 一般用于大屏设备（min-width：1200px）

col-md-* 一般用于中屏设备（min-width：992px）

col-sm-* 一般用于小屏设备（min-width：768px）

col-xs -*用于超小型设备（max-width：768px）
4.一个vw等于viewport宽度的百分之一，一个vh等于viewport高度的百分之一
vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个

优点：简单，无需设置
缺点：兼容性不好

4.数据双向绑定的原理 v-model

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

第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

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

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

在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个 update()方法
待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。
第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果

5.状态管理

redux
是什么：是一个应用数据流框架，集中式管理

怎么用：view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据

缺点： state必须由父组件传过来，子组件相关数据更新，父组件会强渲

flux
单向数据流

用户访问 View
View 发出用户的 Action
Dispatcher 收到 Action，要求 Store 进行相应的更新
Store 更新后，发出一个"change"事件
View 收到"change"事件后，更新页面
vuex
：vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

使用：在 main.js 引入 store，注入。新建了一个目录 store，…… export

场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

6.webpack打包原理