前端面试题总结

1.什么是原型链？

当查找自身是否有某属性，若没有则依次向它的上级查找，直到Object为止，最后返回null

官方解说：

原型链是一种查找规则 为对象成员查找机制提供一个方向

2.什么是闭包？

闭包就是能够读取其他函数内部变量的函数

3.如何封装组件？

封装组件是前端开发中一个非常常见的任务，以下是一些封装组件的方法：

定义组件API：在设计组件时，首先需要考虑它的使用方式。定义组件API有助于其他开发人员快速理解如何使用组件，并确保组件在不同情况下具有一致的行为。

使用props传递数据：在Vue中，组件通过props属性接收父组件传递的数据。在定义组件时，可以指定props属性的类型、默认值和必需性等。

使用slot插槽分发内容：插槽是Vue中一种非常有用的功能，它可以允许组件的使用者插入内容到组件中。通过使用插槽，可以增加组件的灵活性，允许组件的使用者在不同的情况下自由地定制组件的外观和行为。

使用事件向外通信：组件通常需要与外部环境进行交互。Vue中通过使用自定义事件可以实现组件向外部环境通信的功能。通过定义事件并在组件中触发该事件，可以允许外部环境对组件进行操作。

使用mixins实现代码复用：Vue中提供了mixins功能，可以将一个或多个属性和方法混合到组件中。通过使用mixins，可以将常用的功能提取到可重用的模块中，减少代码的重复性。

使用插件扩展Vue：Vue插件是一种可以扩展Vue功能的机制。通过编写插件，可以为Vue添加全局功能、指令、过滤器等。使用插件可以提高开发效率，减少代码量。

使用动态组件：Vue中提供了动态组件的功能。通过使用动态组件，可以允许组件的使用者在运行时根据不同的条件选择不同的组件。

4.单页应用怎么跨页面传参

URL参数传递：可以通过在URL中添加参数的方式来实现页面间传递数据。例如：/page?id=123&name=xxx，在目标页面可以通过router.query.name来获取参数。

localStorage/sessionStorage：可以将需要传递的数据存储在localStorage/sessionStorage中，在目标页面再次读取该数据。

Vuex：Vuex是Vue.js的状态管理库，可以在不同的组件中共享数据。可以将需要传递的数据存储在Vuex中，在目标页面中再次读取该数据。

EventBus：EventBus是Vue.js的一个事件管理库，可以在不同的组件中广播和监听事件。可以通过EventBus在不同页面之间传递数据。

PostMessage：可以通过window.postMessage()方法向另一个页面发送消息，目标页面再通过window.addEventListener()监听message事件来获取传递过来的数据。

5.权限的设计

基于角色的访问控制：例如，管理员角色可以访问所有资源，而普通用户角色只能访问受限资源。在前端应用程序中，可以使用路由守卫和组件级别的访问控制来实现基于角色的访问控制。

基于资源的访问控制：这是一种更细粒度的方法，例如，某个特定的页面只允许管理员访问。在前端应用程序中，可以使用路由守卫和组件级别的访问控制来实现基于资源的访问控制。

基于功能的访问控制：这是一种将权限与应用程序的特定功能相关联的方法。例如，某个特定的按钮或操作只允许管理员执行。在前端应用程序中，可以使用条件渲染和事件处理程序来实现基于功能的访问控制。

6.箭头函数有哪些限制

无法使用arguments对象；

无法使用new关键字调用函数，箭头函数没有自己的this值，它会捕获其所在的上下文中的this值；

无法使用yield关键字，因此箭头函数不能用作generator函数；

7.vue怎么实现双向绑定

Vue使用了ES5中的Object.defineProperty()方法来实现数据的劫持，通过get和set方法来实现对数据的监听，从而实现了双向绑定。当数据发生变化时，Vue会自动更新DOM中的数据。

8.说一下浏览器如何渲染页面的？

浏览器拿到HTML，先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。