#### 前言 `JavaScript` 作为一门 `单线程语言` ，同一时间只能执行一个操作。这就意味着，在处理一些耗时操作时，程序会出现 `阻塞` ，导致 UI 无响应。为了避免这种情况， `异步编程` 变得至关重要。 `异步操作` 可以将耗时的任务交给浏览器或运行时环境来处理，同时保持 UI 的响应性。 #### 回调函数 `回调函数` 是处理异步操作的最早方法之一。它在处理事件、定时器、网络请求等方面得到了广泛应用。然而，随着异步操作嵌套层次的增加， `回调地狱（Callback Hell）` 成为了一个普遍存在的问题，降低了代码的 `可读性` 和 `可维护性` 。 ```javascript title="使用回调函数处理异步操作" function fetchData(url, callback) { fetch(url) .then((response) => response.json()) .then((data) => callback(data)) .catch((error) => console.error(error)) } fetchData('https://api.github.com/users/jiohon', function (data) { console.log(data) }) ``` ## ...继续阅读 (5)

前言JavaScript作为一门单线程语言，同一时间只能执行一个操作。这就意味着，在处理一些耗时操作时，程序会出现阻塞，导致 UI 无响应。为了避免这种情况，异步编程变得至关重要。异步操作可以将耗时的任务交给浏览器或运行时环境来处理，同时保持 UI 的响应性。回调函数回调函数是处理异步操作的最早方法之一。它在处理事件、定时器、网络请求等方面得到了广泛应用。然而，随着异步操作嵌套层次的增加，回调地狱（Callback Hell）成为了一个普遍存在的问题，降低了代码的可读性和可维护性。function fetchData(url, callback) { fetch(url) .then((response) => response.json()) .then((data) => callback(data)) .catch((error) => console.error(error)) } fetchData('https://api.github.com/users/jiohon', function (data) { console.log(data) })Promise 和异步操作链为了解决回调地狱问题，ES6引入了Promise，它提供了一种更优雅的处理异步操作的方式。Promise允许我们将异步操作组合成链式调用，通过.then()来处理 ...继续阅读 (4)

前言JavaScript作为一门单线程语言，同一时间只能执行一个操作。这就意味着，在处理一些耗时操作时，程序会出现阻塞，导致 UI 无响应。为了避免这种情况，异步编程变得至关重要。异步操作可以将耗时的任务交给浏览器或运行时环境来处理，同时保持 UI 的响应性。回调函数回调函数是处理异步操作的最早方法之一。它在处理事件、定时器、网络请求等方面得到了广泛应用。然而，随着异步操作嵌套层次的增加，回调地狱（Callback Hell）成为了一个普遍存在的问题，降低了代码的可读性和可维护性。function fetchData(url, callback) { fetch(url) .then((response) => response.json()) .then((data) => callback(data)) .catch((error) => console.error(error)) } fetchData('https://api.github.com/users/jiohon', function (data) { console.log(data) })Promise 和异步操作链为了解决回调地狱问题，ES6引入了Promise，它提供了一种更优雅的处理异步操作的方式。Promise允许我们将异步操作组合成链式调用，通过.then()来处理 ...继续阅读 (4)

#### 防抖 - debounce - 函数防抖： 在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。 - 主要使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。 **具体实现** ```javascript title="防抖" function debounce(fn, wait) { var timer = null return function () { var context = this, args = arguments // 如果此时存在定时器的话，则取消之前的定时器重新记时 if (timer) { clearTimeout(timer) timer = null } // 设置定时器，使事件间隔指定事件后执行 timer = setTimeout(() => { fn.apply(context, args) }, wait) } } ``` #### 节流 - throttle - 函数节流： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。 - 可以使用在 scroll 函数的事件监听上，通过事件节流 ...继续阅读 (5)

防抖 - debounce函数防抖： 在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。主要使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。具体实现function debounce(fn, wait) { var timer = null return function () { var context = this, args = arguments // 如果此时存在定时器的话，则取消之前的定时器重新记时 if (timer) { clearTimeout(timer) timer = null } // 设置定时器，使事件间隔指定事件后执行 timer = setTimeout(() => { fn.apply(context, args) }, wait) } }节流 - throttle函数节流： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。具体实现function throttle(fn, delay) { var preTime = D ...继续阅读 (4)

防抖 - debounce函数防抖： 在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。主要使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。具体实现function debounce(fn, wait) { var timer = null return function () { var context = this, args = arguments // 如果此时存在定时器的话，则取消之前的定时器重新记时 if (timer) { clearTimeout(timer) timer = null } // 设置定时器，使事件间隔指定事件后执行 timer = setTimeout(() => { fn.apply(context, args) }, wait) } }节流 - throttle函数节流： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。具体实现function throttle(fn, delay) { var preTime = D ...继续阅读 (5)

#### 前言 **JS 中的数据类型可分为两种：** - 基本类型： `undefined` , `null` , `Boolean` , `String` , `Number` , `Symbol` - 引用类型： `Object` , `Array` , `Date` , `Function` , `RegExp` 等 **不同类型的存储方式：** - 基本类型：基本类型值在内存中占据固定大小，保存在 `栈内存` 中 - 引用类型：引用类型的值是对象，保存在 `堆内存` 中，而 `栈内存` 中存储的是对象的 `变量标识符` 以及对象在 `堆内存` 中的存储地址 **不同类型的复制方式：** - 基本类型：从一个变量向另外一个新变量复制基本类型的值，会创建这个值的一个副本，并将该副本复制给新变量 - 引用类型：从一个变量向另一个新变量复制引用类型的值，其实复制的是储存地址，最终两个变量最终都指向同一个对象 #### 深浅拷贝的区别 - 浅拷贝：仅仅是复制了引用，彼此之间的操作会互相影响 - 深拷贝：在堆中重新分配内存，不同的地址，相同的值，互不影响 #### 浅拷贝 对象的浅拷贝是属性与拷贝的源对象属性共享相同的引用（指向相同的底层值）的副本。因此，当你更改源对象或副本时，也可能导致另一个对象发生更改。与之相比，在深拷贝中，源对象和副本是完全独立的。 ## ...继续阅读 (3)

前言JS 中的数据类型可分为两种：基本类型：undefined,null,Boolean,String,Number,Symbol引用类型：Object,Array,Date,Function,RegExp等不同类型的存储方式：基本类型：基本类型值在内存中占据固定大小，保存在栈内存中引用类型：引用类型的值是对象，保存在堆内存中，而栈内存中存储的是对象的变量标识符以及对象在堆内存中的存储地址不同类型的复制方式：基本类型：从一个变量向另外一个新变量复制基本类型的值，会创建这个值的一个副本，并将该副本复制给新变量引用类型：从一个变量向另一个新变量复制引用类型的值，其实复制的是储存地址，最终两个变量最终都指向同一个对象深浅拷贝的区别浅拷贝：仅仅是复制了引用，彼此之间的操作会互相影响深拷贝：在堆中重新分配内存，不同的地址，相同的值，互不影响浅拷贝对象的浅拷贝是属性与拷贝的源对象属性共享相同的引用（指向相同的底层值）的副本。因此，当你更改源对象或副本时，也可能导致另一个对象发生更改。与之相比，在深拷贝中，源对象和副本是完全独立的。赋值function shallowClone(object) { // 只拷贝对象 if (!object) return object // 根据 object 的类型判断是新建一个数组还是对象 const newObject = Array.i ...继续阅读 (3)

前言JS 中的数据类型可分为两种：基本类型：undefined,null,Boolean,String,Number,Symbol引用类型：Object,Array,Date,Function,RegExp等不同类型的存储方式：基本类型：基本类型值在内存中占据固定大小，保存在栈内存中引用类型：引用类型的值是对象，保存在堆内存中，而栈内存中存储的是对象的变量标识符以及对象在堆内存中的存储地址不同类型的复制方式：基本类型：从一个变量向另外一个新变量复制基本类型的值，会创建这个值的一个副本，并将该副本复制给新变量引用类型：从一个变量向另一个新变量复制引用类型的值，其实复制的是储存地址，最终两个变量最终都指向同一个对象深浅拷贝的区别浅拷贝：仅仅是复制了引用，彼此之间的操作会互相影响深拷贝：在堆中重新分配内存，不同的地址，相同的值，互不影响浅拷贝对象的浅拷贝是属性与拷贝的源对象属性共享相同的引用（指向相同的底层值）的副本。因此，当你更改源对象或副本时，也可能导致另一个对象发生更改。与之相比，在深拷贝中，源对象和副本是完全独立的。赋值function shallowClone(object) { // 只拷贝对象 if (!object) return object // 根据 object 的类型判断是新建一个数组还是对象 const newObject = Array.i ...继续阅读 (2)

#### new [new](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)运算符允许开发人员创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 - 1、创建一个 `空对象` ，作为将要返回的对象实例 - 2、将这个空对象的原型，指向了构造函数的 `prototype` 对象 - 3、将函数的 `this` 指向这个空对象，执行构造函数的代码（为这个新对象添加属性） - 4、判断函数的返回值类型。 **具体实现** ``` javascript title="new" function myNew(Func, ...args) { // 1.创建一个新对象 const obj = {} // 2.新对象原型指向构造函数原型对象 obj.__proto__ = Func.prototype // 3.将构建函数的this指向新对象 let result = Func.apply(obj, args) // 4.根据返回值判断 return result instanceof Object ? result : obj } ``` **测试如下** ``` javascript title="一个栗子" f ...继续阅读 (3)

newnew运算符允许开发人员创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。1、创建一个空对象，作为将要返回的对象实例2、将这个空对象的原型，指向了构造函数的prototype对象3、将函数的this指向这个空对象，执行构造函数的代码（为这个新对象添加属性）4、判断函数的返回值类型。具体实现function myNew(Func, ...args) { // 1.创建一个新对象 const obj = {} // 2.新对象原型指向构造函数原型对象 obj.__proto__ = Func.prototype // 3.将构建函数的this指向新对象 let result = Func.apply(obj, args) // 4.根据返回值判断 return result instanceof Object ? result : obj }测试如下function Person(name) { this.name = name } const p1 = new Person('p1') const p2 = myNew(Person, 'p2') console.log('p1', p1 instanceof Person) // -> true console.log('p2', p2 instanceof Person) // -> tr ...继续阅读 (4)

newnew运算符允许开发人员创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。1、创建一个空对象，作为将要返回的对象实例2、将这个空对象的原型，指向了构造函数的prototype对象3、将函数的this指向这个空对象，执行构造函数的代码（为这个新对象添加属性）4、判断函数的返回值类型。具体实现function myNew(Func, ...args) { // 1.创建一个新对象 const obj = {} // 2.新对象原型指向构造函数原型对象 obj.__proto__ = Func.prototype // 3.将构建函数的this指向新对象 let result = Func.apply(obj, args) // 4.根据返回值判断 return result instanceof Object ? result : obj }测试如下function Person(name) { this.name = name } const p1 = new Person('p1') const p2 = myNew(Person, 'p2') console.log('p1', p1 instanceof Person) // -> true console.log('p2', p2 instanceof Person) // -> tr ...继续阅读 (4)

#### 原型链继承 基于对象的原型链来实现，在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。可以总结为:当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 `Object.prototype` ```javascript title="原型链继承" function Parent() { this.name = 'Parent' } Parent.prototype.getName = function () { return this.name } function Child() {} Child.prototype = new Parent() // 继承自Parent Child.prototype.constructor = Child const child = new Child() console.log(child.getName()) // "Parent" ``` 缺点: - 包含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱 - 在创建子类型的实例时，不能向父类构造函数中传递参数 > 基于以上问题，在实践中很少会单独使用原型链。 #### ...继续阅读 (4)

原型链继承基于对象的原型链来实现，在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。可以总结为:当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prototypefunction Parent() { this.name = 'Parent' } Parent.prototype.getName = function () { return this.name } function Child() {} Child.prototype = new Parent() // 继承自Parent Child.prototype.constructor = Child const child = new Child() console.log(child.getName()) // "Parent"缺点:包含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱在创建子类型的实例时，不能向父类构造函数中传递参数基于以上问题，在实践中很少会单独使用原型链。构造函数继承构造函数继承的思想主要是在子类构造函数中调用父类构造函数，使用 call 或 apply 实现function Pa ...继续阅读 (5)

原型链继承基于对象的原型链来实现，在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。可以总结为:当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prototypefunction Parent() { this.name = 'Parent' } Parent.prototype.getName = function () { return this.name } function Child() {} Child.prototype = new Parent() // 继承自Parent Child.prototype.constructor = Child const child = new Child() console.log(child.getName()) // "Parent"缺点:包含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱在创建子类型的实例时，不能向父类构造函数中传递参数基于以上问题，在实践中很少会单独使用原型链。构造函数继承构造函数继承的思想主要是在子类构造函数中调用父类构造函数，使用 call 或 apply 实现function Pa ...继续阅读 (5)

#### 原型 [**\_\_proto\_\_**](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) - `__proto__` 是每个 JavaScript 对象（除了 null）都有的一个内部属性，它指向该对象的构造函数的原型对象（即 prototype 属性）。这是一种隐式原型 - `__proto__` 决定了对象的原型链。如果我们访问一个对象的属性或方法，而该对象本身没有这个属性或方法，JavaScript 会沿着 `**proto**` 指向的原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端 `null` ```javascript title="__proto__" const obj = {} console.log(obj.__proto__ === Object.prototype) // true const arr = [] console.log(arr.__proto__ === Array.prototype) // true ``` [**prototype**](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Referen ...继续阅读 (3)

原型__proto____proto__是每个 JavaScript 对象（除了 null）都有的一个内部属性，它指向该对象的构造函数的原型对象（即 prototype 属性）。这是一种隐式原型__proto__决定了对象的原型链。如果我们访问一个对象的属性或方法，而该对象本身没有这个属性或方法，JavaScript 会沿着**proto**指向的原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端nullconst obj = {} console.log(obj.__proto__ === Object.prototype) // true const arr = [] console.log(arr.__proto__ === Array.prototype) // trueprototypeprototype是函数对象的一个属性。每当我们定义一个函数时，JavaScript 引擎会为这个函数自动创建一个prototype属性，该属性是一个对象（默认情况下只包含一个 constructor 属性，指向这个函数本身）prototype是用于实现 JavaScript 继承的关键机制。当一个函数被用作构造函数来创建对象时，所有通过该构造函数创建的对象都将共享这个prototype对象中的属性和方法简单来说，该函数实例化的所有对象的proto的属性指向这个对象，它是该函数所 ...继续阅读 (3)

原型__proto____proto__是每个 JavaScript 对象（除了 null）都有的一个内部属性，它指向该对象的构造函数的原型对象（即 prototype 属性）。这是一种隐式原型__proto__决定了对象的原型链。如果我们访问一个对象的属性或方法，而该对象本身没有这个属性或方法，JavaScript 会沿着**proto**指向的原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端nullconst obj = {} console.log(obj.__proto__ === Object.prototype) // true const arr = [] console.log(arr.__proto__ === Array.prototype) // trueprototypeprototype是函数对象的一个属性。每当我们定义一个函数时，JavaScript 引擎会为这个函数自动创建一个prototype属性，该属性是一个对象（默认情况下只包含一个 constructor 属性，指向这个函数本身）prototype是用于实现 JavaScript 继承的关键机制。当一个函数被用作构造函数来创建对象时，所有通过该构造函数创建的对象都将共享这个prototype对象中的属性和方法简单来说，该函数实例化的所有对象的proto的属性指向这个对象，它是该函数所 ...继续阅读 (2)

#### this 与其他语言相比，函数的 `this` 关键字在 `JavaScript` 中的表现略有不同，此外，在[严格模式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)和非严格模式之间也会有一些差别。 在绝大多数情况下，函数的调用方式决定了 `this` 的值（运行时绑定）。`this` 不能在执行期间被赋值，并且在每次函数被调用时 `this` 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 `this` 值，而不用考虑函数如何被调用的。ES2015 引入了[箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，箭头函数不提供自身的 this 绑定（`this` 的值将保持为闭合词法上下文的值）。 `this` 的值取决于它出现的上下文：函数、类或全局。 ##### 全局作用域 - 直接调用一个函数，就是默认绑定，this 在非严格模式下指向的为全局对象 `window` ```javascript title="全局作用域" function fn() { console.log(thi ...继续阅读 (5)

this与其他语言相比，函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5 引入了 bind 方法来设置函数的this值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this的值将保持为闭合词法上下文的值）。this的值取决于它出现的上下文：函数、类或全局。全局作用域直接调用一个函数，就是默认绑定，this 在非严格模式下指向的为全局对象windowfunction fn() { console.log(this) // window } fn()const obj = { fn: () => { console.log(this) // window }, fn1() { return function () { console.log(this) // window } }, fn2() { console.log(this) // window }, } obj.fn() obj.fn1()() const Fn = obj.fn2 Fn()函数作 ...继续阅读 (5)

this与其他语言相比，函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5 引入了 bind 方法来设置函数的this值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this的值将保持为闭合词法上下文的值）。this的值取决于它出现的上下文：函数、类或全局。全局作用域直接调用一个函数，就是默认绑定，this 在非严格模式下指向的为全局对象windowfunction fn() { console.log(this) // window } fn()const obj = { fn: () => { console.log(this) // window }, fn1() { return function () { console.log(this) // window } }, fn2() { console.log(this) // window }, } obj.fn() obj.fn1()() const Fn = obj.fn2 Fn()函数作 ...继续阅读 (4)

#### 观察者模式 - 观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有 `依赖者` 都会收到通知并自动更新。 - 当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。 - 可以看作 `拍卖场景` ，拍卖师观察最高标价，然后通知给其他竞价者竞价。 优点: - 观察者和被观察者是抽象耦合的，实现简单，主题和观察者之间的关系明确，适用于一对多的关系。 缺点: - 当观察者较多时，主题的通知机制可能会导致性能问题，因为每个观察者都会被直接通知。 **具体实现** ```javascript title="观察者" class Observer { constructor(name) { this.name = name } update(data) { console.log(`观察者${this.name} 收到了: ${data}`) } } ``` ```javascript title="被观察者" class Subject { constructor() { this.observers = [] } add(observer) { this.ob ...继续阅读 (4)

观察者模式观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有依赖者都会收到通知并自动更新。当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。可以看作拍卖场景，拍卖师观察最高标价，然后通知给其他竞价者竞价。优点:观察者和被观察者是抽象耦合的，实现简单，主题和观察者之间的关系明确，适用于一对多的关系。缺点:当观察者较多时，主题的通知机制可能会导致性能问题，因为每个观察者都会被直接通知。具体实现class Observer { constructor(name) { this.name = name } update(data) { console.log(`观察者${this.name} 收到了: ${data}`) } }class Subject { constructor() { this.observers = [] } add(observer) { this.observers.push(observer) } notify(data) { this.observers.forEach((i) => i.update(data)) } de ...继续阅读 (5)

观察者模式观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有依赖者都会收到通知并自动更新。当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。可以看作拍卖场景，拍卖师观察最高标价，然后通知给其他竞价者竞价。优点:观察者和被观察者是抽象耦合的，实现简单，主题和观察者之间的关系明确，适用于一对多的关系。缺点:当观察者较多时，主题的通知机制可能会导致性能问题，因为每个观察者都会被直接通知。具体实现class Observer { constructor(name) { this.name = name } update(data) { console.log(`观察者${this.name} 收到了: ${data}`) } }class Subject { constructor() { this.observers = [] } add(observer) { this.observers.push(observer) } notify(data) { this.observers.forEach((i) => i.update(data)) } de ...继续阅读 (5)