apply-call-bind实现-参数解析

最新推荐文章于 2024-09-14 18:52:56 发布

不一于汝（工作不易，多多学习）

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量174

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wo_921110/article/details/125116282

版权

这篇博客详细介绍了如何手写实现JavaScript中的call、apply和bind方法，通过代码展示了这三个方法的基本功能，包括改变函数调用的上下文、传参方式等。此外，还提到了arguments对象的使用以及转换为数组的方法。通过这些实现，读者能更深入理解JavaScript函数调用的原理。

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

手写实现一个call方法

// 给所有函数添加一个hycall的方法
Function.prototype.hycall = function(thisArg, ...args) {
  // 在这里可以去执行调用的那个函数（foo）
  // 问题：可以获取到是哪一个函数执行了hycall
  // 1.获取需要执行的函数
  var fn = this
  // 2.对thisArg转成对象类型（防止它传入的是非对象类型）
  thisArg = (thisArg !== null || thisArg !== undefined) ? Object(thisArg) : window

  // 调用需要被执行的函数
  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
}

// 系统的函数的call方法
// foo.call(undefined)
// var result = sum.call({},20 , 30)
// console.log("系统调用的结果:",result)

// 自己实现的函数的hycall方法
// 默认进行隐式绑定
// foo.hycall({name: "why"})
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
}

手写实现一个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)
}

// 系统的bind使用
// var bar = foo.bind('abc')
// bar()

// var newSum = sum.bind('aaa', 10, 20, 30, 40)
// newSum()

// var newSum = sum.bind('aaa')
// newSum( 10, 20,30, 40)

// var newSum = sum.bind('aaa', 10, 20)
// newSum(30, 40)


// 使用自己定义的bind
var bar = foo.hybind('abc')
var result = bar()
console.log(result)

精简版：

认识arguments

arguments是一个对应于传递给函数的参数的类数组（array-like）对象

function foo(num1, num2, num3) {
  // 类数组对象中(长的像是一个数组，本质上是一个对象):arguments
  console.log(arguments)

  // 常见的对arguments的操作是三个
  // 1.获取参数的长度
  console.log(arguments.length)

  // 2.根据索引值获取某一个参数
  console.log(arguments[2])

  // 3.callee获取当前arguments所在的函数
  console.log(arguments.callee)
}

foo(10, 20, 30, 40, 50)

将argumens转成array类型

// Array.prototype.slice将arguments转成array
var newArr2 = Array.prototype.slice.call(arguments)

// es6的语法
var newArr4 = Array.from(arguments)
var newArr5 = [...arguments]

箭头函数中没有arguments