Shulou(Shulou.com)06/02 Report--

This article focuses on "Analysis of some important api implementations in JS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "some important api implementation analysis in JS".

1. The map method of realizing array with ES5.

Core points:

1. What are the parameters of the callback function and how to handle the return value.

two。 The original array is not modified.

Array.prototype.MyMap = function (fn, context) {var arr = Array.prototype.slice.call (this); / / it is not used because it is ES5. The expansion character var mappedArr = []; for (var I = 0; I)

< arr.length; i++ ){ if(!arr.hasOwnProperty(i))continue; mappedArr.push(fn.call(context, arr[i], i, this)); } return mappedArr; } 二、用ES5实现数组的reduce方法 核心要点: 1、初始值不传怎么处理 2、回调函数的参数有哪些，返回值如何处理。 Array.prototype.myReduce = function(fn, initialValue) { var arr = Array.prototype.slice.call(this); var res, startIndex; res = initialValue ? initialValue : arr[0]; startIndex = initialValue ? 0 : 1; for(var i = startIndex; i < arr.length; i++) { res = fn.call(null, res, arr[i], i, this); } return res; } 三、实现call/apply 思路: 利用this的上下文特性。 //实现apply只要把下一行中的...args换成args即可Function.prototype.myCall = function(context = window, ...args) { let func = this; let fn = Symbol("fn"); context[fn] = func; let res = context[fn](...args);//重点代码，利用this指向，相当于context.caller(...args) delete context[fn]; return res;} 四、实现Object.create方法(常用)function create(proto) { function F() {}; F.prototype = proto; return new F(); }五、实现bind方法 核心要点: 1.对于普通函数，绑定this指向 2.对于构造函数，要保证原函数的原型对象上的属性不能丢失 Function.prototype.bind = function(context, ...args) { let self = this;//谨记this表示调用bind的数 let fBound = function() { //this instanceof fBound为true表示构造函数的情况。new func.bind(obj) return self.apply(this instanceof fBound ? this : context || window, args); } fBound.prototype = Object.create(this.prototype);//保证原函数的原型对象上的属性不丢失 return fBound; } 大家平时说的手写bind，其实就这么简单：） 六、实现new关键字 核心要点: 创建一个全新的对象，这个对象的__proto__要指向构造函数的原型对象 执行构造函数 返回值为object类型则作为new方法的返回值返回，否则返回上述全新对象 function myNew(fn, ...args) { let instance = Object.create(fn.prototype); let res = fn.apply(instance, args); return typeof res === 'object' ? res: instance; } 七、实现instanceof的作用 核心要点：原型链的向上查找。 function myInstanceof(left, right) { let proto = Object.getPrototypeOf(left); while(true) { if(proto == null) return false; if(proto == right.prototype) return true; proto = Object.getPrototypeof(proto); } } 八、实现单例模式 核心要点: 用闭包和Proxy属性拦截 function proxy(func) { let instance; let handler = { constructor(target, args) { if(!instance) { instance = Reflect.constructor(fun, args); } return instance; } } return new Proxy(func, handler); } 九、实现数组的flat 方式其实很多，之前我做过系统整理，有六种方法，请参考： JS数组扁平化(flat)方法总结 十、实现防抖功能 核心要点: 如果在定时器的时间范围内再次触发，则重新计时。 const debounce = (fn, delay) =>

{let timer = null; return (... args) = > {clearTimeout (timer); timer = setTimeout (()) = > {fn.apply (this, args);}, delay);};}

11. Realize the function of saving expenditure

Core points:

If it is triggered again within the time range of the timer, it will be ignored until the current timer is completed before the next timer can be started.

Const throttle = (fn, delay = 500) = > {let flag = true; return (... args) = > {if (! flag) return; flag = false; setTimeout (() = > {fn.apply (this, args); flag = true;}, delay);};}

Implement EventEmi XIII and deep copy with publish / subscribe model

The following is a deep copy of the simple version, without considering the circular reference and the processing of Buffer, Promise, Set and Map. If it is implemented one by one, it is too complex, and it is not realistic for the interview to be written in a short time. If you are interested, you can go here to further implement:

Deep copy Ultimate Exploration.

Const clone = parent = > {/ / determine type const isType = (target, type) = > `[object ${type}]` = Object.prototype.toString.call (target) / / process regular const getRegExp = re = > {let flags = ""; if (re.global) flags + = "g"; if (re.ignoreCase) flags + = "I"; if (re.multiline) flags + = "m"; return flags;} Const _ clone = parent = > {if (parent = null) return null; if (typeof parent! = = "object") return parent; let child, proto; if (isType (parent, "Array")) {/ / A pair of arrays child = [];} else if (isType (parent, "RegExp")) {/ / A pair of regular objects do special processing child = new RegExp (parent.source, getRegExp (parent)) If (parent.lastIndex) child.lastIndex = parent.lastIndex;} else if (isType (parent, "Date")) {/ / A special treatment for Date objects child = new Date (parent.getTime ());} else {/ / handle object prototype proto = Object.getPrototypeOf (parent); / / use Object.create to cut off prototype chain child = Object.create (proto) } for (let i in parent) {/ / Recursive child [I] = _ clone (parent [I]);} return child;}; return _ clone (parent);}; at this point, I believe you have a deeper understanding of "some important api implementation analysis in JS". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.