「灵魂之做」2020斩获30道高频JS手撕面试题

前言

最近在准备面试，恰好利用几天的时间系统的整理了下JS常常考的手撕题类型。html

在这里，以脑图的形式带你们手撕这篇文章里的全部题（带注释）。前端

想领取脑图的关注前端时光屋公众号，回复「JS手撕」，便可领取❤️面试

脑图里的全部题型便是本文中的30道常考高频题ajax

脑图👇 跨域

1.手动实现一个浅克隆

浅克隆：只拷贝对象或数组的第一层内容数组

const shallClone = (target) => {
  if (typeof target === 'object' && target !== null) {
    const cloneTarget = Array.isArray(target) ? [] : {};
    for (let prop in target) {
      if (target.hasOwnProperty(prop)) { // 遍历对象自身可枚举属性（不考虑继承属性和原型对象）
        cloneTarget[prop] = target[prop];
    }
    return cloneTarget;
  } else {
    return target;
  }
}
复制代码

2.手动实现一个深克隆（简易版）

深克隆：层层拷贝对象或数组的每一层内容promise

function deepClone(target) {
  if (target === null) return null;
  if (typeof target !== 'object') return target;

  const cloneTarget = Array.isArray(target) ? [] : {};
  for (let prop in target) {
    if (target.hasOwnProperty(prop)) {
      cloneTarget[prop] = deepClone(target[prop]);
    }
  }
  return cloneTarget;
}
复制代码

3.手动实现一个深克隆(考虑日期/正则等特殊对象和解决循环引用状况)

const isObject = (target) =>
  (typeof target === "object" || typeof target === "function") &&
  target !== null;

function deepClone(target, map = new Map()) {
  // 先判断该引用类型是否被 拷贝过
  if (map.get(target)) {
    return target;
  }
  // 获取当前值的构造函数：获取它的类型
  let constructor = target.constructor;
  // 检测当前对象target是否与 正则、日期格式对象匹配
  if (/^(RegExp|Date)$/i.test(constructor.name)) {
    return new constructor(target); // 建立一个新的特殊对象(正则类/日期类)的实例
  }
  if (isObject(target)) {
    map.set(target, true); // 为循环引用的对象作标记
    const cloneTarget = Array.isArray(target) ? [] : {};
    for (let prop in target) {
      if (target.hasOwnProperty(prop)) {
        cloneTarget[prop] = deepClone(target[prop], map);
      }
    }
    return cloneTarget;
  } else {
    return target;
  }
}
复制代码

4.手动实现instanceOf的机制

思路：浏览器

步骤1：先取得当前类的原型，当前实例对象的原型链服务器

步骤2：一直循环（执行原型链的查找机制）markdown

取得当前实例对象原型链的原型链（proto = proto.____proto____，沿着原型链一直向上查找）
若是当前实例的原型链____proto__上找到了当前类的原型prototype，则返回 true
若是一直找到Object.prototype.____proto____ == null，Object的基类(null)上面都没找到，则返回 false

function _instanceof (instanceObject, classFunc) {
	let classFunc = classFunc.prototype; // 取得当前类的原型
  let proto = instanceObject.__proto__; // 取得当前实例对象的原型链
  
  while (true) {
    if (proto === null) { // 找到了 Object的基类 Object.prototype.__proto__
      return false;
		};
    if (proto === classFunc) { // 在当前实例对象的原型链上，找到了当前类
      return true;
    }
    proto = proto.__proto__; // 沿着原型链__ptoto__一层一层向上查找
  }
}
复制代码

优化版 (处理兼容问题)

Object.getPrototypeOf ( )：用来获取某个实例对象的原型（内部[[prototype]]属性的值，包含proto属性）

function _instanceof (instanceObject, classFunc) {
	let classFunc = classFunc.prototype; // 取得当前类的原型
  let proto = Object.getPrototypeOf(instanceObject); // 取得当前实例对象的原型链上的属性
  
  while (true) {
    if (proto === null) { // 找到了 Object的基类 Object.prototype.__proto__
      return false;
		};
    if (proto === classFunc) { // 在当前实例对象的原型链上，找到了当前类
      return true;
    }
    proto = Object.getPrototypeOf(proto); // 沿着原型链__ptoto__一层一层向上查找
  }
}
复制代码

5. 手动实现防抖函数

实现函数的防抖（目的是频繁触发中只执行一次）

以最后一次触发为标准

/** * 实现函数的防抖（目的是频繁触发中只执行一次） * @param {*} func 须要执行的函数 * @param {*} wait 检测防抖的间隔频率 * @param {*} immediate 是不是当即执行 True：第一次，默认False：最后一次 * @return {可被调用执行的函数} */
function debounce(func, wati = 500, immediate = false) {
  let timer = null
  return function anonymous(... params) {

    clearTimeout(timer)
    timer = setTimeout(_ => {
      // 在下一个500ms 执行func以前，将timer = null
      //（由于clearInterval只能清除定时器，但timer还有值）
      // 为了确保后续每一次执行都和最初结果同样，赋值为null
      // 也能够经过 timer 是否 为 null 是否有定时器
      timer = null
      func.call(this, ...params)
    }, wait)

  }
}
复制代码

以第一次触发为标准

/** * 实现函数的防抖（目的是频繁触发中只执行一次） * @param {*} func 须要执行的函数 * @param {*} wait 检测防抖的间隔频率 * @param {*} immediate 是不是当即执行 True：第一次，默认False：最后一次 * @return {可被调用执行的函数} */
function debounce(func, wait = 500, immediate = true) {
  let timer = null
  return function anonymous(... params) {

    // 第一点击 没有设置过任何定时器 timer就要为 null
    let now = immediate && !timer
    clearTimeout(timer)
    timer = setTimeout(_ => {
      // 在下一个500ms 执行func以前，将timer = null
      //（由于clearInterval只能在系统内清除定时器，但timer还有值）
      // 为了确保后续每一次执行都和最初结果同样，赋值为null
      // 也能够经过 timer 是否 为 null 是否有定时器
      timer = null!immediate ? func.call(this, ...params) : null
    }, wait)
    now ? func.call(this, ...params) : null

  }
}

function func() {
  console. log('ok')
}
btn. onclick = debounce(func, 500)
复制代码

6.手动实现节流函数

实现函数的节流（目的是频繁触发中缩减频率）

带注释说明版

【第一次触发：reamining是负数，previous被赋值为当前时间】

【第二次触发：假设时间间隔是500ms，第一次执行完以后，20ms以后，当即触发第二次，则remaining = 500 - ( 新的当前时间 - 上一次触发时间 ) = 500 - 20 = 480 】

/** * 实现函数的节流 （目的是频繁触发中缩减频率） * @param {*} func 须要执行的函数 * @param {*} wait 检测节流的间隔频率 * @param {*} immediate 是不是当即执行 True：第一次，默认False：最后一次 * @return {可被调用执行的函数} */
function throttle(func, wait) {
	let timer = null
  let previous = 0  // 记录上一次操做的时间点

  return function anonymous(... params) {
    let now = new Date()  // 当前操做的时间点
    remaining = wait - (now - previous) // 剩下的时间
    if (remaining <= 0) {
      // 两次间隔时间超过频率，把方法执行
      
      clearTimeout(timer); // clearTimeout是从系统中清除定时器，但timer值不会变为null
      timer = null; // 后续能够经过判断 timer是否为null，而判断是否有 定时器
      
      // 此时已经执行func 函数，应该将上次触发函数的时间点 = 如今触发的时间点 new Date()
      previous = new Date(); // 把上一次操做时间修改成当前时间
      func.call(this, ...params);
    } else if(!timer){ 
      
      // 两次间隔的事件没有超过频率，说明尚未达到触发标准，设置定时器等待便可（还差多久等多久）
      // 假设事件间隔为500ms，第一次执行完以后，20ms后再次点击执行，则剩余 480ms，就能等待480ms
      timer = setTimeout( _ => {
        clearTimeout(timer)
        timer = null // 确保每次执行完的时候，timer 都清 0，回到初始状态
        
        //过了remaining时间后，才去执行func，因此previous不能等于初始时的 now
        previous = new Date(); // 把上一次操做时间修改成当前时间
        func.call(this, ...params)；
      }, remaining)
    }
  }
}

function func() {
  console. log('ok')
}
btn. onclick = throttle(func, 500)
复制代码

不带注释版

/** * 实现函数的节流 （目的是频繁触发中缩减频率） * @param {*} func 须要执行的函数 * @param {*} wait 检测节流的间隔频率 * @param {*} immediate 是不是当即执行 True：第一次，默认False：最后一次 * @return {可被调用执行的函数} */
function throttle(func, wait) {
	let timer = null;
  let previous = 0;  

  return function anonymous(... params) {
    let now = new Date(); 
    remaining = wait - (now - previous);
    if (remaining <= 0) {
      clearTimeout(timer); 
      timer = null;
      previous = new Date();
      func.call(this, ...params);
    } else if(!timer){ 
      timer = setTimeout( _ => {
        clearTimeout(timer);
        timer = null; 
        previous = new Date();
        func.call(this, ...params)；
      }, remaining)
    }
  }
}

function func() {
  console. log('ok')
}
btn. onclick = throttle(func, 500);
复制代码

7.手动实现Object.create

Object.create() = function create(prototype) {
  // 排除传入的对象是 null 和 非object的状况
	if (prototype === null || typeof prototype !== 'object') {
    throw new TypeError(`Object prototype may only be an Object: ${prototype}`);
	}
  // 让空对象的 __proto__指向 传进来的 对象(prototype)
  // 目标 {}.__proto__ = prototype
  function Temp() {};
  Temp.prototype = prototype;
  return new Temp;
}
复制代码

8.手动实现内置new的原理

简化版

步骤1：建立一个Func的实例对象（实例.proto = 类.prototype）
步骤2：把Func 当作普通函数执行，并改变this指向
步骤3：分析函数的返回值

/** * Func: 要操做的类（最后要建立这个类的实例） * args：存储将来传递给Func类的实参 */
function _new(Func, ...args) {
  
  // 建立一个Func的实例对象（实例.____proto____ = 类.prototype）
  let obj = {};
  obj.__proto__ = Func.prototype;
  
  // 把Func当作普通函数执行，并改变this指向
  let result = Func.call(obj, ...args);
  
  // 分析函数的返回值
  if (result !== null && /^(object|function)$/.test(typeof result)) {
    return result;
	}
  return obj;
}
复制代码

优化版

proto 在IE浏览器中不支持

let x = { name: "lsh" };
Object.create(x);

{}.__proto__ = x;
复制代码

function _new(Func, ...args) {
  
  // let obj = {};
  // obj.__proto__ = Func.prototype;
  // 建立一个Func的实例对象（实例.____proto____ = 类.prototype）
  let obj = Object.create(Func.prototype);
  
  // 把Func当作普通函数执行，并改变this指向
  let result = Func.call(obj, ...args);
  
  // 分析函数的返回值
  if (result !== null && /^(object|function)$/.test(typeof result)) {
    return result;
  }
  return obj;
}
复制代码

9.手动实现call方法

简易版（不考虑context非对象状况，不考虑Symbol\BigInt 不能 new.constructor( context )状况）

/** * context: 要改变的函数中的this指向，写谁就是谁 * args：传递给函数的实参信息 * this：要处理的函数 fn */
Function.prototype.call = function(context, ...args) {
	// null，undefined，和不传时，context为 window
  context = context == null ? window : context;
  
  let result;
  context['fn'] = this; // 把函数做为对象的某个成员值
  result = context['fn'](...args); // 把函数执行，此时函数中的this就是
	delete context['fn']; // 设置完成员属性后，删除
  return result;
}
复制代码

完善版（context必须对象类型，兼容Symbol等状况）

/** * context: 要改变的函数中的this指向，写谁就是谁 * args：传递给函数的实参信息 * this：要处理的函数 fn */
Function.prototype.call = function(context, ...args) {
	// null，undefined，和不传时，context为 window
  context = context == null ? window : context;
  
  // 必须保证 context 是一个对象类型
  let contextType = typeof context;
  if (!/^(object|function)$/i.test(contextType)) {
    // context = new context.constructor(context); // 不适用于 Symbol/BigInt
  	context = Object(context);
	}
  
  let result;
  context['fn'] = this; // 把函数做为对象的某个成员值
  result = context['fn'](...args); // 把函数执行，此时函数中的this就是
	delete context['fn']; // 设置完成员属性后，删除
  return result;
}
复制代码

10.手动实现apply方法

/** * context: 要改变的函数中的this指向，写谁就是谁 * args：传递给函数的实参信息 * this：要处理的函数 fn */
Function.prototype.apply = function(context, args) {

  context = context == null ? window : context;
  
  let contextType = typeof context;
  if (!/^(object|function)$/i.test(contextType)) {
  	context = Object(context);
	}
  
  let result;
  context['fn'] = this; 
  result = context['fn'](...args); 
	delete context['fn'];
  return result;
}
复制代码

11.手动实现bind方法

/** * this: 要处理的函数 func * context: 要改变的函数中的this指向 obj * params：要处理的函数传递的实参 [10, 20] */
Function.prototype._bind = function(context, ...params) {
  
  let _this = this; // this: 要处理的函数
  return function anonymous (...args) {
    // args： 可能传递的事件对象等信息 [MouseEvent]
    // this：匿名函数中的this是由当初绑定的位置 触发决定的 （总之不是要处理的函数func）
    // 因此须要_bind函数 刚进来时，保存要处理的函数 _this = this
    _this.call(context, ...params.concat(args));
  }
}
复制代码

12.ES5实现数组扁平化flat方法

思路：

循环数组里的每个元素
判断该元素是否为数组
- 是数组的话，继续循环遍历这个元素——数组
- 不是数组的话，把元素添加到新的数组中

let arr = [
    [1, 2, 2],
    [3, 4, 5, 5],
    [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10
];

function myFlat() {
  _this = this; // 保存 this：arr
  let newArr = [];
  // 循环arr中的每一项，把不是数组的元素存储到 newArr中
  let cycleArray = (arr) => {
    for (let i=0; i< arr.length; i++) {
      let item = arr[i];
      if (Array.isArray(item)) { // 元素是数组的话，继续循环遍历该数组
        cycleArray(item);
        continue;
      } else{
        newArr.push(item); // 不是数组的话，直接添加到新数组中
      }
    }
  }
  cycleArray(_this); // 循环数组里的每一个元素
  return newArr; // 返回新的数组对象
}

Array.prototype.myFlat = myFlat;

arr = arr.myFlat(); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
复制代码

13.ES6实现数组扁平化flat方法

const myFlat = (arr) => {
  let newArr = [];
  let cycleArray = (arr) => {
    for(let i = 0; i < arr.length; i++) {
      let item = arr[i];
      if (Array.isArray(item)) {
        cycleArray(item);
        continue;
      } else {
        newArr.push(item);
      }
    }
  }
  cycleArray(arr);
  return newArr;
}

myFlat(arr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
复制代码

14.使用reduce手动实现数组扁平化flat方法

根据Array.isArray逐个判断数组里的每一项是否为数组元素

const myFlat = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? myFlat(cur) : cur);
  }, []);
};
console.log(myFlat(arr)); 
// [12, 23, 34, 56, 78, 90, 100, 110, 120, 130, 140]
复制代码

15.用不一样的三种思想实现数组去重？

思想一：数组最后一项元素替换掉当前项元素，并删除最后一项元素

let arr = [12, 23, 12, 15, 25, 23, 16, 25, 16];

for(let i = 0; i < arr.length - 1; i++) {
  let item = arr[i]; // 取得当前数组中的每一项
  let remainArgs = arr.slice(i+1); // 从 i+1项开始截取数组中剩余元素，包括i+1位置的元素
  if (remainArgs.indexOf(item) > -1) { // 数组的后面元素 包含当前项
    arr[i] = arr[arr.length - 1]; // 用数组最后一项替换当前项
    arr.length--; // 删除数组最后一项
    i--; // 仍从当前项开始比较
  }
}

console.log(arr); // [ 16, 23, 12, 15, 25 ]
复制代码

思想二：新容器存储思想——对象键值对

思想：

把数组元素做为对象属性

经过遍历数组，判断数组元素是否已是对象的属性，若是对象属性定义过，则证实是重复元素，进而删除重复元素

let obj = {};
for (let i=0; i < arr.length; i++) {
  let item = arr[i]; // 取得当前项
  if (typeof obj[item] !== 'undefined') {
    // obj 中存在当前属性，则证实当前项 以前已是 obj属性了
    // 删除当前项
    arr[i] = arr[arr.length-1];
    arr.length--;
    i--;
  }
  obj[item] = item; // obj {10: 10, 16: 16, 25: 25 ...}
}
obj = null; // 垃圾回收
console.log(arr); // [ 16, 23, 12, 15, 25 ]
复制代码

思想三：相邻项的处理方案思想——基于正则

let arr = [12, 23, 12, 15, 25, 23, 16, 25, 16];

arr.sort((a,b) => a-b);
arrStr = arr.join('@') + '@';
let reg = /(\d+@)\1*/g,
    newArr = [];
arrStr.replace(reg, (val, group1) => {
 // newArr.push(Number(group1.slice(0, group1.length-1)));
 newArr.push(parseFloat(group1));
})
console.log(newArr); // [ 12, 15, 16, 23, 25 ]
复制代码

16.基于Generator函数实现async/await原理

**核心：**传递给我一个Generator函数，把函数中的内容基于Iterator迭代器的特色一步步的执行

function readFile(file) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve(file);
    }, 1000);
	})
};

function asyncFunc(generator) {
	const iterator = generator(); // 接下来要执行next
  // data为第一次执行以后的返回结果，用于传给第二次执行
  const next = (data) => {
		let { value, done } = iterator.next(data); // 第二次执行，并接收第一次的请求结果 data
    
    if (done) return; // 执行完毕(到第三次)直接返回
    // 第一次执行next时，yield返回的 promise实例 赋值给了 value
    value.then(data => {
      next(data); // 当第一次value 执行完毕且成功时，执行下一步(并把第一次的结果传递下一步)
    });
  }
  next();
};

asyncFunc(function* () {
	// 生成器函数：控制代码一步步执行 
  let data = yield readFile('a.js'); // 等这一步骤执行执行成功以后，再往下走，没执行完的时候，直接返回
  data = yield readFile(data + 'b.js');
  return data;
})
复制代码

17.基于Promise封装Ajax

思路：

返回一个新的Promise实例
建立HMLHttpRequest异步对象
调用open方法，打开url，与服务器创建连接（发送前的一些处理）
监听Ajax状态信息
若是xhr.readyState == 4（表示服务器响应完成，能够获取使用服务器的响应了）
- xhr.status == 200，返回resolve状态
- xhr.status == 404，返回reject状态
xhr.readyState !== 4，把请求主体的信息基于send发送给服务器

function ajax(url, method) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open(url, method, true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText)
        } else if (xhr.status === 404) {
          reject(new Error('404'))
        }
      } else {
        reject('请求数据失败')
      }
    }
    xhr.send(null)
  })
}
复制代码

18.手动实现JSONP跨域

思路：

建立script标签
设置script标签的src属性，以问号传递参数，设置好回调函数callback名称
插入到html文本中
调用回调函数，res参数就是获取的数据

let script = document.createElement('script');

script.src = 'http://www.baidu.cn/login?username=JasonShu&callback=callback';

document.body.appendChild(script);

function callback (res) {
	console.log(res);
}
复制代码

19.手动实现sleep

某个时间事后，就去执行某个函数，基于Promise封装异步任务

/** * * @param {*} fn 要执行的函数 * @param {*} wait 等待的时间 */
function sleep(wait) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, wait);
  });
}

let sayHello = (name) => console.log(`hello ${name}`);

async function autoRun() {
  await sleep(3000);
  let demo1 = sayHello("时光屋小豪");
  let demo2 = sayHello("掘友们");
  let demo3 = sayHello("aaa");
}

autoRun();
复制代码

20.ES5手动实现数组reduce

特色：

初始值不传时的特殊处理：会默认使用数组中的第一个元素
- 函数的返回结果会做为下一次循环的prev
- 回调函数一共接受四个参数（arr.reduce(prev, next, currentIndex, array))）
  - prev：上一次调用回调时返回的值
  - 正在处理的元素
  - 正在处理的元素的索引
  - 正在遍历的集合对象

Array.prototype.myReduce = function(fn, prev) {
  for (let i = 0; i < this.length; i++) {
    if (typeof prev === 'undefined') {
      prev = fn(this[i], this[i+1], i+1, this);
      ++i;
    } else {
      prev = fn(prev, this[i], i, this);
    }
  }
  return prev
}
复制代码

测试用例

let sum = [1, 2, 3].myReduce((prev, next) => {
  return prev + next
});

console.log(sum); // 6
复制代码

21.手动实现通用柯理化函数

**柯理化函数含义：**是给函数分步传递参数，每次传递部分参数，并返回一个更具体的函数接收剩下的参数，这中间可嵌套多层这样的接收部分参数的函数，直至返回最后结果。

// add的参数不固定，看有几个数字累计相加
function add (a,b,c,d) {
  return a+b+c+d
}

function currying (fn, ...args) {
  // fn.length 回调函数的参数的总和
  // args.length currying函数 后面的参数总和 
  // 如：add (a,b,c,d) currying(add,1,2,3,4)
  if (fn.length === args.length) {  
    return fn(...args)
  } else {
    // 继续分步传递参数 newArgs 新一次传递的参数
    return function anonymous(...newArgs) {
      // 将先传递的参数和后传递的参数 结合在一块儿
      let allArgs = [...args, ...newArgs]
      return currying(fn, ...allArgs)
    }
  }
}

let fn1 = currying(add, 1, 2) // 3
let fn2 = fn1(3)  // 6
let fn3 = fn2(4)  // 10
复制代码

23.ES5实现一个继承

寄生组合继承（ES5继承的最佳方式）

所谓寄生组合式继承，即经过借用构造函数来继承属性，经过原型链的形式来继承方法。

只调用了一次父类构造函数，效率更高。避免在子类.prototype上面建立没必要要的、多余的属性，与其同时，原型链还能保持不变。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
  return this.name;
}

function Child(name, age) {
  Parent.call(this, name); // 调用父类的构造函数，将父类构造函数内的this指向子类的实例
  this.age = age;
}

//寄生组合式继承
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.getAge = function () {
    return this.age;
}

let girl = new Child('Lisa', 18);
girl.getName();
复制代码

24.手动实现发布订阅

发布订阅的核心:： 每次event. emit（发布），就会触发一次event. on（注册）

class EventEmitter {
  constructor() {
    // 事件对象，存放订阅的名字和事件
    this.events = {};
  }
  // 订阅事件的方法
  on(eventName,callback) {
    if (!this.events[eventName]) {
      // 注意数据，一个名字能够订阅多个事件函数
      this.events[eventName] = [callback];
    } else  {
      // 存在则push到指定数组的尾部保存
      this.events[eventName].push(callback)
    }
  }
  // 触发事件的方法
  emit(eventName) {
    // 遍历执行全部订阅的事件
    this.events[eventName] && this.events[eventName].forEach(cb => cb());
  }
}
复制代码

测试用例

let em = new EventEmitter();

function workDay() {
  console.log("天天工做");
}
function makeMoney() {
    console.log("赚100万");
}
function sayLove() {
  console.log("向喜欢的人示爱");
}
em.on("money",makeMoney);
em.on("love",sayLove);
em.on("work", workDay);

em.emit("money");
em.emit("love");  
em.emit("work");  
复制代码

26.手动实现观察者模式

观察者模式（基于发布订阅模式）有观察者，也有被观察者

观察者须要放到被观察者中，被观察者的状态变化须要通知观察者 我变化了内部也是基于发布订阅模式，收集观察者，状态变化后要主动通知观察者

class Subject { // 被观察者 学生
  constructor(name) {
    this.state = '开心的'
    this.observers = []; // 存储全部的观察者
  }
  // 收集全部的观察者
  attach(o){ // Subject. prototype. attch
    this.observers.push(o)
  }
  // 更新被观察者 状态的方法
  setState(newState) {
    this.state = newState; // 更新状态
    // this 指被观察者 学生
    this.observers.forEach(o => o.update(this)) // 通知观察者 更新它们的状态
  }
}

class Observer{ // 观察者 父母和老师
  constructor(name) {
    this.name = name
  }
  update(student) {
    console.log('当前' + this.name + '被通知了', '当前学生的状态是' + student.state)
  }
}

let student = new Subject('学生'); 

let parent = new Observer('父母'); 
let teacher = new Observer('老师'); 

// 被观察者存储观察者的前提，须要先接纳观察者
student. attach(parent); 
student. attach(teacher); 
student. setState('被欺负了');
复制代码

27.手动实现Object.freeze

Object.freeze冻结一个对象，让其不能再添加/删除属性，也不能修改该对象已有属性的可枚举性、可配置可写性，也不能修改已有属性的值和它的原型属性，最后返回一个和传入参数相同的对象。

function myFreeze(obj){
  // 判断参数是否为Object类型，若是是就封闭对象，循环遍历对象。去掉原型属性，将其writable特性设置为false
  if(obj instanceof Object){
    Object.seal(obj);  // 封闭对象
    for(let key in obj){
      if(obj.hasOwnProperty(key)){
        Object.defineProperty(obj,key,{
          writable:false   // 设置只读
        })
        // 若是属性值依然为对象，要经过递归来进行进一步的冻结
        myFreeze(obj[key]);  
      }
    }
  }
}
复制代码

28.手动实现Promise.all

Promise.all：有一个promise任务失败就所有失败

Promise.all方法返回的是一个promise

function isPromise (val) {
  return typeof val.then === 'function'; // (123).then => undefined
}

Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    let arr = []; // 存放 promise执行后的结果
    let index = 0; // 计数器，用来累计promise的已执行次数
    const processData = (key, data) => {
      arr[key] = data; // 不能使用数组的长度来计算
      /* if (arr.length == promises.length) { resolve(arr); // [null, null , 1, 2] 因为Promise异步比较慢，因此还未返回 } */
     if (++index === promises.length) {
      // 必须保证数组里的每个
       resolve(arr);
     }
    }
    // 遍历数组依次拿到执行结果
    for (let i = 0; i < promises.length; i++) {
      let result = promises[i];
      if(isPromise(result)) {
        // 让里面的promise执行，取得成功后的结果
        // data promise执行后的返回结果
        result.then((data) => {
          // 处理数据，按照原数组的顺序依次输出
          processData(i ,data)
        }, reject)  // reject本事就是个函数 因此简写了
      } else {
        // 1 , 2
        processData(i ,result)
      }
    }
  })
}
复制代码

测试用例

let fs = require('fs').promises;

let getName = fs.readFile('./name.txt', 'utf8');
let getAge = fs.readFile('./age.txt', 'utf8');

Promise.all([1, getName, getAge, 2]).then(data => {
	console.log(data); // [ 1, 'name', '11', 2 ]
})
复制代码

29.手动实现Promise.allSettled

MDN: Promise.allSettled()方法返回一个在全部给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每一个对象表示对应的promise结果。

当您有多个彼此不依赖的异步任务成功完成时，或者您老是想知道每一个promise的结果时，一般使用它。

【译】Promise.allSettled跟Promise.all相似, 其参数接受一个Promise的数组, 返回一个新的Promise, 惟一的不一样在于, 其不会进行短路, 也就是说当Promise所有处理完成后咱们能够拿到每一个Promise的状态, 而无论其是否处理成功。

用法 | 测试用例

let fs = require('fs').promises;

let getName = fs.readFile('./name.txt', 'utf8'); // 读取文件成功
let getAge = fs.readFile('./age.txt', 'utf8');

Promise.allSettled([1, getName, getAge, 2]).then(data => {
	console.log(data);
});
// 输出结果
/* [ { status: 'fulfilled', value: 1 }, { status: 'fulfilled', value: 'zf' }, { status: 'fulfilled', value: '11' }, { status: 'fulfilled', value: 2 } ] */

let getName = fs.readFile('./name123.txt', 'utf8'); // 读取文件失败
let getAge = fs.readFile('./age.txt', 'utf8');
// 输出结果
/* [ { status: 'fulfilled', value: 1 }, { status: 'rejected', value: [Error: ENOENT: no such file or directory, open './name123.txt'] { errno: -2, code: 'ENOENT', syscall: 'open', path: './name123.txt' } }, { status: 'fulfilled', value: '11' }, { status: 'fulfilled', value: 2 } ] */
复制代码

实现

function isPromise (val) {
  return typeof val.then === 'function'; // (123).then => undefined
}

Promise.allSettled = function(promises) {
  return new Promise((resolve, reject) => {
    let arr = [];
    let times = 0;
    const setData = (index, data) => {
      arr[index] = data;
      if (++times === promises.length) {
        resolve(arr);
      }
      console.log('times', times)
    }

    for (let i = 0; i < promises.length; i++) {
      let current = promises[i];
      if (isPromise(current)) {
        current.then((data) => {
          setData(i, { status: 'fulfilled', value: data });
        }, err => {
          setData(i, { status: 'rejected', value: err })
        })
      } else {
        setData(i, { status: 'fulfilled', value: current })
      }
    }
  })
}
复制代码

30.手动实现Promise.prototype.finally

前面的promise无论成功仍是失败，都会走到finally中，而且finally以后，还能够继续then（说明它仍是一个then方法是关键），而且会将初始的promise值原封不动的传递给后面的then.

Promise.prototype.finally最大的做用

finally里的函数，不管如何都会执行，并会把前面的值原封不动传递给下一个then方法中

（至关于起了一个中间过渡的做用）——对应状况1，2，3
若是finally函数中有promise等异步任务，会等它们所有执行完毕，再结合以前的成功与否状态，返回值

Promise.prototype.finally六大状况用法

// 状况1
Promise.resolve(123).finally((data) => { // 这里传入的函数，不管如何都会执行
  console.log(data); // undefined
})

// 状况2 (这里，finally方法至关于作了中间处理，起一个过渡的做用)
Promise.resolve(123).finally((data) => {
  console.log(data); // undefined
}).then(data => {
  console.log(data); // 123
})

// 状况3 (这里只要reject，都会走到下一个then的err中)
Promise.reject(123).finally((data) => {
  console.log(data); // undefined
}).then(data => {
  console.log(data);
}, err => {
  console.log(err, 'err'); // 123 err
})

// 状况4 (一开始就成功以后，会等待finally里的promise执行完毕后，再把前面的data传递到下一个then中)
Promise.resolve(123).finally((data) => {
  console.log(data); // undefined
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('ok');
    }, 3000)
  })
}).then(data => {
  console.log(data, 'success'); // 123 success
}, err => {
  console.log(err, 'err');
})

// 状况5 (虽然一开始成功，可是只要finally函数中的promise失败了，就会把其失败的值传递到下一个then的err中)
Promise.resolve(123).finally((data) => {
  console.log(data); // undefined
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('rejected');
    }, 3000)
  })
}).then(data => {
  console.log(data, 'success');
}, err => {
  console.log(err, 'err'); // rejected err
})

// 状况6 (虽然一开始失败，可是也要等finally中的promise执行完，才能把一开始的err传递到err的回调中)
Promise.reject(123).finally((data) => {
  console.log(data); // undefined
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('resolve');
    }, 3000)
  })
}).then(data => {
  console.log(data, 'success');
}, err => {
  console.log(err, 'err'); // 123 err
})
复制代码

源码实现

Promise.prototype.finally = function (callback) {
  return this.then((data) => {
    // 让函数执行 内部会调用方法，若是方法是promise，须要等待它完成
    // 若是当前promise执行时失败了，会把err传递到，err的回调函数中
    return Promise.resolve(callback()).then(() => data); // data 上一个promise的成功态
  }, err => {
    return Promise.resolve(callback()).then(() => {
      throw err; // 把以前的失败的err，抛出去
    });
  })
}
复制代码

本文总结

详见脑图哦~

看完三件事❤️

若是你以为这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：

点赞，转发，有大家的『点赞和评论』，才是我创造的动力。
关注公众号『前端时光屋』，不按期分享原创知识。
同时能够期待后续文章ing🚀

「灵魂之做」2020斩获30道高频JS手撕面试题

前言

1.手动实现一个浅克隆

2.手动实现一个深克隆（简易版）

3.手动实现一个深克隆(考虑日期/正则等特殊对象 和 解决循环引用状况)

4.手动实现instanceOf的机制

优化版 (处理兼容问题)

5. 手动实现防抖函数

以最后一次触发为标准

以第一次触发为标准

6.手动实现节流函数

带注释说明版

不带注释版

7.手动实现Object.create

8.手动实现内置new的原理

简化版

优化版

9.手动实现call方法

简易版（不考虑context非对象状况，不考虑Symbol\BigInt 不能 new.constructor( context )状况）

完善版（context必须对象类型，兼容Symbol等状况）

10.手动实现apply方法

11.手动实现bind方法

12.ES5实现数组扁平化flat方法

13.ES6实现数组扁平化flat方法

14.使用reduce手动实现数组扁平化flat方法

15.用不一样的三种思想实现数组去重？

思想一：数组最后一项元素替换掉当前项元素，并删除最后一项元素

思想二：新容器存储思想——对象键值对

思想三：相邻项的处理方案思想——基于正则

16.基于Generator函数实现async/await原理

17.基于Promise封装Ajax

18.手动实现JSONP跨域

19.手动实现sleep

20.ES5手动实现数组reduce

21.手动实现通用柯理化函数

23.ES5实现一个继承

24.手动实现发布订阅

26.手动实现观察者模式

27.手动实现Object.freeze

28.手动实现Promise.all

29.手动实现Promise.allSettled

用法 | 测试用例

实现

30.手动实现Promise.prototype.finally

Promise.prototype.finally最大的做用

Promise.prototype.finally六大状况用法

源码实现

本文总结

看完三件事❤️

3.手动实现一个深克隆(考虑日期/正则等特殊对象和解决循环引用状况)