typeof
상속하는 방법에는 여러 가지가 있고 인터넷에 많은 답변이 있습니다. 이 다섯 가지 방법을 요약하고 대략 설명했습니다.🎜🎜🎜 1) 프로토타입 체인 상속 🎜🎜🎜프로토타입을 사용하면 사용자 정의 유형을 만들지 않고도 기존 개체를 기반으로 개체를 만들 수 있습니다. object() 함수 내에서 임시 생성자가 먼저 생성된 다음 전달된 객체가 생성자의 프로토타입으로 사용되고 마지막으로 이 임시 유형의 새 인스턴스가 반환됩니다. 키 코드: Star.proyotype = new Person(), Star.proyotype.constructor = Star 단점: 상위 클래스의 메소드만 상속 가능🎜🎜🎜2) 생성자 상속 차용🎜🎜🎜 하위 클래스 생성자는 내부적으로 상위 유형 생성자를 호출합니다. apply() 및 call() 메서드를 사용하여 새로 생성된 객체에서 생성자를 실행할 수 있습니다. 키 코드: Person.call(this, age, name) 단점: 재사용이 불가능하고 상위 클래스의 속성만 상속할 수 있습니다🎜🎜🎜3) 조합 상속🎜🎜🎜을 pseudo-라고도 합니다. 고전적인 상속. 이는 두 세계의 장점을 모두 활용하기 위해 프로토타입 연결 기술과 생성자 차용 기술을 결합하는 것을 의미합니다. 프로토타입 체인을 사용하여 프로토타입 속성과 메서드를 상속하고 생성자를 빌려 인스턴스 속성을 상속합니다.
프로토타입에 메서드를 정의하여 함수 재사용을 실현할 뿐만 아니라 각 인스턴스가 고유한 속성을 갖도록 보장합니다. 그러나 작은 버그가 있을 것입니다. 나이와 이름의 복사본이 두 개 있고 그 중 하나는 정의되지 않은 값을 갖습니다. apply() 및 call() 때문입니다. 내부 메소드는 자동으로 한 번 더 호출됩니다. 🎜🎜🎜4) 기생 조합 상속🎜🎜🎜생성자를 빌려 속성을 상속하고, 프로토타입 체인의 하이브리드 형태를 통해 메서드를 상속합니다. 기본적으로 기생 상속을 사용하여 상위 유형의 프로토타입에서 상속한 다음 결과를 하위 유형의 프로토타입에 할당합니다. 포괄적인 상속 방법으로 인식되고 있습니다. 아직은 간단한 것만 알고 있습니다. 키 코드는 Star.prototype = Object.create(Person.prototype)입니다. )🎜 🎜🎜5) ES6의 클래스 클래스 상속 방법 🎜🎜🎜은 class 키워드를 확장 키워드와 함께 사용하여 상속을 달성할 수 있습니다. class 키워드는 클래스를 선언하기 위해 ES6에서 도입되었으며, 클래스(class)는 extends를 통해 상위 클래스의 속성과 메서드를 상속받을 수 있으며, super는 프로토타입을 가리킨다. 상위 클래스의 객체는 상위 클래스의 속성과 메서드를 호출할 수 있으며, super 키워드는 하위 클래스의 생성자 메서드에 있어야 하며 이 앞에 나타나야 합니다. 🎜🎜4.js 데이터 유형 🎜🎜🎜🎜 데이터 유형은 일반적으로 두 가지 유형으로 구분됩니다. 🎜🎜
- 기본 데이터 유형: 문자열( String), 숫자, 부울, Null, 정의되지 않음, 기호(nbs)
- 복잡한 데이터 유형: 객체, 배열, 함수(함수)🎜기호는 속성 이름 충돌을 피하기 위해 고유한 값을 나타냅니다.
🎜5. 데이터 유형 감지🎜🎜
- 🎜
typeof 감지 문제: null 또는 배열은 객체로 인쇄됩니다🎜
instanceof(복잡한 데이터 유형만 감지 가능)
반환 값은 true 또는 false입니다.
관련 생성자가 프로토타입 체인에 있는 한 true이고 그렇지 않으면 false입니다. 이는 배열
Object.prototype.toString.call인지 감지하는 데 사용할 수 있습니다. (감지할 데이터 값)Object.prototype.toString.call(要检测的数据值)
为什么要借 Object.prototype.toString,因为自己的 toString 被自己原型重写了,得不到类似[object Object]
6、如何检测一个数据是数组
var arr = [2, 3, 4]
console.log(arr instanceof Array)
console.log(Array.isArray(arr))
console.log(Object.prototype.toString.call(arr))
로그인 후 복사
7、深拷贝和浅拷贝
浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝了地址
深拷贝：层层拷贝，每一级别的数据都会拷贝
浅拷贝方法：
1. 使用 lodash 浅拷贝 clone 方法，让他们俩指向不同地址
2. 使用 Object.assign 方法
3. 使用es6语法的 ... 拓展运算符
-
深拷贝方法：
1. 使用JSON.parse(JSON.stringify(obj)) ，缺点：当对象有方法和undefined属性的时候会丢失
2. 使用递归
- 如果存在
循环引用就会出现堆栈溢出
- 解决思路：把处理好的对象存起来，在处理新的对象的时候，会现在这个存的地方找一找有没有处理好，如果有就直接返回就行了
let obj = {
name: "zs",
age: 20,
father: [2, 3, 4],
};
function deepClone(target) {
//这一行如果不用三元判断 如果是数组会有bug会被拷贝成伪数组对象
let tempObj = Array.isArray(target) ? [] : {};
for (let key in target) {
if (typeof target[key] === "object") {
tempObj[key] = deepClone(target[key]);
} else {
tempObj[key] = target[key];
}
}
return tempObj;
}
let obj1 = deepClone(obj);
console.log(obj1);로그인 후 복사
8、slice和splice的区别
1.splice改变原数组，slice不改变原数组。
2.slice会返回一个新的数组，可以用于截取数组
3.splice除了可以删除之外，还可以替换，添加数组
4.splice可传入3个参数，slice接受2个参数
9、substr和substring的区别
10、let const var区别
let和const都是用来声明变量Object.prototype.toString을 빌려야 하는 이유, toString이 자신의 프로토타입에 의해 다시 작성되었고 [object Object]
不污染全局变量
var关键字声明变量
1.var关键字声明变量存在，变量提升的问题；
2.var声明的变量不存在块级作用域，如果是全局变量在任何地方都可以调用；
3.var声明变量如果名称重复了，后面声明的会将前面声明的覆盖掉；
let关键子声明变量
1.不存在变量提升，let声明变量不存在变量提升的问题：如果在let声明变量前调用该变量就会报错（提示初始化前无法访问该变量）；
2.块级作用域，let声明变量存在块级作用域（全局、函数、eval严格模式），只在当前的代码块中生效，如果在当前代码块以外调用就会报错（当前的变量没有定义）；
3.不影响作用域链的操作
4.不允许变量重复声明，let声明的变量是不允许重复声明的，如果同一个名称被重复声明了就会报错（当前的标识已经被声明了）；
const声明变量
1.const声明的变量也具有：不存在变量提升、块级作用域、不允许重复声明的特点；
2.const声明的变量都是常量（不允许改变的量），一旦声明就不允许被修改，如果修改就会报错--常数变量赋值
3.一般第三方的框架中会大量使用const声明变量，这样可以避免用户修改框架中的变量；
4.const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址와 같은 것을 얻을 수 없기 때문입니다.
6. 데이터가 배열인지 확인하는 방법
function debounce(func, delay) {
let timer = null // 计时器
return function (...args) {
clearTimeout(timer) // 清除上一次计时器
timer = setTimeout(() => {
// 重新定时
func.apply(this, args)
}, delay)
}
}로그인 후 복사
로그인 후 복사
얕은 복사:만 하나의 레이어가 복사되고, 더 깊은 객체 레벨은 주소만 복사됩니다
딥 복사: 레이어별로 복사되며, 각 레벨의 데이터가 복사됩니다
-
얕은 복사 방법:
1. clone 메서드를 사용하여 서로 다른 주소를 가리키도록 합니다 2. Object.sign 메서드를 사용합니다. - 3의
... 확장 연산자를 사용합니다. es6 구문
깊은 복사 방법: 1. JSON.parse(JSON.stringify(obj))를 사용하세요. 단점: 개체에 메서드와 정의되지 않은 속성이 있으면 손실됩니다2 . 재귀를 사용하세요
순환 참조가 있으면 스택 오버플로가 나타납니다해결책 아이디어: 새로운 객체를 처리할 때 이 저장소에서 제대로 처리되었는지 확인하게 되며, 있으면 바로 반환해주세요
🎜🎜
function throtte(func, time) {
let timer = null // 计时器
return function (...args) {
if (timer) return // 无视，直接返回
timer = setTimeout(() => {
func.apply(this, args)
}, time)
}
}로그인 후 복사
로그인 후 복사
🎜8. 슬라이스와 스플라이스의 차이점🎜🎜🎜둘 다 배열 삭제 코드> 방식입니다🎜🎜🎜1.splice는 원래 배열을 변경하지만, 슬라이스는 원래 배열을 변경하지 않습니다. 🎜2.slice는 배열을 가로채는 데 사용할 수 있는 새 배열을 반환합니다. 🎜3.splice는 삭제될 수 있을 뿐만 아니라 배열에 대체 및 추가될 수도 있습니다. 🎜4.splice는 3개의 매개변수를 전달할 수 있고, 슬라이스는 2개를 허용합니다. 매개변수🎜🎜9, substr과 substring의 차이점🎜🎜🎜🎜두 함수 모두 문자열을 가로채기🎜🎜🎜🎜substr은 다음과 같습니다. 시작 인덱스 번호는 지정된 길이의 문자열을 추출하기 시작합니다🎜🎜🎜🎜하위 문자열은 문자열🎜🎜🎜🎜10에서 지정된 두 인덱스 번호 사이의 문자를 추출하는 것입니다. let const var🎜🎜🎜let과 const의 차이점은 모두 변수를 선언하는 데 사용됩니다. ES5에서는 var를 사용하여 변수를 선언할 수 있습니다.
-let 및 const 함수 사용🎜- for 루프에서 변수 승격의 고전적인 시나리오 방지🎜- 전역 변수를 오염시키지 마세요🎜🎜🎜var 키워드는 변수를 선언합니다🎜🎜🎜1.var 키워드는 변수가 존재한다고 선언합니다. , 변수 승격 문제 🎜2. var로 선언된 변수는 블록 수준 범위에 존재하지 않습니다. 전역 변수인 경우 🎜3. var로 선언된 변수 이름이 반복되면 이후 선언이 이전 선언을 덮어씁니다. 🎜🎜🎜let key 하위 선언 변수🎜🎜🎜1. 변수 승격 없음, 변수 문제가 없습니다. let 선언 변수의 승격: let이 선언되기 전에 변수를 호출하면 오류가 보고됩니다(초기화 전에 변수에 액세스할 수 없다는 메시지 표시) 🎜2. 변수에는 블록 수준 범위(전역, 함수, eval 엄격 모드)가 있으며 현재 코드 블록에서만 적용됩니다. 현재 코드 블록 외부에서 호출하면 오류가 보고됩니다(현재 변수는 정의되지 않습니다). 🎜3.스코프 체인의 동작에 영향을 주지 않습니다 🎜4.변수의 반복 선언은 허용되지 않습니다. let으로 선언된 변수는 반복 선언이 허용되지 않습니다. 동일한 이름이 반복적으로 선언되면 오류가 보고됩니다(현재 식별자는 이미 선언되었습니다). 🎜🎜 🎜const 선언 변수🎜🎜🎜1. Const 선언 변수에는 변수 승격 없음이 있습니다. 블록 수준 범위, 반복 선언은 허용되지 않습니다특징 🎜2. const로 선언된 변수는 모두 상수(허용되지 않는 수량)입니다. 변경) 일단 선언되면 수정이 허용되지 않습니다. 수정되면 오류가 보고됩니다. 상수 변수 할당🎜3. 일반적으로 const는 변수를 선언하기 위해 타사 프레임워크에서 광범위하게 사용되며, 이는 사용자가 수정하는 것을 방지할 수 있습니다. 🎜4. const가 실제로 보장하는 것은 변수의 값이 변경될 수 없다는 것이 아니라 변수가 가리키는 메모리 주소가 변경되어서는 안 된다는 것입니다. 단순한 유형의 데이터(숫자 값, 문자열, 부울 값)의 경우 변수가 가리키는 메모리 주소에 값이 저장되므로 상수와 동일합니다. 🎜🎜🎜11. new🎜🎜🎜🎜🎜 프로세스는 새로운 빈 개체를 만듭니다. (예: 인스턴스 객체)🎜🎜🎜🎜이 새로운 객체를 가리키도록 하세요🎜🎜🎜🎜생성자에서 코드를 실행하고, 이 새로운 객체에 속성과 메서드를 추가하세요.🎜🎜🎜🎜이 새로운 객체 obj를 반환하세요. (반환 값은 정의된 생성자에 기록되지 않습니다.) 🎜🎜🎜🎜🎜12. 손떨림 방지 조절🎜🎜🎜🎜Anti-shake🎜🎜- 防抖是指在事件触发n秒后再执行，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求
应用场景：
a、scroll事件滚动触发，
b、搜索框输入查询
c、表单验证
d、按钮提交事件
e、浏览器窗口缩放，resize事件
function debounce(func, delay) {
let timer = null // 计时器
return function (...args) {
clearTimeout(timer) // 清除上一次计时器
timer = setTimeout(() => {
// 重新定时
func.apply(this, args)
}, delay)
}
}로그인 후 복사
로그인 후 복사
节流
- 节流是指如果持续触发某个事件，则每隔n秒执行一次。
function throtte(func, time) {
let timer = null // 计时器
return function (...args) {
if (timer) return // 无视，直接返回
timer = setTimeout(() => {
func.apply(this, args)
}, time)
}
}로그인 후 복사
로그인 후 복사
13、promise的3种状态
这点简单介绍概念，用法后面在详细介绍
1） . 初始态pending
- pending。它的意思是 "待定的，将发生的"，相当于是一个初始状态。创建[Promise]对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。
2 ）. 成功态resolved--也叫fulfilled
- resolved。表示解决了，就是说这个承诺实现了。 要实现从pending到resolved的转变，需要在 创建Promise对象时，在函数体中调用了resolve方法(即第一个参数)。
3） . 失败态rejected
- rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。
14、冒泡排序
// 上口诀 双层for循环 外层长度-1 内层长度-1-i
let arr = [4, 3, 1, 7, 8, 10]
for (let i = 0; i arr[j + 1]) {
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr)로그인 후 복사
Vue部分
1、MVVM
MVVM是三个单词的缩写，model(数据，一般来自ajax或本地存储)+view(视图template)+viewmodel(vue实例)
- model数据变了，视图会跟着改变，如果用的是v-model，数据也会跟着改变，viewmodel在中间起一个桥梁作用
- model 和 view 就像现实中房东和租客一样，他们是不认识的，通过中介 viewmodel
好处：
- 数据驱动
- 因为数据变了。视图也会跟着变，所以在 vue 中不用操作dom来改变视图
- 解耦(
降低了耦合性)- 由于 model 和 view 是没有关系的，是通过 viewmodel 结合在一起的，所以维护起来很方便，因为 model 逻辑代买改了，view 不用改
2、vue生命周期
- vue中的生命周期是指组件从创建到销毁的过程,主要分为4个周期8个钩子函数
1.分别是创建阶段的beforeCreate，created，一般在beforeCreate写loading加载效果，使用户体验更好，一般在created中发送ajax请求获取数据
2.然后是挂载阶段的beforeMount，mounted，一般会在mounted中操作DOM元素
3.更新阶段的是beforeUpdate ，updated，当数据更新时需要做统一的业务处理时，拿到最新的dom，可以使用updated 这个钩子函数
4.最后是销毁阶段的beforeDestroy，destroyed，可以在beforeDestroy做一些清理的工作，比如说定时器 和解绑一些addEventListener监听的事件
- 补充：（还有
keep-alive的两个钩子函数，使用场景是当组件切换时会进行销毁，因此组件中的初始化的4个钩子函数会多次执行，比较浪费资源,此时可以使用keep-alive纪行组件的缓存,可以让组件切换时不被销毁,keep-alive有两个独有的钩子函数,分别是activated和deactivated,是组件激活和失活时会执行的两个钩子函数）
3、单向数据流
单向数据流是指父组件向子组件传递数据，子组件通过props接收，当父组件中的值改变了，子组件中对应的数据也会改变，因为props是只读的，所以无法直接在子组件中对父组件传递过来的值进行修改，但是如果这个数据是一个引用数据类型，是可以直接在子组件中修改数据中的某个属性的，只要不改变这个数据的内存地址就可以
4、双向数据绑定
vue中普通指令都可以实现数据变了，视图会跟着变，但是有一个特殊的指令叫v-model，它一般用于表单控件，它可以实现双向数据绑定，所谓的双向数据就是数据变了，视图就会跟着改变，反过来也是
5、v-model原理
v-model一般配合input框使用，实现双向数据绑定的效果，它是v-bind和v-on的语法糖，原理是通过v-bind将数据绑定给input框，再通过v-on:input，在input中的值改变时，通过$event可以获取到事件源对象 再通过target.value获取到input中更新后的值 将这个值再赋值给绑定的数据即可
6、事件传参
在vue的组件使用自定义事件时，$event代表子组件抛出的数据，当这个自定义事件触发一个方法时，
可以不传$event而且可以在方法中进行接收，但是如果写的话就一定要写成$event的形式，这是一个固定写法，
或者这个方法既要传参又要使用事件对象，这个时候$event也是必须要写的
- @click='fn' 在回调函数直接通过参数可以拿到事件对象
- @click='fn($event)' 这个时候@event是固定写法
로그인 후 복사
7、父子组件的声明周期执行顺序
1.初始化阶段时，先执行父组件的beforeCreate、created、beforeMount三个钩子函数，然后执行子组件的beforeCreate、created、beforeMount、mounted四个钩子函数，最后执行父组件的mounted钩子函数
2.更新阶段，先执行父组件的beforeUpdate，然后执行子组件的beforeUpdate，updated，最后执行父组件的updated
3.销毁阶段，先执行父组件的beforeDestroy，然后执行子组件的eforeDestroy，destroyed，最后执行父组件的destroyed
8、v-if和v-show的区别
v-if和v-show都可以控制标签，实现组件的显示与隐藏，不同点是v-show是通过display的block和none属性来控制的，当元素隐藏时，页面结构依然存在
9、v-for和v-if为什么要避免一起使用
- 因为v-for的优先级比v-if要高，两者同时作用于一个标签或组件时，v-for会优先执行，执行后再进行v-if的判断，但是不满足v-if的条件的时候是可以不执行v-for的，这时候就会造成资源浪费，性能比较差
- 解决办法是可以通过计算属性将满足v-if判断条件的数据筛选出来，再使用v-if直接渲染筛选后的数据，或者是当v-if不依赖v-for时，可以通过
template将v-if写在循环的外部，这样当不满足v-if的判断条件时，就不会再执行v-for了，也可以将数据放在计算属性里面计算过滤出来的数据在交给v-for循环，代替v-if的作用，即可解决。
10、自定义指令：directive
应用场景
1.bind 属性绑定的时候执行 只会有一次
2. inserted 当前指令所在的元素插入到页面中的时候执行一次
3. update 当前指令所在的组件中的 data 数据有更新就会执行，可以执行多次
// 指令的钩子有三个 bind inserted update
// bind inserted 只会执行一次
// update 会反复执行
Vue.directive('focus', {
inserted(el) {
el.focus()
},
})
Vue.directive('red', {
bind(el) {
el.style.color = 'red'
},
})
Vue.directive('check', {
update(el) {
const reg = /^[a-zA-Z0-9]+$/
if (reg.test(el.value)) {
el.style.color = 'green'
} else {
el.style.color = 'red'
}
},
})로그인 후 복사
浏览器的缓存机制
这块部分理解不是很透彻，大家浅看一下就可以了?
- 개념: 브라우저는 요청된 리소스를 오프라인 리소스로 저장합니다. 다음에 리소스가 필요할 때 브라우저는 캐시된 리소스를 직접 사용할지 아니면 캐싱 메커니즘에 따라 서버에 다시 요청을 보낼지 결정합니다. 기능:
불필요한 데이터 전송을 줄이고 서버 부담을 줄입니다
- 클라이언트 액세스 속도를 높입니다
- 사용자 경험을 향상합니다
-
강력한 캐시: 만료되기 전에 로컬 오프라인 리소스를 사용하고 서버와 상호 작용하지 않습니다
- http1 .0 만료 구체적인 시간은 2023년 1월 1일
- http1.1 캐시 제어 기간 1년(우선순위 높음)
-
캐시 협상의 핵심은 로컬 사물과 서버가 오래됐는지 확인하는 것 (서버에 업데이트가 있는지 여부) 리소스) 강력한 캐싱은 협상을 위해 서버와 상호 작용하지 않습니다. 캐시는 항목이 오래되었는지 확인하기 위해 한 번 상호 작용합니다
- http1.0 last-modified/if-modified-since
- http1.1 etag/if-none-match (우선순위 높음)
-
현재 페이지에 img가 있고 해당 src는 logo.png1입니다. 그렇지 않은 경우 먼저 캐시된 리소스가 있는지 확인하세요. , expire, cache-control, last-modified와 동시에 리소스를 다시 가져오기 위해 서버에 요청을 보내야 합니다. etag (응답 메시지에서) - 2. 시간이 좀 지났습니다. 어느 순간(불확실) img가 있는 페이지가 또 있었는데 이때 src도 logo.png였습니다. 로컬에 캐시된 리소스가 있는지 확인했습니다. 발견되면
expire, catch-control(있는 경우)을 다시 살펴보았습니다. 우선순위는 cache-control을 보는 것), 만료되지 않았다면 그냥 사용하지만(이것은 강력한 캐시입니다) 만료되면 캐시 협상 단계에 들어가기 시작한다는 것을 발견했습니다. if-modified-since(값은 last-modified)/if-none -match(etag)를 변경하라는 요청을 서버에 보냅니다. code>가 요청을 전달하고 서버는 서버의 리소스가 로컬 리소스보다 최신인지 확인하기 시작합니다. 서버 리소스가 여전히 오래된 경우 브라우저는 상태를 확인합니다. 304, 계속해서 로컬 오프라인 리소스를 사용하세요. 서버 리소스에 업데이트된 리소스가 있는 경우 상태 코드는 200이며 서버는 새 logo.png를 브라우저에 전달해야 하며 프로세스를 다시 완료해야 합니다<br><code>expire,cache-control,last-modified,etag(响应报文中)
2. 过了一段时间（不确定的），又有一个别的页面上面有一个img，src也是logo.png,这个时候就去看一下本地有没有缓存资源，发现有，再看一下它expire,catch-control（如果有，优先级是看cache-control),如果没有过期，就用就行了（这块属于强缓存） 但是发现如果过期了，就开始进入协商缓存的阶段，就向服务器发送一个请求把if-modified-since（值就是last-modifyed)/if-none-match(etag)通过请求头发过去, 服务器开始对比看看服务器上的资源有没有比本地更新一点，如果服务器资源还是旧的，返回一个状态码叫304，浏览器一看状态是304就继续用本地离线资源，如果服务器资源有更新的资源，状态码就是200，服务器就需要传给浏览器一个新的logo.png,流程重新再走一遍
设计模式
本人技术栈是主要是前端vue的，所以对这方面的知识还是有所欠缺的，尽量说的明白一点，其实我也不是很懂，大致明白，如果想要全面理解透还是需要很多技术储备的，很明显我不是的哈哈?
1、观察者模式
观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新
比喻：
宝宝 -> 父母爷爷奶奶 一对多的依赖关系
宝宝哭 -> 父母爷爷奶奶赶紧过来服务 当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新
模式特点： 有二个主体 一个是被观察者 Dep 一个是观察者 watcher，在vue中v-band就是采用这种模式理念，缺点是耦合性太高
2、发布订阅模式
发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。
3、两者模式区别
(동영상 공유 학습: 웹 프론트엔드 시작하기, jQuery 동영상 튜토리얼)
![자바스크립트 심층 분석 [웹 프론트엔드의 기본은 알아야 한다]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
