前端面试题
1.解释重绘与重排
重绘
- *(repaint或redraw)*:当盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来之后,浏览器便把这些原色都按照各自的特性绘制一遍,将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
重排
- ****(重构/回流/reflow)****:当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。
- 重绘和重排的关系:在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。
- 重排必定会引发重绘,但重绘不一定会引发重排
2.获取点击元素的下标
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
3.闭包及使用场景
闭包
- 闭包是指有权访问另一个函数作用域中的变量的函数
- 如何从外部读取函数内部的变量,为什么
- 闭包:f2可以读取f1中的变量,只要把f2作为返回值 ,就可以在f1外读取f1内部变量
- 原因:f1是f2的父函数,f2被赋予了一个全局变量,f2始终存在内存中,f2的存在依赖f1,因此f1也始终存在内存中,不会在调用结束后,被垃圾回收机制回收。
function f1(){
var n = 123;
function f2(){ //f2是一个闭包 alert(n)
}
return f2;
}
js链式作用域:子对象会一级一级向上寻找所有父对象的变量,反之不行。
闭包使用场景
setTimeout
回调
封装变量
节点循环绑定click事件
4.什么时原型、原型链?
原型
- 所有的函数都有一个特殊的属性prototype(原型),prototype属性是一个指针,指向的是一个对象(原型对象),原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象,这些对象实例都可以共享构造函数的原型的方法。
原型链
-
原型链是用于查找引用类型(对象)的属性,查找属性会沿着原型链依次进行,如果找到该属性会停止搜索并做相应的操作,否则将会沿着原型链依次查找直到结尾。常见的应用是用在创建对象和继承中。
-
①所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链
5.类的创建与继承
类的创建
- 类:类是对象的类型模板,例如,定义
Student
类来表示学生,类本身是一种类型,Student
表示学生类型,但不表示任何具体的某个学生; - 实例:实例是根据类创建的对象,例如,根据
Student
类可以创建出xiaoming
、xiaohong
、xiaojun
等多个实例,每个实例表示一个具体的学生,他们全都属于Student
类型。
ES6中引入Class(类)的概念,是一种构造函数的写法
类和构造函数的区别
1.函数声明可以被提升,而类声明不能被提升
2.类声明中的所有代码将自动运行在严格模式下
3.在类中,所有原型上的方法都是不可枚举的
4.每个类都有一个名为[Construct]的内部方法,如果没有会自动创建一个空的construtor
5.使用除关键字new以外的方式调用类的构造函数会导致程序抛出错语
6.在类中修改类名会导致程序报错
类的继承
- Class 可以通过
extends
关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。 - 父类的静态方法,也会被子类继承。
在JavaScript中,这个概念需要改一改。JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。
继承是从原型继承下来的
所谓继承关系不过是把一个对象的原型指向另一个对象而已。
6.创建对象的方式
- var = new Object()
- var object = { }
- function object() {} 工厂模式
- 构造函数
- 原型模式
- 混合模式(构造函数模式+ 原型模式)
7.深拷贝
浅拷贝
- 只复制指向某个对象的指针,而不是复制对象的本身,新旧对象还是共享同一块内存
深拷贝
- 它会创造出一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qRFC4AJR-1588873582485)(C:\Users\langteeth\AppData\Roaming\Typora\typora-user-images\1583425850070.png)]
8.什么是Promise
- 1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作promise,帮助我们处理队列
9. r o u t e 和 route和 route和router的区别?
- 1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
- route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
10.vue常用的修饰符?
事件修饰符
.stop
按键修饰符
- !-- 只有在
key
是Enter
时调用vm.submit()
--> <input v-on:keyup.enter=“submit”
11.vue中 key 值的作用
- Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
12. 什么是vue的计算属性?
- 我们己经可以搭建出一个简单的 Vue 应用,在模板中双向绑定一些数据或表达式了。但是表达式如果过长,或逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护
- getter 和 setter 方法
每一个计算属性都包含一个getter
方法和一个setter
方法。
13.vue路由的钩子函数有哪些,参数含义是什么?
-
router.beforeEach((to, from, next) { }
-
beforeEnter(to, from, next){
console.log(‘beforeEnter’)
next() //正常跳转,不写的话,不会跳转
} -
beforeRouteEnter(to, from, next ){}
-
beforeRouteUpdate(to, from, next){ }
-
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
` 守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调函数。