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

这篇文章主要介绍了手写Pollyfill有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇手写Pollyfill有哪些文章都会有所收获，下面我们一起来看看吧。

new

测试用例：

function Fn (name) { this.name = name}console.log(myNew(Fn('lulu')))

实现：

function myNew () { const obj = {} const Fn = Array.prototype.shift.call(arguments) // eslint-disable-next-line no-proto obj.__proto__ = Fn.prototype const returnVal = Fn.apply(obj, arguments) return typeof returnVal === 'object' ? returnVal : obj}bind

测试用例：

this.x = 9const obj = { x: 81, getX: function () { return this.x }}console.log(obj.getX()) // 81const retrieveX = obj.getXconsole.log(retrieveX()) // 9const boundGetX = retrieveX.bind(obj)console.log(boundGetX()) // 81

实现：

Function.prototype.mybind = function () { const outerArgs = Array.from(arguments) const ctx = outerArgs.shift() const self = this return function () { const innerArgs = Array.from(arguments) return self.apply(ctx, [...outerArgs, ...innerArgs]) }}instanceof

测试用例：

console.log(myInstanceof("111", String)); //falseconsole.log(myInstanceof(new String("111"), String));//true

实现：

function myInstanceof(left, right) { //基本数据类型直接返回false if(typeof left !== 'object' || left === null) return false; //getProtypeOf是Object对象自带的一个方法，能够拿到参数的原型对象 let proto = Object.getPrototypeOf(left); while(true) { //查找到尽头，还没找到 if(proto == null) return false; //找到相同的原型对象 if(proto == right.prototype) return true; proto = Object.getPrototypeOf(proto); }}debounce

在规定时间内函数只会触发一次，如果再次触发，会重新计算时间。

/*** * @description 防抖函数 * @param func 函数 * @param wait 延迟执行毫秒数 * @param immediate 是否立即执行 * */function debouncing(func, wait = 1000, immediate = true) { let timer = null; return function () { let args = arguments; let context = this; if (timer) { clearTimeout(timer); } if (!immediate) { //第一种：n秒之后执行，n秒内再次触发会重新计算时间 timer = setTimeout(() => { //确保this指向不会改变 func.apply(context, [...args]); }, wait); } else { //第二种：立即执行，n秒内不可再次触发 let callnew = !timer; timer = setTimeout(() => { timer = null; console.log('kaka') }, wait); if (callnew) func.apply(context, [...args]) } }}function fn() { console.log('debluncing')}let f1 = debouncing(fn, 1000);setInterval(() => { f1()}, 1000);throttle

节流指的是函数一定时间内不会再次执行，用作稀释函数的执行频率。

/** * @description 节流函数 * @param func 函数 * @param wait 延迟执行毫秒数 * @param type 1：时间戳版本 2: 定时器版本 * */function throttle(func, wait = 1000, type = 1) { if (type === 1) { let timeout = null; return function () { const context = this; const args = arguments; if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, [...args]); }, wait); } } } else { let previous = 0; return function () { const context = this; const args = arguments; let newDate = new Date().getTime(); if (newDate - previous > wait) { func.apply(context, [...args]); previous = newDate; } } }}function fn() { console.log('throttle')}const f1 = throttle(fn);setInterval(() => { f1()}, 100);deepClone

测试用例：

const map = new Map()map.set('key', 'value')map.set('name', 'kaka')const set = new Set()set.add('11').add('12')const target = { field1: 1, field2: undefined, field3: { child: 'child' }, field4: [ 2, 8 ], empty: null, map, set}target.target = targetconst target1 = deepClone(target)target1.a = 'a'console.log('关于"手写Pollyfill有哪些"这篇文章的内容就介绍到这里，感谢各位的阅读!相信大家对"手写Pollyfill有哪些"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。

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.