一、如何确认this值
1、全局执行环境：严格模式或非严格模式下都指向全局对象（window）
2、函数内部：
2.1、直接调用
严格模式下：undefined
非严格模式下：全局对象（window）
2.2、对象方法调用
严格模式或非严格模式下都指向调用者
3、开起严格模式
'use strict'
注意'use strict' 放置在全局或者函数最顶端
二、改变this指向
1、调用时指定this
call(this指向，参数1，参数2)
apply(this指向，[参数1，参数2])
2、创建时指定this
bind(this指向,参数1)
箭头函数
function func(A,B){
console.log(this)
console.log(A,B)
}
let person = {
name:'haha'
}
1、调用时改变this指向(call(),apply())
func.call(person,1,2) //{name:'haha'} 1,2
func.apply(person,[3,4]) //{name:'haha'} 3,4
2、创建是改变this指向(bind(),箭头函数)
const bindfunc = func.bind(person,666)
bindfunc(888) // {name:'haha'} 666,888
const food = {
name:'西蓝花炒蛋'
eat(){
console.log(this)
setTimeout(()=>{
console.log(this)
})
}
}
food. eat() //food food 如果此处箭头函数为普通函数则指向全局对象（window）
二、javascript设计模式
1、工厂模式：
表现形式为调用即可返回新对象的函数。
例子：vue3-createApp、axios-create
2、单例模式：
在使用这个模式时，单例对象整个系统需要保证只有一个存在。
3、观察着模式：
在一个对象间定义一个一对多的依赖，当对象状态改变时，所有依赖的对象都会收到通知。
例子：vue的watch
4、发布订阅模式:
和观察着模式相识，区别在于观察着模式不存在中间商（事件总站），发布订阅模式存在中间商（事件总站）。
例子：vue的eventBus
5、原型模式：
通过复制一个已有的实例，来返回一个新的实例，而不是创建一个新的实例。
例子：object.create 将对象作为原型，创建新对象
6、代理模式：
为一个对象提供一个占位符，以便控制对他的访问
例子：缓存代理：第一次查询的数据通过接口获取，重复查询通过缓存获取
7、迭代模式：
遍历
例子：for ...in.. for...of...
区别：for...in... 遍历出来的是索引，继承而来的也可以遍历出来，for...of...遍历出来的是值，继承而来的无法遍历,for...of...不能遍历对象
三、防抖
防止js高频渲染页面时出现的视觉抖动（卡顿）
例子：echarts图表缩放窗口大小时重新渲染、搜索框绑定input事件时
使用场景：触发高频的事件中，执行消耗性能的操作，连续操作之后只在最后一次生效。
高频事件：resize、input、scroll、keyup
消耗性能操作：操纵页面、网络请求
手写防抖实现：
image.png
库：lodash 中的debounce方法
使用：
image.png
四、节流
高频触发造成的性能浪费
使用场景：触发高频的事件中，执行消耗性能的操作，连续操作之后单位时间内只只有一次生效。
（防抖相当于回城，节流相当于技能cd）
手写节流实现：
image.png
库：lodash 中的throttle方法
使用：
image.png
