web前端知识总结

1、This关键字
1.正常函数，this 永远指向调用它的对象，没有对象调用this指向window
2.构造函数中this指向实例化出来的对象
3.箭头函数没有自己的 this，当在内部使用了 this时，它会指向最近一层作用域内的 this
4.在标签中绑定事件，this指向事件的拥有者
2、改变this指向
call和apply使用构造函数调用，立刻执行，临时改变this指向
bind在调用后返回一个新的对象，需要再重新执行一次，永久改变this指向
3、怎么实现继承
1、使用对象冒充
2、call（）
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数
3、apply（）
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数
4、通过原型链
5、混合方式
混合了call方式、原型链方式
4、你了解的遍历数组的方法,哪个有返回值
1.for和while
2.for in 效率最差，会把对象属性都遍历一遍
3.for of 语句只遍历可迭代对象的数据
区别：for of 和 for in的区别for-in 语句以原始插入顺序迭代对象的可枚举属性。
4.数组自带的循环遍历
Array.every遇到有不满足的会提前终止整个循环场景
Filter: 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。true表示保留该元素
Map: 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
Foreach
Some:检查数组中是否含有某个东西
有返回值：map返回一个新数组，every和some返回布尔值，filter返回满足条件的新数组
5、如何遍历对象中的key值
Object.keys(对象名)
6、谈一下事件对象
Event 包含了所有对象的相关信息，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
7、冒泡和捕获
冒泡：同一事件，先子节点再父节点
捕获：同义事件，先父节点再子节点
在哪里用过冒泡：委托事件里
8、什么是事件委托
子元素的事件交由父元素实现，通过事件对象的target属性获取对应的子级标签
9、为什么要用委托模式
1.子元素有很多个，进行同样的dom操作需要触发很多次
2.子元素是动态渲染的
委托模式的原理：冒泡
10、什么时候用dom2级事件
DOM2同一个事件可以绑定多次，而且火狐的滚轮事件只能使用DOM2
// DOM0和DOM2的区别
1、DOM0同一个事件只能实现一次，DOM2同一个事件可以绑定多次
// 2、DOM0基本都是冒泡，DOM2可以指定冒泡或捕获
3、不是所有的事件都支持 例如：火狐的滚轮事件只能使用DOM2
11、vue数据绑定的原理

12、vue双向数据绑定

13、谈一下vue的虚拟DOM
虚拟DOM不是真实的DOM操作，如果页面中需要大量的重复的DOM操作，我们将这些操作压缩到一个对象里，在这个虚拟的对象里完成一系列的DOM操作，只需要把最终的结果通过一次DOM操作渲染到页面上，可以节省内存空间。
14、谈一下MVVM

15、Vue中组件的通信
Bus可以作为兄弟组件之间传值
16、keep-alive
Include:将会被缓存。Exclude：不会被缓存。
include 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存
可以结合 router-view使用 放在里面不活动的组件不会被销毁，会被缓存
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated:页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
17、computed和watch
computed 也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护
watch 是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。
18、路由守卫
在组件/页面条转前的拦截操作
19、nextTick
当数据更新了，在dom中渲染后，自动执行该函数
20、Vue的生命周期
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

21、$router和$route
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等。22、$attrs和$listeners
$attrs:vue多层传递，用来获取父组件中的属性包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。意思就是父组件往子组件传没有在props里声明过的值时，子组件可以通过$attrs接受，且只包含父组件没有在props里声明的值。
$listeners:它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过v-on="$listeners" 将事件监听指向这个组件内的子元素（包括内部的子组件）。
23、vuex的应用
vuex是实现组件全局状态（数据）管理的一种机制，可以方便数显组件间的数据共享
mutation：用于变更state中的数据，通过commit触发。
getter：对store中的数局进行加工处理成新数据，类似于计算属性，通过this.$store.getters.valueName被动执行
24、如何阻止默认和阻止冒泡
Js中:
阻止冒泡:event.stopPropgation()
阻止默认:event.preventDefault()
Vue中：
阻止冒泡：@click.stop
阻止默认：@click.prevent
25、微任务和宏任务
而宏任务一般是：包括整体代码script，setTimeout，setInterval。
微任务：Promise，process.nextTick。
26、object.defineProperty
数据劫持
27、防抖节流
防抖：在执行过程中，触发多次也只会执行多次
节流：每隔固定时间执行一次