手写代码

realgeoffrey · realgeoffrey · commit c452e1cd1c6c · 2023-09-23T02:49:40.000+08:00
手写`instanceOf`或`Object.prototype.isPrototypeOf`

手写`new`

手写`Promise`
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@
     1. [JS学习笔记](./网站前端/JS学习笔记/README.md)
     2. [JS实用方法](./网站前端/JS方法积累/实用方法/README.md)
     3. [JS正则表达式](./网站前端/JS正则表达式/README.md)
+    4. [JS手写代码](./网站前端/JS方法积累/手写代码/README.md)
 3. HTML+CSS
 
     1. [HTML+CSS学习笔记](./网站前端/HTML+CSS学习笔记/README.md)
diff --git a/网站前端/JS学习笔记/README.md b/网站前端/JS学习笔记/README.md
@@ -178,60 +178,6 @@
 
             1. 若Func返回**引用数据类型**，则这个引用数据类型的值赋值给newObj。
             2. 若Func返回基本数据类型或返回this或无返回，则obj赋值给newObj。
-
-        ><details>
-        ><summary>模拟实现一个<code>new</code></summary>
-        >
-        >```javascript
-        >// 第一个参数是构造函数，后面是参数
-        >// 不支持class的构造函数，因为class必须`new`创建，否则报错。也不支持new.target。
-        >function objectFactory () {
-        >  const obj = new Object()
-        >  const Constructor = Array.prototype.shift.call(arguments)
-        >  Object.setPrototypeOf(obj, Constructor.prototype)
-        >  const ret = Constructor.apply(obj, arguments)
-        >
-        >  return (typeof ret === 'object' && ret !== null) || typeof ret === 'function' ? ret : obj
-        >}
-        >
-        >/* 使用测试 */
-        >function A (a, b) {
-        >  this.a = a
-        >  this.b = b
-        >}
-        >function B (a, b) {
-        >  this.a = a
-        >  this.b = b
-        >  return null
-        >}
-        >function C (a, b) {
-        >  this.a = a
-        >  this.b = b
-        >  return 1
-        >}
-        >function D (a, b) {
-        >  this.a = a
-        >  this.b = b
-        >  return function () {
-        >    return a + b
-        >  }
-        >}
-        >function E (a, b) {
-        >  this.a = a
-        >  this.b = b
-        >  return {
-        >    otherA: a,
-        >    otherB: b
-        >  }
-        >}
-        >
-        >console.log(objectFactory(A, 'a1', 'b1'), new A('a1', 'b1'))
-        >console.log(objectFactory(B, 'a1', 'b1'), new B('a1', 'b1'))
-        >console.log(objectFactory(C, 'a1', 'b1'), new C('a1', 'b1'))
-        >console.log(objectFactory(D, 'a1', 'b1'), new D('a1', 'b1'))
-        >console.log(objectFactory(E, 'a1', 'b1'), new E('a1', 'b1'))
-        >```
-        ></details>
         </details>
 6. <a name="函数-参数"></a>参数
 
diff --git a/网站前端/JS方法积累/废弃代码/README.md b/网站前端/JS方法积累/废弃代码/README.md
@@ -32,7 +32,6 @@
 
     1. [`requestAnimationFrame`和`cancelAnimationFrame`](#原生jsrequestanimationframe和cancelanimationframe的polyfill)
     1. [`Date.now`](#原生jsdatenow的polyfill)
-    1. [`Object.create`](#原生jsobjectcreate的polyfill)
     1. [`Array.isArray`](#原生jsarrayisarray的polyfill)
     1. [`Array.prototype.map`](#原生jsarrayprototypemap的polyfill)
     1. [`Function.prototype.bind`](#原生jsfunctionprototypebind的polyfill)
@@ -1139,41 +1138,6 @@ if (typeof Date.now !== 'function') {
 ```
 >`Date.now()`相对于`new Date().getTime()`及其他方式，可以避免生成不必要的`Date`对象，更高效。
 
-### *原生JS*`Object.create`的Polyfill
->来自：[MDN:Object.create](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Polyfill)。
-
-```javascript
-if (typeof Object.create !== 'function') {
-    Object.create = (function () {
-        function Temp() {}
-
-        var hasOwn = Object.prototype.hasOwnProperty;
-
-        return function (O) {
-            if (typeof O != 'object') {
-                throw TypeError('Object prototype may only be an Object or null');
-            }
-
-            Temp.prototype = O;
-            var obj = new Temp();
-            Temp.prototype = null; // 不要保持一个 O 的杂散引用（a stray reference）...
-
-            if (arguments.length > 1) {
-                var Properties = Object(arguments[1]);
-
-                for (var prop in Properties) {
-                    if (hasOwn.call(Properties, prop)) {
-                        obj[prop] = Properties[prop];
-                    }
-                }
-            }
-
-            return obj;
-        };
-    })();
-}
-```
-
 ### *原生JS*`Array.isArray`的Polyfill
 >来自：[MDN:Array.isArray](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray#Polyfill)。
 
diff --git a/网站前端/JS方法积累/手写代码/README.md b/网站前端/JS方法积累/手写代码/README.md
@@ -0,0 +1,277 @@
+# JS手写代码
+
+## 目录
+1. [手写`Object.create`](#手写objectcreate)
+1. [手写`instanceOf`或`Object.prototype.isPrototypeOf`](#手写instanceof或objectprototypeisprototypeof)
+1. [手写`new`](#手写new)
+1. [手写`Promise`](#手写promise)
+1. [手写``](#手写)
+1. [手写``](#手写)
+1. [手写``](#手写)
+
+
+---
+### 手写`Object.create`
+```javascript
+function create(proto, propertiesObject) { // 不支持null
+  function F() {}
+
+  F.prototype = proto;
+  F.prototype.constructor = F;
+
+  const obj = new F();
+  propertiesObject && Object.defineProperties(obj, propertiesObject);
+
+  return obj;
+}
+```
+
+### 手写`instanceOf`或`Object.prototype.isPrototypeOf`
+```javascript
+function instanceOf(obj, constructor) {
+  if (typeof obj !== "object" || obj === null) return false;
+
+  // 获得对象原型链（非标准：obj.__proto__）
+  let proto = Object.getPrototypeOf(obj);
+
+  // 沿着原型链向上查找，直到找到构造函数的原型或到达原型链的顶部（null）
+  while (proto) {
+    if (proto === constructor.prototype) {
+      return true;
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  return false;
+}
+```
+
+### 手写`new`
+```javascript
+function myNew(constructor, ...args) {
+  // 创建：原型是传入构造函数的 空对象
+  const obj = Object.create(constructor.prototype);
+
+  // 调用构造函数，并且this绑定到obj上
+  const value = constructor.apply(obj, args);
+
+  // 如果构造函数有返回值，并且返回的是对象，就返回value ;否则返回obj
+  return value instanceof Object ? value : obj;
+  // (typeof value === 'object' && value !== null) || typeof value === 'function' 等价于 value instanceof Object
+}
+```
+
+### 手写`Promise`
+```javascript
+class MyPromise {
+  // 状态值
+  static PENDING = "pending";
+  static FULFILLED = "fulfilled";
+  static REJECTED = "rejected";
+
+  // 状态
+  status = MyPromise.PENDING;
+  // 用于存储 Promise 的结果值
+  value = null;
+  // 用于存储 错误信息
+  error = null;
+  // 用于存储 成功回调函数的队列
+  successCallbacks = [];
+  // 用于存储 失败回调函数的队列
+  errorCallbacks = [];
+  // 用于存储 结束回调函数的队列
+  endCallbacks = [];
+
+  constructor(executor) {
+    const resolve = (res) => {
+      if (this.status === MyPromise.PENDING) {
+        this.status = MyPromise.FULFILLED;
+        this.value = res;
+
+        // 处理pending时推入的回调
+        this.successCallbacks.forEach((fn) => fn(this.value));
+        this.endCallbacks.forEach((fn) => fn());
+      }
+    };
+    const reject = (err) => {
+      if (this.status === MyPromise.PENDING) {
+        this.status = MyPromise.REJECTED;
+        this.error = err;
+
+        // 处理pending时推入的回调
+        this.errorCallbacks.forEach((fn) => fn(this.error));
+        this.endCallbacks.forEach((fn) => fn());
+      }
+    };
+    try {
+      // 执行（传入 执行成功回调函数 和 执行失败回调函数 作为参数）
+      executor(resolve, reject);
+    } catch (e) {
+      reject(e);
+    }
+  }
+
+  // then 方法，用于注册成功回调函数和失败回调函数
+  then(onFulfilled, onRejected) {
+    return new MyPromise((resolve, reject) => {
+      // 模拟microtask
+      setTimeout(() => {
+        const fun = (res) => {
+          if (res instanceof MyPromise) {
+            res.then(resolve, reject);
+          } else {
+            resolve(res);
+          }
+        };
+
+        switch (this.status) {
+          case MyPromise.FULFILLED: {
+            try {
+              if (typeof onFulfilled === "function") {
+                const res = onFulfilled(this.value);
+                fun(res);
+              } else {
+                resolve(this.value);
+              }
+            } catch (e) {
+              reject(e);
+            }
+            break;
+          }
+          case MyPromise.REJECTED: {
+            try {
+              if (typeof onRejected === "function") {
+                const res = onRejected(this.error);
+                fun(res);
+              } else {
+                reject(this.error);
+              }
+            } catch (e) {
+              reject(e);
+            }
+            break;
+          }
+          case MyPromise.PENDING: {
+            this.successCallbacks.push(() => {
+              try {
+                if (typeof onFulfilled === "function") {
+                  const res = onFulfilled(this.value);
+                  fun(res);
+                } else {
+                  resolve(this.value);
+                }
+              } catch (e) {
+                reject(e);
+              }
+            });
+            this.errorCallbacks.push(() => {
+              try {
+                if (typeof onRejected === "function") {
+                  const res = onRejected(this.error);
+                  fun(res);
+                } else {
+                  reject(this.error);
+                }
+              } catch (e) {
+                reject(e);
+              }
+            });
+            break;
+          }
+        }
+      });
+    });
+  }
+
+  // catch 方法，用于注册失败回调函数（参考then）
+  catch(onRejected) {
+    return this.then(null, onRejected);
+  }
+
+  // finally 方法，用于注册结束回调函数
+  finally(onReached) {
+    return new MyPromise((resolve, reject) => {
+      // 模拟microtask
+      setTimeout(() => {
+        const finallyFun = () => {
+          this.status === MyPromise.FULFILLED && resolve(this.value);
+          this.status === MyPromise.REJECTED && reject(this.error);
+        };
+
+        const fun = (res) => {
+          if (res instanceof MyPromise) {
+            res.then(finallyFun, reject);
+          } else {
+            finallyFun();
+          }
+        };
+
+        switch (this.status) {
+          case MyPromise.PENDING: {
+            this.endCallbacks.push(() => {
+              try {
+                if (typeof onReached === "function") {
+                  const res = onReached();
+                  fun(res);
+                } else {
+                  finallyFun();
+                }
+              } catch (e) {
+                reject(e);
+              }
+            });
+            break;
+          }
+          default: {
+            try {
+              if (typeof onReached === "function") {
+                const res = onReached();
+                fun(res);
+              } else {
+                finallyFun();
+              }
+            } catch (e) {
+              reject(e);
+            }
+            break;
+          }
+        }
+      });
+    });
+  }
+}
+```
+
+### 手写``
+```javascript
+
+```
+
+### 手写``
+```javascript
+
+```
+
+### 手写``
+```javascript
+
+```
+
+### 手写``
+```javascript
+
+```
+
+### 手写``
+```javascript
+
+```
+
+### 手写``
+```javascript
+
+```
+
+### 手写``
+```javascript
+
+```
diff --git a/网站前端/webpack学习笔记/README.md b/网站前端/webpack学习笔记/README.md
diff --git a/网站前端/前端内容/标准库文档.md b/网站前端/前端内容/标准库文档.md
