4. 手写函数

最新推荐文章于 2024-08-14 09:04:24 发布

LBJ辉

最新推荐文章于 2024-08-14 09:04:24 发布

阅读量171

点赞数 2

分类专栏： JavaScript 文章标签： javascript ecmascript 开发语言

本文链接：https://blog.csdn.net/qq_36081714/article/details/138189036

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何手写JavaScript的Function.prototype扩展，包括自定义的mycall方法、bind的实现、防抖(debounce)函数以及实例化检查(instanceof)的原理，强调了原型链在这些功能中的关键作用。

摘要由CSDN通过智能技术生成

手写 call

Function.prototype.mycall = function (ctx, ...args) {
  ctx = ctx === undefined || ctx === null ? globalThis : Object(ctx)
  // ctx 一定是对象
  const fn = this // 待执行的函数
  const key = Symbol('temp')
  Object.defineProperty(ctx, key, {
    enumerable: false,
    value: fn,
  })
  const result = ctx[key](...args)
  delete ctx[key]
  return result
}

手写 bind

// 只生效一次
function bind(ctx){
  return function(){
    if(当前函数是使用 new 来调用的){
      new 调用原始函数
    }else{
      原始函数.call(ctx)
    }
  }
}
Function.prototype.myBind = function (ctx) {
  var args = Array.prototype.slice.call(arguments, 1)
  var fn = this
  return function A(...args) {
    var restArgs = Array.prototype.slice.call(arguments)
    var allArgs = args.concat(restArgs)
    // 使用 new 的方式调用的这个函数
    if (Object.getPrototypeOf(this) === A.prototype) {
      // return new fn(...allArgs)
      var obj = {}
      Object.setPrototypeOf(obj, fn.prototype)
      fn.apply(obj, allArgs)
      return obj
    } else {
      return fn.apply(ctx, allArgs)
    }
  }
}

防抖

function debounce(func, duration = 500) {
  let timerId
  return function (...args) {
    clearTimeout(timerId)
    timerId = setTimeout(() => {
      func.apply(this, args)
    }, duration)
  }
}

手写 instanceof

instanceof 作用:

判断一个实例是否是其父类或者祖先类型的实例。

instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype查找失败，返回 false

核心要点：原型链的向上查找。

let myInstanceof = (target, origin) => {
  while (target) {
    if (target.__proto__ === origin.prototype) {
      return true
    }
    target = target.__proto__
  }
  return false
}