1. 手写Object.create

思路：将传入的对象作为原型

function create(obj) {function F() { }F.prototype = objreturn new F()
}

2. 手写 instanceof

思路：不断地从左边的原型链上去找

function MyInstanceof(left, right) {let l = Object.getPrototypeOf(left);let r = right.prototype;while (1) {if (!l) return false;if (l === r) return true;l = Object.getPrototypeOf(l)}
}

3. 手写 new 操作符

思路：

• 创建一个空对象
• 设置原型对象
• this指向这个对象

function myNew(fn) {let obj = {};obj.__proto__ = fn.prototype;let res = fn.call(obj);return typeof res === 'object' ? res : obj
}

4. 手写 Promise.all

直接写

function MyPromiseAll(promises) {return new Promise((resolve, reject) => {let count = 0;let res = [];promises.forEach((promise, index) => {Promise.resolve(promise).then((value) => {count++;res[index] = value;if (count === promises.length) {return resolve(res)}}).catch((err) => reject(err))})})
}

5. 手写 Promise.race

思路：返回第一个有结果的promise

function MyPromiseRace(promises) {return new Promise((resolve, reject) => {for (let i = 0; i < promises.length; i++) {promises[i].then(resolve, reject)}})
}

6. 手写 Promise.allsettled

function allsettled(promises) {return new Promise((resolve, reject) => {const res = [];let count = 0;for (let i = 0; i < promises.length; i++) {promises[i].then((value) => res[i] = { status: 'fulfilled', value }).reject((reason) => res[i] = { status: 'rejected', reason }).finally(() => {count++;if (count === promises.length) {resolve(res)}})}})
}

7. 手写防抖、节流

// 防抖
function debounce(fn, wait) {let timer = null;return function (...args) {const context = this;if (timer) {clearTimeout(timer);timer = null;}timer = setTimeout(() => {fn.apply(context, args);}, wait)}
}// 节流
function throttle(fn, wait) {let timer = null;return function (...args) {const context = this;if (timer) {return}timer = setTimeout(() => {fn.apply(context, args);timer = null;}, wait)}
}

附加节流和防抖的应用场景：

• 节流：
  1. 监听滚动事件
  2. 调整窗口大小页面跟着变
  3. 输入框实时搜索
• 防抖：
  1. 用户输入的触发事件
  2. 表单提交
  3. 延迟加载

8. 手写call、apply、bind

Function.prototype.myCall = function (context, ...args) {context = context || windowargs = args || []const key = new Symbol()context[key] = thisconst res = context[key](...args)delete context[key]return res
}Function.prototype.myApply = function (context, args) {context = context || windowargs = args || []const key = new Symbol()context[key] = thisconst res = context[key](...args)delete context[key]return res
}Function.prototype.myBind = function (context, ...args) {let self = thisargs = args || []return function (...newargs) {const key = Symbol()context[key] = selfconst res = context[key](...args, ...newargs)delete context[key]return res}
}

9. 手写AJAX请求

const url = '/server';
let xhr = new XMLHttpRequest();xhr.open('GET', url, true);
xhr.onreadystatechange = function () {if (this.readyState !== 4) return;if (this.status === 200) {console.log(this.response);} else {console.log(this.statusText);}
}xhr.onerror = function () {console.log(this.statusText);
}xhr.responseType = 'json';
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(null);

10. 手写深、浅拷贝

10.1 浅拷贝

1. Object.assign()
2. 扩展运算符

10.2 深拷贝

1. JSON.stringify()
2. lodash库
3. 手写深拷贝

   function deepClone(obj, map = new WeakMap()) {if (obj === null || typeof obj !== 'object' || map.has(obj)) {return obj;}map.set(obj, true)let newObj = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = deepClone(obj[key]);}}return newObj;
   }

11. 一行实现sleep函数

function sleep(delay) {return new Promise(resolve => setTimeout(resolve, delay))
}