防抖、节流、call、bind、apply、new、柯里化实现

最新推荐文章于 2022-04-15 19:02:25 发布

转载最新推荐文章于 2022-04-15 19:02:25 发布 · 186 阅读

本文深入探讨JavaScript中的函数优化策略，包括节流（throttle）、防抖（debounce）、柯里化（currying）等高级技术的应用，以及如何利用原型链实现call、apply和bind方法。此外，还讲解了new操作符的工作原理，并提供了继承和斐波那契数列的高效实现。

throttle

function throttle(fn, threshhold) {

    var last, timerId;

    threshhold || (threshhold = 250);

    return function() {

      var now = Date.now();

      if(last && now - last < threshhold) {

        clearTimeout(timerId);

        timerId = setTimeout(() => {

          fn.apply(this, arguments);

        }, threshhold)

      } else {

        last = now;

        fn.apply(this, arguments);

      }

    }

  }

debounce

function debounce(fn, interval) {

    var timerId = null;

    return function() {

      clearTimeout(timerId);

      timerId = setTimeout(() => {

        fn.apply(this, arguments)

      }, interval)

    }

  }

call

Function.prototype.call = function(cxt, ...args) {

    ctx || (ctx = window);

    ctx.fn = this;

    let args = [];

    let r = eval(`ctx.fn(${args})`);

    delete ctx.fn;

    return r;

  }

apply

Funtion.prototype.apply = function(ctx, args) {

    ctx || (ctx = window);

    ctx.fn = this;

    let r = eval(`ctx.fn(${args})`)

    delete ctx.fn;

    return r;

  }

bind

Funtion.prototype.bind = function(obj) {

    if(type of this !== 'function') {

      return;

    }

    var _self = this;

    var args = [].slice.call(arguments, 1);

    return function() {

      return _self.apply(obj, args.concat([].slice.call(arguments)))

    }

  }

new

new做了什么：

创建了一个全新的对象。
这个对象会被执行[[Prototype]]（也就是proto）链接。
生成的新对象会绑定到函数调用的this。
通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

function newOps (ctor) {

      if(typeof ctor !== 'function') {

        throw new Error('the first param must be a function');

      }

      const new0bj = Object.create(ctor.prototype);

      const args = [].slice.call(arguments, 1);

      const ctorReturnResult = ctor.apply(newObj, args);

      if((typeof ctorReturnResult === 'object' && typeof ctorReturnResult !== null) || typeof ctorReturnResult === 'function') {

        return ctorReturnResult;

      }

      return newObj;

    }

柯里化

function currying(fn) {

  const argArr = [];

  let closure = function(...args) {

    if(args.length > 0) {

      argArr = [...argArr, ...args];

      return closure;

    }

    return fn(...argArr);

  }

  return closure;

}

继承

function Dog(color) {

Animal.apply(this, arguments);

this.name = 'dog';

}

/* 注意下面两行 */

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.constructor = Dog;

斐波那契数列

R1

function fib(n) {

if(n === 0 || n === 1) return n;

return fib(n - 2) + fib(n - 1);

}

R2

let fib = (function() {

  let memory = []

  return function(n) {

      if(memory[n] !== undefined) {

        return memory[n]

    }

    return memory[n] = (n === 0 || n === 1) ? n : fibonacci(n-1) + fibonacci(n-2)

  }

})()