Js 常见面试题_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 三者之间的关系?

每个构造函数都有一个Prototype属性，prototype有一个constructor指向构造函数本身

当构造函数实例化以后，有proto属性，proto指向构造函数的prototype属性。

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

原型链继承，把父方法的实例化对象赋给字方法的原型，不仅可以使用父方法自身的属性，也可以使用父方法原型中的属性，不能传参

构造函数继承，在字方法使用call或者apply关键字通过改变this指向继承，可以传递参数，不能使用父方法原型中的属性

9. 简单说一下ES6的class类？

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

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

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

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

AMD异步模块加载规范

commonJS规范

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接受传递的数据

36.渲染过程中遇到 JS 文件怎么处理

JavaScript的加载、解析与执行会阻塞文档的解析，也就是说，在构造DOM时，HTML解析器若是遇到了JavaScript，那么它会暂停文档的解析，将控制权交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果我们想首屏渲染的越快，就越不应该在首屏就加载js文件，这也是建议将script标签放在body标签底部的原因。

当然，并不说script标签必需放在底部，因为可以给script标签添加defer或者async属性。

CSS 阻塞文档解析

理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，
然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，
如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。
 
所以如果浏览器尚未完成 CSSOM 的下载和构建，
而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。
也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。

为什么js放在底部，css放在顶部？

浏览器会在下载完成全部css之后才对整个页面进行渲染，因此最好的方式是将css放在页面最上面，让浏览器尽快启动下载css。

JavaScript则相反，浏览器在加载JavaScript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此JavaScript最好放在页面最下面。但如果页面解析时就需要用到JavaScript，这是放在最底部就不合适了。

CSS和JS引入位置说明？

1、CSS资源尽量放在head部分

因为CSS解析和DOM解析可以同时进行，所以CSS资源放在头部不会影响DOM解析，而且放在头部也会优先开始加载CSS样式，在渲染DOM的时候也已经知道了自己的样式，所以一次就可渲染成功。如果将CSS放在底部，那么会优先渲染DOM，而浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，也就是说渲染引擎会边解析、边渲染、边布局显示，已尽快减少白屏时间，所以随着CSS规则树的构建，还需要对之前渲染树重新渲染，可能会导致回流和页面跳动。

2、JS资源尽量放在body结束标签之前

JS放在body标签结束之前，首先可以确保能取到需要操作的DOM对象，也可缩短因JS阻塞而造成的白屏时间，提升用户体验。因为如果把JS放在head部分，JS运行会阻塞DOM树和CSS树构建，导致白屏时间延长，影响用户体验。

3、CSS资源尽量优先于JS资源引入

因为JS在运行时，如果需要操作CSS，但该CSS还没有下载和构建，则首先会阻塞JS线程，然后开启新线程去下载解析构建CSS规则树，再执行JS代码。
 

37.js操作DOM的方法总结整理

DOM（Document Object Model）文档对象模型。

DOM为HTML提供了结构化表示方法，定义了访问和处理文档结构的方法规范。

HTML可以理解为是由DOM节点构成的集合，主要由元素节点、文本节点、属性节点三部分构成。
js操作DOM的方法 ？ 

js操作dom主要分对元素节点、文本节点、属性节点的增删改查：判断元素节点类型

新增节点

var newNode=document.createElement("div");  //创建一个元素节点
var textNode=document.createTextNode("hello world!");  //创建一个文本节点
var cloneNode =newNode.cloneNode(true); //克隆一个节点，参数true表示会克隆当前节点以及他的所有子节点，flase表示只克隆当前节点，默认为false
document.createDocumentFragment();//创建文档对象变量，主要用来临时存储节点，大量操纵dom时性能会有很大的提升

删除节点

var deleteNode = parentNode.removeChild(item);//删除指定的子节点，并返回   deleteNode只是在dom树中删除了，但在内存中还可以访问

修改节点

node.appendChild(newNode);// 在指定元素后面新增子节点
parentNode.insertBefore(newNode,node);  //在parentNode的子节点newNode前面插入newNode节点
parentNode.replaceChild(newNode,oldNode);//用oldNode节点替换parentNode的子节点newNode

查找节点

var parentNode=document.getElementById("list");//返回第一个带有指定id的元素
var classList=document.getElementsByClassName("wrapper"); //返回所有带有指定class的元素的集合(返回数组形式)
var tagList=document.getElementsByTagName("li");//返回所有带有指定标签的元素的集合(返回数组形式)   // *表示查找所有标签
var list=document.querySelector(".wrapper");//返回第一个带有指定id或class的元素
var allList=document.querySelectorAll(".wrapper");//返回所有带有指定id或class的元素
通过节点之间的关系来查找元素节点，dom节点之间关系图以及操作方法如下
 
element.parentNode    //返回该节点的父节点，每个节点都会有一个父节点，Element的父节点可能是Element，Document或DocumentFragment；
element.parentElement    //返回父节点，只有父节点为元素节点时返回，否则返回null
 
element.children    //返回所有元素子节点的集合，仅包含元素节点
element.childNodes    //返回当前元素所有的子节点，包含元素节点，文本节点，属性节点。（注释、空格、换行等也会被当作一个节点）
 
element.firstChild    //返回当前元素的第一个子节点，该子节点可以是任意节点，如果没有则返回null
element.firstElementChild    //返回当前元素的第一个子节点，该子节点只可以是元素节点，如果没有则返回null
element.lastChild    //返回当前元素的最后一个子节点，该子节点可以是任意节点，如果没有则返回null
element.lastElementChild    //返回当前元素的最后一个子节点，该子节点只可以是元素节点，如果没有则返回null
 
element.previousSibling    //返回该节点的前一个兄弟节点
element.previousElementSibling    //返回该节点的前一个元素兄弟节点
element.nextSibling    //返回该节点的后一个兄弟节点
element.nextElementSibling    //返回该节点的后一个元素兄弟节点

修改元素属性

var node =document.getElementById("list");
// classList方法操作元素的class属性
node.classList.add("test"); //给node节点添加一个class
node.classList.remove("test");//删除node节点名为test的class
node.classList.replace("old-class","new-class");//替换node节点的class
var hasClass = node.classList.contains("test");//node节点是否存在给定的class，如果存在则返回 true，否则返回 false。
node.classList.toggle("test")//如果节点已经存在给定的class则删除，如果没有则添加
 
node.setAttribute("id","123");//给node节点设置id=123
var id = node.getAttribute("id");//获取node节点的id属性值
var hasAttr =node.hasAttribute("id");//判断node节点是否存在id属性
 
// dataset方法获取元素的data- 属性值
var dataId=node.dataset.id; //获取node节点的data-id属性值
var dataName=node.dataset.userName;//类似data-user-name属性必须使用驼峰式来访问
'id' in node.dataset     // 判断node节点是否有data-id属性
 
// style方法修改元素的样式
node.style.color = 'red';   //设置color样式
node.style.setProperty('font-size', '16px');  //设置font-size样式
node.style.removeProperty('color');  //移除color属性

 

获取元素类型

element.nodeType 
 
1元素节点
2属性节点 
3文本节点 
4CDATA节点 
5实体引用名称节点 
6实体名称节点
7处理指令节点  
8注释节点  
9文档节点  
10文档类型节点 
11文档片段节点 
12DTD声明节

获取当前节点的文本值

element.innerHtml  //返回当前节点的所有文本包含html
element.innerText //返回当前节点及所有后代节点的文本值,不包含html