JS手写call/apply/bind/slice

最新推荐文章于 2025-06-05 15:44:37 发布

原创最新推荐文章于 2025-06-05 15:44:37 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现Function.prototype的hycall、hyapply和hybind方法，分别模拟call、apply和bind的功能。通过这些自定义方法，可以灵活地改变函数调用时的上下文（this）和参数传递。示例代码中展示了如何在不同场景下使用这些方法，并提供了实际的函数调用示例。

call

Function.prototype.hycall = function(thisArg, ...args) {
    // 在这里可以去执行调用的那个函数(foo)
    // 问题: 得可以获取到是哪一个函数执行了hycall
    // 1.获取需要被执行的函数
    var fn = this
  
    // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
    thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window
  
    // 3.调用需要被执行的函数
    thisArg.fn = fn
    var result = thisArg.fn(...args)
    delete thisArg.fn
  
    // 4.将最终的结果返回出去
    return result
  }
  
  function foo() {
    console.log("foo函数被执行", this)
  }
  
  function sum(num1, num2) {
    console.log("sum函数被执行", this, num1, num2)
    return num1 + num2
  }
  
  foo.call(undefined)
  var result = sum.call({}, 20, 30)

  foo.hycall(undefined)
  var result = sum.hycall("abc", 20, 30)
  console.log("hycall的调用:", result)

在这里插入图片描述

apply

// 自己实现hyapply
Function.prototype.hyapply = function(thisArg, argArray) {
    // 1.获取到要执行的函数
    var fn = this
  
    // 2.处理绑定的thisArg
    thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window
  
    // 3.执行函数
    thisArg.fn = fn
    var result

    argArray = argArray || []
    result = thisArg.fn(...argArray)
  
    delete thisArg.fn
  
    // 4.返回结果
    return result
  }
  
  function sum(num1, num2) {
    console.log("sum被调用", this, num1, num2)
    return num1 + num2
  }
  
  function foo(num) {
    return num
  }
  
  function bar() {
    console.log("bar函数被执行", this)
  }
  
  bar.hyapply(0)

在这里插入图片描述

bind

Function.prototype.hybind = function(thisArg, ...argArray) {
    // 1.获取到真实需要调用的函数
    var fn = this
  
    // 2.绑定this
    thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window
  
    function proxyFn(...args) {
      // 3.将函数放到thisArg中进行调用
      thisArg.fn = fn
      // 特殊: 对两个传入的参数进行合并
      var finalArgs = [...argArray, ...args]
      var result = thisArg.fn(...finalArgs)
      delete thisArg.fn
  
      // 4.返回结果
      return result
    }
    return proxyFn
  }
  
  function foo() {
    console.log("foo被执行", this)
    return 20
  }
  
  function sum(num1, num2, num3, num4) {
    console.log(num1, num2, num3, num4)
  }
  
  var newSum = sum.hybind("abc", 10, 20)
  var result = newSum(30, 40)

在这里插入图片描述

slice

//  Array中的slice实现
Array.prototype.hyslice = function(start, end) {
  var arr = this
  start = start || 0                       //判断有没有传入start  
  end = end || arr.length								//   #判断有没有传入end  
  var newArray = []
  for (var i = start; i < end; i++) {
    newArray.push(arr[i])
  }
  return newArray
}

var newArray = Array.prototype.hyslice.call(["aaaa", "bbb", "cccc"], 1, 3)
console.log(newArray)