前端面试题

前端面试题

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.类的创建与继承

类的创建

1. 类：类是对象的类型模板，例如，定义Student类来表示学生，类本身是一种类型，Student表示学生类型，但不表示任何具体的某个学生；
2. 实例：实例是根据类创建的对象，例如，根据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.$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){ }

• 完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
      ` 守卫 (2.2+)。
  12. 在路由配置里调用 beforeEnter。
  13. 解析异步路由组件。
  14. 在被激活的组件里调用 beforeRouteEnter。
  15. 调用全局的 beforeResolve 守卫 (2.5+)。
  16. 导航被确认。
  17. 调用全局的 afterEach 钩子。
  18. 触发 DOM 更新。
  19. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。