js常见面试题

1. 什么是对象? 面向对象的三大特性?

对象是属性和方法的集合，面向对象的三大特性是封装，继承，多态

2. 对象的创建的方式有哪些？，访问属性的方式有哪些

常见的有

1. 字面量创建的方式 比如 let obj = {name:1,age:100};
2. 实例化对象的方式 let obj = new Object();
3. 构造函数方式
4. 工厂模式创建对象

3. 对象的属性怎么访问，有什么区别？

对象的属性可以通过.或者[]来访问，他们有以下区别:

• ..访问的属性名必须符合标识符命名规范，.后面不能跟变量，属性名不能跟引号
• [] 访问的属性名可以不符合标识符规范，可以使用变量，比如for循环中
• [] 访问的属性名可以不符合标识符规范，可以使用变量，比如for

4. 改变this指针指向的方法有哪些?

call，apply， bind方法都可以改变函数的this指向

• call方法apply调用后函数会立即执行，bind方法不会立即执行函数
• call方法和bind方法后面跟的是参数列表，apply的参数据是一个数组

5. 什么是原型？

每一个构造函数都有一个prototype属性，这个属性称之为函数的显示原型，

构造函数实例化后或者对象都有一个__proto__属性，称之为对象的隐式原型，后续原型链就是通过proto查找属性的。

6. 什么是原型链?

当我们访问对象的某个属性时，会先从当前对象中查找，如果没有找到的则继续去对象的proto隐士原型中去查找，，如果还没找到则继续向上级对象的原型中查找，直到找到顶层Object对象，如果没有找到返回undefined，这种通过对象的__proto__隐式原型查找属性的链条关系就称之为原型链。

7. prototype,proto,constructor 三者之间的关系?

1. 每个构造函数都有一个Prototype属性，prototype有一个constructor指向构造函数本身
2. 当构造函数实例化以后，有proto属性，proto指向构造函数的prototype属性。

8. ES5继承的方法有哪些？

1. 原型链继承，把父方法的实例化对象赋给字方法的原型，不仅可以使用父方法自身的属性，也可以使用父方法原型中的属性，不能传参
2. 构造函数继承，在字方法使用call或者apply关键字通过改变this指向继承，可以传递参数，不能使用父方法原型中的属性

9. 简单说一下ES6的class类

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已, 他的本质还是函数，可以用typeof检测

10. 简单说一下class类相关的关键字

class类名关键字，
constructor class类的构造函数
this 关键字则代表当前实例对象
extends 类继承的关键字
super 调用父类方法的构造函数

11. JS的常见模块化规范有哪些?

1. AMD异步模块加载规范
2. commonJS规范
3. ES新增的Moudle规范

12. export和export default 有什么不同?

export default 抛出一整个对象，不需要加{ } 引入不需要{} 可以跟抛出的对象名字不一致
export 抛出跟一个{} 引入的时候需要使用{}引入，名字必须跟抛出的名字一致，可以选择部分引入

13. 原生Ajax创建的步骤

1. 实例化一个xmlhttpRequst对象信息
2. 使用open方法创建连接，指定请求数据的方式
3. 如果是post请求使用setRequestHeader设置请求头信息
4. 使用onreadystatechange事件监听请求状态的改变回调
5. send发送请求数据

14. jquery的ajax的参数有哪些?

$.ajax({
  url: "url地址",
  type:"请求方式get/或者post",
  data:"传递数据",
  dataType:"传送数据类型",
  async: "true异步，false同步，默认同步",
  success:function(res){
  //成功事件回调
  },
  error:function(error){
  //失败的事件回调
}
}}

15. Promise的概念，Promise有几种状态

Promise是ES6中的新增的异步处理方法，主要是用于解决ES5中使用回调函数产生的地狱回调的问题
Promise有三种状态,pedding准备中，fullfiilled已完成， rejected失败，状态只能有准备中=>已完成 或 准备中=>失败

16. Promise有哪些参数

参数两个： resolve和reject 执行resolve参数方法会调用then方法，执行reject参数方法调用catch方法

17. Promise的常见方法

then方法执行成功后调用的方法
catch方法执行失败调用的方法
all() 参数是个数组，执行多个Promise对象，必须所有的对象状态执行完后才会变成已完成的状态
race()方法 执行多个Promise对象，只要有一个对象状态是已完成，对象的状态就是已完成。

18. set常用的方法有哪些

set通过new实例化常用的方法有:

• 为集合添加数据 add方法 ： set.add(元素)
• 获取集合数组的属性 size 使用 ： set.size
• delete()删除数据 ： set.delete(元素)
• has()判断集合中是否含有某个数据 ： set.has(56)
• clear() 清空集合 set.clear()

19. map常用的方法有哪些?

map通过new Map创建一个对象：

• map.set("name","zs").set("age",18) -- 添加数据
• map.has("key") -- 判断是否含有某个数据 根据键操作（返回布尔值）
• map.delete("key") -- 删除数据 根据键
• map.clear() -- 清空集合

20. ES6的新特性有哪些?

• let const 定义块级作用域
• 箭头函数
• 解构赋值
• 扩展运算符
• 常见的数组的方法，伪数组
• 模板字符串
• class类
• 参数设置默认值
• promise
• for...of for...in

21. vue中常见的指令和含义

• v-text 渲染内容到节点中，不解析html
  v-html 渲染内容到绑定的节点中，解析html
  v-if 通过条件判断节点是否显示
  v-show 通过条件判断节点是否显示
  v-on 绑定事件，可以简写为@
  v-bind 绑定属性 可以简写:
  v-for 循环列表指令
  v-model 表单双向绑定指令

22. v-if和v-show的区别？

当条件改变的时候v-if是通过DOM节点的添加和删除 控制结点的显示隐藏，v-show是通过css样式控制结点的显示隐藏，
v-if的切换成本比较高，v-show的渲染成本比较高，所以当切换的频繁的时候建议使用v-show，如果初次渲染数据比较多，建议使用v-if

23. vue中key的作用是?

唯一标识DOM结点，可以提高vue的渲染效率，也可以避免因DOM结点的插入而导致DOM更新错误的问题。

24. Vue中常见的修饰符及含义

.stop 阻止事件冒泡
.capture 设置事件捕获
.prevent 阻止默认事件
.self 之间作用在本身触发
.once 事件只触发一次
.navtive 组件触发的是原生的js事件
键盘修饰符操作
.enter, .space, .....等
.number 修饰符可以将 输入的值转化为Number类型
.trim 修饰符会自动过滤掉输入的首尾空格
.lazy 把v-model改为失去焦点触发

25. Vue中过滤器定义

过滤器分为全局过滤器和局部过滤器，全局过滤器可以在任何页面调用，局部过滤器只能在当前组件调用，过滤器使用管道符|调用，可以串联使用
全局过滤器定义: Vue.filter("过滤器名字",()=>{});
局部过滤器 filters:{过滤器名字}

26. vue中生命周期

创建阶段

• beforeCreate() 创建前阶段，这个时候还不能使用data中的数据
• created() 创建完成 最早可以使用data中的数据
  挂载阶段
• beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted: 挂载完成， DOM节点挂载到实例上去之后调用该钩子。
  更新阶段
• beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• updated：数据更新完成并且DOM更新完成后调用
  销毁阶段
• beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定

27. 什么是虚拟DOM

Vue中不推荐使用DOM操作，为了提高渲染效率使用虚拟DOM，虚拟DOM就是用js对象来表示真实的DOM结构，当数据发生变化的时候重新创建一个新的DOM树结构，比较新旧DOM树的差异， 最终更新的真实的DOM节点中去。

28. 怎么理解MVVM架构模式

M 数据模型，负责逻辑
V 视图 负责页面渲染
Vmodel底层操作，负责视图和数据的交互，当数据发生变化通知视图修改

29. 如何理解Vue中双向绑定原理

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
VUE双向数据绑定，其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法，当获取数据的时候，调用get方法，修改data中的数据的时候调用set方法，通过watcher监听器去更新视图，完成数据的双向绑定。

30. v-bind如何绑定class和style

v-bind通常用来绑定属性的，动态地绑定一些 class 类名或 style 样式

变量形式: v-bind：class = "变量"，变量形式 ,这里的变量的值，通常是在css定义好的类名

数组语法：v-bind：class= "[变量1，变量2]" ，数组形式，其实跟上面差不多，只不过可以同时绑定多个class名；

对象语法：v-bind:class = {classname1：boolean，classname2：boolean}，对象形式，这里的boolean通常是一个变量，也可以是常量、计算属性等，表达式为真的时候显示对应的class名字

用v-bind同样可以绑定style, key是属性，value对应属性对应的值m, vue会把驼峰命名法自动转换为-小写字母，如fontSize会转换为font-size

31. 组件中引入的步骤？

1. import 导入子组件的路径，定义组件的名字
2. components中注册子组件，不能是内置标签名字
3. 父组件中挂载子组件的标签

32. 父传子组件通信

1. 父组件中子组件的标签上定义一个自定义的属性
2. 子组件中通过props接受父组件传递过来的数据内容，props可以是数组也可以是对象，
3. props可以校验数据类型： String,Boolean,Number, Object, Array, Function Symbol
4. default 设置默认值的内容

33. 子传父组件通信

1. 子组件中绑定事件，调用自定义的方法，方法中this.$emit()向父组件传递数据
2. $emit() 有两个参数，第一个参数自定义事件名，第二个要传递的数据
3. 父组件的子组件标签绑定自定义事件，调用方法，方法的参数就是子组件传递过来的数据

34. props可以校验的数据类型

number数字，string字符串，boolean布尔值，Array, function symbol, object对象

35. 兄弟组件通信的流程?

1. 借助共同的父组件传递数据，先子传父，在父传子
2. eventBus总线程方式
3. 定义一个eventBus.js对象抛出一个空的Vue对象
4. 传递数据的组件中导入bus文件，通过bus.$emit()传递数据
5. 接受数据的组件导入bus文件，通过bus.$on接受传递的数据