图解JavaScript——代码实现【1】（new、Object.create()、Object.assign()、flat()等十四种代码原理实现不香吗？）

关注公众号“执鸢者”&＃xff0c;回复“书籍”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频&＃xff0c;回复“代码实现”获取本节整体思维导图。

使用思维导图来对new、instanceof、Object.create()、Object.assign()、map()、filter()、reduce()、flat()、call()、apply()、bind()、防抖、节流、深拷贝的实现原理进行阐述&＃xff0c;然后利用js代码进行实现&＃xff0c;为前端切图仔在求职工作中再添一门武功秘籍&＃xff0c;提升自身内功。本节为第一节&＃xff0c;后面将继续探索Promise、Async、Axios、发布订阅等的实现&＃xff0c;请各位大佬关注指正。

一、new

function New (Fn, ...arg) {// 一个新的对象被创建const result &＃61; {};// 该对象的__proto__属性指向该构造函数的原型if (Fn.prototype !&＃61;&＃61; null) {Object.setPrototypeOf(result, Fn.prototype);}// 将执行上下文&＃xff08;this&＃xff09;绑定到新创建的对象中const returnResult &＃61; Fn.apply(result, arg);// 如果构造函数有返回值&＃xff0c;那么这个返回值将取代第一步中新创建的对象。否则返回该对象if ((typeof returnResult &＃61;&＃61;&＃61; "object" || typeof returnResult &＃61;&＃61;&＃61; "function") && returnResult !&＃61;&＃61; null) {return returnResult;}return result;
}


二、instanceof

function Instanceof(left, right) {let leftVal &＃61; Object.getPrototypeOf(left);const rightVal &＃61; right.prototype;while (leftVal !&＃61;&＃61; null) {if (leftVal &＃61;&＃61;&＃61; rightVal)return true;leftVal &＃61; Object.getPrototypeOf(leftVal);}return false;
}


三、Object

Object上有很多静态方法&＃xff0c;本次只实现Object.create()和Object.assign(),有兴趣的可以下载思维导图进行完善。

3.1 Object.create()

Object.ObjectCreate &＃61; (proto, propertiesObject)&＃61;> {// 对输入进行检测if (typeof proto !&＃61;&＃61; &＃39;object&＃39; && typeof proto !&＃61;&＃61; &＃39;function&＃39; && proto !&＃61;&＃61; null) {throw new Error(&＃96;Object prototype may only be an Object or null:${proto}&＃96;);}// 新建一个对象const result &＃61; {};// 将该对象的原型设置为protoObject.setPrototypeOf(result, proto);// 将属性赋值给该对象Object.defineProperties(result, propertiesObject);// 返回该对象return result;
}


3.2 Object assign()

function ObjectAssign(target, ...sources) {// 对第一个参数的判断&＃xff0c;不能为undefined和nullif (target &＃61;&＃61;&＃61; undefined || target &＃61;&＃61;&＃61; null) {throw new TypeError(&＃39;cannot convert first argument to object&＃39;);}// 将第一个参数转换为对象(不是对象转换为对象)const targetObj &＃61; Object(target);// 将源对象(source)自身的所有可枚举属性复制到目标对象&＃xff08;target&＃xff09;for (let i &＃61; 0; i }// 由于挂载到Object的assign是不可枚举的,直接挂载上去是可枚举的&＃xff0c;所以采用这种方式
if (typeof Object.myAssign !&＃61;&＃61; &＃39;function&＃39;) {Object.defineProperty(Object, "myAssign", {value : ObjectAssign,writable: true,enumerable: false,configurable: true});
}


四、数组原理

数组有很多方法&＃xff0c;我们此处只实现了比较常见的map()、filter()、reduce()、flat(),有兴趣的童鞋可以继续补充。

4.1 map

Array.prototype.myMap &＃61; function(fn) {// 判断输入的第一个参数是不是函数if (typeof fn !&＃61;&＃61; &＃39;function&＃39;) {throw new TypeError(fn &＃43; &＃39;is not a function&＃39;);}// 获取需要处理的数组内容const arr &＃61; this;const len &＃61; arr.length;// 新建一个空数组用于装载新的内容const temp &＃61; new Array(len);// 对数组中每个值进行处理for (let i &＃61; 0; i }


4.2 filter

Array.prototype.myFilter &＃61; function (fn) {if (typeof fn !&＃61;&＃61; &＃39;function&＃39;) {throw new TypeError(&＃96;${fn} is not a function&＃96;);}// 获取该数组const arr &＃61; this;// 获取该数组长度const len &＃61; this.length >>> 0;// 新建一个新的数组用于放置该内容const temp &＃61; [];// 对数组中每个值进行处理for (let i &＃61; 0; i }


4.3 reduce

Array.prototype.myReduce &＃61; function(fn) {if (typeof fn !&＃61;&＃61; &＃39;function&＃39;) {throw new TypeError(&＃96;${fn} is not a function&＃96;);}const arr &＃61; this;const len &＃61; arr.length >>> 0;let value;// 最终返回的值let k &＃61; 0;// 当前索引if (arguments.length >&＃61; 2) {value &＃61; arguments[1];} else {// 当数组为稀疏数组时&＃xff0c;判断数组当前是否有元素&＃xff0c;如果没有索引加一while (k &＃61; len) {throw new TypeError(&＃39;Reduce of empty array with no initial value&＃39;);}value &＃61; arr[k&＃43;&＃43;];}while (k }


4.4 flat

// 使用reduce和concat
Array.prototype.flat1 &＃61; function () {return this.reduce((acc, val) &＃61;> acc.concat(val), []);
}


// 使用reduce &＃43; concat &＃43; isArray &＃43;recursivity
Array.prototype.flat2 &＃61; function (deep &＃61; 1) {const flatDeep &＃61; (arr, deep &＃61; 1) &＃61;> {// return arr.reduce((acc, val) &＃61;> Array.isArray(val) && deep > 0 ? [...acc, ...flatDeep(val, deep - 1)] : [...acc, val], []);return deep > 0 ? arr.reduce((acc, val) &＃61;> acc.concat(Array.isArray(val) ? flatDeep(val, deep - 1) : val), []) : arr.slice();}return flatDeep(this, deep);
}


// 使用forEach &＃43; concat &＃43; isArray &＃43;recursivity
// forEach 遍历数组会自动跳过空元素
Array.prototype.flat3 &＃61; function (deep &＃61; 1) {const result &＃61; [];(function flat(arr, deep) {arr.forEach((item) &＃61;> {if (Array.isArray(item) && deep > 0) {flat(item, deep - 1);} else {result.push(item);}})})(this, deep);return result;
}


// 使用for of &＃43; concat &＃43; isArray &＃43;recursivity
// for of 遍历数组会自动跳过空元素
Array.prototype.flat4 &＃61; function (deep &＃61; 1) {const result &＃61; [];(function flat(arr, deep) {for(let item of arr) {if (Array.isArray(item) && deep > 0) {flat(item, deep - 1);} else {// 去除空元素&＃xff0c;因为void 表达式返回的都是undefined&＃xff0c;不适用undefined是因为undefined在局部变量会被重写item !&＃61;&＃61; void 0 && result.push(item);}}})(this, deep);return result;
}


// 使用堆栈stack
Array.prototype.flat5 &＃61; function(deep &＃61; 1) {const stack &＃61; [...this];const result &＃61; [];while (stack.length > 0) {const next &＃61; stack.pop();if (Array.isArray(next)) {stack.push(...next);} else {result.push(next);}}// 反转恢复原来顺序return result.reverse();
}

五、改变this指向

js中有三种方式改变this指向&＃xff0c;分别是call、apply和bind。

5.1 call

Function.prototype.call1 &＃61; function(context, ...args) {// 获取第一个参数&＃xff08;注意第一个参数为null或undefined是&＃xff0c;this指向window&＃xff09;&＃xff0c;构建对象context &＃61; context ? Object(context) : window;// 将对应函数传入该对象中context.fn &＃61; this;// 获取参数并执行相应函数let result &＃61; context.fn(...args);delete context.fn;

5.2 apply

Function.prototype.apply1 &＃61; function(context, arr) {context &＃61; context ? Object(context) : window;context.fn &＃61; this;let result &＃61; arr ? context.fn(...arr) : context.fn();delete context.fn;return result;
}


5.3 bind

Function.prototype.bind1 &＃61; function (context, ...args) {if (typeof this !&＃61;&＃61; &＃39;function&＃39;) {throw new TypeError(&＃39;The bound object needs to be a function&＃39;);}const self &＃61; this;const fNOP &＃61; function() {};const fBound &＃61; function(...fBoundArgs) {// 指定this// 当作为构造函数时&＃xff0c;this 指向实例&＃xff0c;此时 this instanceof fBound 结果为 truereturn self.apply(this instanceof fNOP ? this : context, [...args, ...fBoundArgs]);}// 修改返回函数的 prototype 为绑定函数的 prototype,为了避免直接修改this的原型&＃xff0c;所以新建了一个fNOP函数作为中介if (this.prototype) {fNOP.prototype &＃61; this.prototype;}fBound.prototype &＃61; new fNOP();return fBound;
}


六、优化

防抖与节流函数是一种最常用的 高频触发优化方式&＃xff0c;能对性能有较大的帮助。

6.1 防抖

function debounce(fn, wait, immediate) {let timer &＃61; null;return function(...args) {// 立即执行的功能(timer为空表示首次触发)if (immediate && !timer) {fn.apply(this, args);}// 有新的触发&＃xff0c;则把定时器清空timer && clearTimeout(timer);// 重新计时timer &＃61; setTimeout(() &＃61;> {fn.apply(this, args);}, wait)}
}


6.2 节流

// 时间戳版本
function throttle(fn, wait) {// 上一次执行时间let previous &＃61; 0;return function(...args) {// 当前时间let now &＃61; &＃43;new Date();if (now - previous > wait) {previous &＃61; now;fn.apply(this, args);}}
}


// 定时器版本
function throttle(fn, wait) {let timer &＃61; null;return function(...args) {if (!timer) {timer &＃61; setTimeout(() &＃61;> {fn.apply(this, args);timer &＃61; null;}, wait)}}
}


七、深拷贝

// 乞巧版
function cloneDeep1(source) {return JSON.parse(JSON.stringify(source));
}


// 递归版
function cloneDeep2(source) {// 如果输入的为基本类型&＃xff0c;直接返回if (!(typeof source &＃61;&＃61;&＃61; &＃39;object&＃39; && source !&＃61;&＃61; null)) {return source;}// 判断输入的为数组函数对象&＃xff0c;进行相应的构建const target &＃61; Array.isArray(source) ? [] : {};for (let key in source) {// 判断是否是自身属性if (Object.prototype.hasOwnProperty.call(source, key)) {if (typeof source &＃61;&＃61;&＃61; &＃39;object&＃39; && source !&＃61;&＃61; null) {target[key] &＃61; cloneDeep2(source[key]);} else {target[key] &＃61; source[key];}}}return target;
}


// 循环方式
function cloneDeep3(source) {if (!(typeof source &＃61;&＃61;&＃61; &＃39;object&＃39; && source !&＃61;&＃61; null)) {return source;}const root &＃61; Array.isArray(source) ? [] : {};// 定义一个栈const loopList &＃61; [{parent: root,key: undefined,data: source,}];while (loopList.length > 0) {// 深度优先const node &＃61; loopList.pop();const parent &＃61; node.parent;const key &＃61; node.key;const data &＃61; node.data;// 初始化赋值目标&＃xff0c;key为undefined则拷贝到父元素&＃xff0c;否则拷贝到子元素let res &＃61; parent;if (typeof key !&＃61;&＃61; &＃39;undefined&＃39;) {res &＃61; parent[key] &＃61; Array.isArray(data) ? [] : {};}for (let key in data) {if (data.hasOwnProperty(key)) {if (typeof data[key] &＃61;&＃61;&＃61; &＃39;object&＃39; && data !&＃61;&＃61; null) {loopList.push({parent: res,key: key,data: data[key],});} else {res[key] &＃61; data[key];}}}}return root;
}


相关章节

图解Javascript————基础篇

图解Javascript————进阶篇

图解23种设计模式&＃xff08;TypeScript版&＃xff09;

欢迎大家关注公众号(回复“代码实现”获取本节的思维导图,回复“书籍”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频)