手寫Pollyfill有哪些

這篇文章主要介紹了手寫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 = 9
const obj = {
  x: 81,
  getX: function () {
    return this.x
  }
}
console.log(obj.getX()) // 81


const retrieveX = obj.getX
console.log(retrieveX()) // 9


const 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)); //false
console.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 = target
const target1 = deepClone(target)
target1.a = 'a'
console.log('

關于“手寫Pollyfill有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“手寫Pollyfill有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。