Write a bind

  • The first argument takes this object
  • Returns the function, depending on how it is used
    • Direct call
      • Change the direction of this
      • Stitching parameters
      • Call a function
    • The constructor
      • Do not change the this pointer and ignore the first argument
      • Stitching parameters
      • The new function
Function.prototype.myBind = function(_this, ... args) { const fn = this return function F(... args2) { return this instanceof F ? new fn(... args, ... args2) : Fn. apply(_this, args.concat(args2))}} B) {this. V = (enclosing v | | 0) + a + b returnthis} const NewSum = Sum. MyBind NewSum (} {v: 1, 2) (3) / / call: {v: 6} new NewSum(3) // constructor: {v: 5} ignore myBind bind thisCopy the code

Write a call

  • The first argument receives this object
  • Change this to: pass a function as a method to this object
  • Expand syntax to support passing and calling parameter lists
  • Calls and deletes the method, returning the result
Function.prototype.myCall = function(_this, ... args) { if (! _this) _this = Object.create(null) _this.fn = this const res = _this.fn(... Function sum (a, b) {return this.v + a + b} sum. MyCall ({v: 1}, 2, 3) // 6Copy the code

Handwritten apply

  • The first argument receives this object
  • Change this to: pass a function as a method to this object
  • The second argument is a default array
  • Expand syntax to support invocation of argument lists
  • Calls and deletes the method, returning the result
Function.prototype.myApply = function(_this, args = []) { if (! _this) _this = Object.create(null) _this.fn =this const res = _this.fn(... Function sum (a, b) {return this.v + a + b} sum.myApply({v: 1}, [2, 3]) // 6Copy the code

Write a new

  • The first argument is used as a constructor, and the remaining arguments are used as constructor arguments
  • Inherit the constructor prototype to create a new object
  • Execute constructor
  • The result is an object and returns the result; otherwise, a new object is returned
function myNew(... args) { const Constructor = args[0] const o = Object.create(Constructor.prototype) const res = Constructor.apply(o, args.slice(1)) return res instanceof Object ? Function P(v) {this.v = v} const P = myNew(P, 1) // P {v: 1}Copy the code

Handwritten image stabilization

  • Declaration timer
  • Returns the function
  • At a certain interval, the callback function is executed
  • The callback function
    • Run: Empty the timer
    • Not executed: Resets the timer
function debounce(fn, delay) { let timer = null return function (... args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { timer = null fn.apply(this, args) }, (delay + '') | 0 || 1000 / 60) } }Copy the code

Handwritten throttling

  • Declaration timer
  • Returns the function
  • At a certain interval, the callback function is executed
  • The callback function
    • Run: Empty the timer
    • Not executed: returned
function throttle(fn, interval) { let timer = null return function (... args) { if (timer) return timer = setTimeout(() => { timer = null fn.apply(this, args) }, (interval +'')| 0 || 1000 / 60) } }Copy the code