前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >防抖、节流、call、bind、apply、new、柯里化实现

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

作者头像
前端迷
发布2019-09-30 14:34:12
2970
发布2019-09-30 14:34:12
举报
文章被收录于专栏:前端迷前端迷前端迷

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做了什么:

  1. 创建了一个全新的对象。
  2. 这个对象会被执行[[Prototype]](也就是proto)链接。
  3. 生成的新对象会绑定到函数调用的this。
  4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
  5. 如果函数没有返回对象类型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)  }})()
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-09-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端迷 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • throttle
  • debounce
  • call
  • apply
  • bind
  • new
  • 柯里化
  • 继承
  • 斐波那契数列
    • R1
      • R2
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档