首页 > 其他分享 >call,apply,bind

call,apply,bind

时间:2023-03-09 10:12:31浏览次数:34  
标签:bind call context apply 参数 方法 fn

我们在使用一个对象时,其中有一个需要的方法这个对象上没有,这个时候我们当然可以在这个对象上新增这个方法,但是如果我们只是偶尔使用一次,那不是麻烦且作用不大吗?这时候我们自然而然的会想到可不可以找一个有这个方法的对象,然后把这个方法接过来用用呢?还真有这种方法!我们把别人家的方法借过来用,用的时候把人家方法中的this指向自己,用完之后再还给人家不就行了!call()apply()bind()方法 它们三者就是来实现这种想法的,它们都是Function.prototype下的方法,都可以改变this指向。

三者的使用

call()

  • 被借用者.call(借用者, a, b, c...)
    • 参数一:this要指向的地方;
    • 剩余参数:作为参数依次传入被借用的方法里;

apply()

  • 被借用者.apply(借用者,[a, b, c...])
    • 参数一:this要指向的地方;
    • 参数二:是一个数组,里面的元素作为参数依次传入被借用的方法里;
  • call()apply()只在使用方法上不一样,使用call()时,我们拿到剩余参数,把参数一个一个的传进去;而使用apply()时,我们把剩余的参数放到一个数组里,然后把这个数组作为第二个参数传进去;

bind()

  • 被借用者.bind(借用者,)
    • 参数一:this要指向的地方;
    • 剩余参数:拼接在调用返回函数所传参数之前,多余参数不起作用;
  • bind()call()apply()不太一样,bind()本身是个方法,调用bind()方法的是个方法,它的返回值也是个方法,这就使得通过bind()来借用别人方法的方法可以不直接使用借到的方法,它可以把返回的方法赋值给其他变量,并且调用完不可直接删除,方便下次调用。

三者的实现

call()

Function.prototype.rewriteCall = function(context) {

  //传入参数的话,就把被借的那个方法的this指向context,若context为非真值则指向window(js的顶层对象)

  context = context || window

  //在借用别人方法的对象上新添加一个方法(fn),并把调用call方法的函数(被借的那个)的this指向这个新添加的方法上,那么调用这个新加的方法(fn)时就可以用到被借的方法中的内容;

  context.fn = this

  //第一个参数是要借用别人方法的对象,所以把它去掉,拿到剩余参数

  const args = [...argumrnts].slice(1)

  //把剩余参数传入我们新加的方法(fn)中,调用这个方法,若有返回值,则接一下

  const result = context.fn(...args)

  //函数的目的是借用别家的函数,所以用完之后要及时删除哦(试想一下,每次借一个函数都要新增一个方法,并且只是特定情况需要,就很没必要)

  delete context.fn

  //如果有返回值,记得把返回值return

  return result

}

apply()

Function.prototype.rewriteApply = function(context) {

  context = context || window

  context.fn = this

  let result

  //这里的判断,如果arguments[1]存在,说明有第二个参数(并且为数组),那我们要把这个参数展开来传入方法中。

  if(arguments[1]) {

    result = context.fn(...arguments[1])

  }else{

    result = context.fn()

  }

  delete context.fn

  return result

}

bind()


Function.prototype.rewriteBind = function(context) {

  if(typeof this !== 'function') {

    throw new TypeError('Error')

  }

  //和实现apply与call那样,给context添加一个方法

  context.fn = this

  const args = [...arguments].slice(1)

   //返回一个绑定this的函数

  return function F() {

    //判断是否为一个函数

    if(this instanceof F) {

      return context.fn(...args, ...arguments)

    }

    return context.fn.apply(context, args.concat(...arguments))

  }

}

标签:bind,call,context,apply,参数,方法,fn
From: https://www.cnblogs.com/rain111/p/17197337.html

相关文章

  • 理解Call Apply Bind
    在JavaScript解析器解析的时候,会创建执行上下文,其中有一位属性thisValue,也就是this。this分为全局this和函数this,函数的this会指向函数的宿主对象,也就是谁调用函数this......
  • 理解 Call、Apply、Bind
    this关键字,分为全局this和函数this,函数的this会指向函数的宿主对象,也就是谁调用函数this就指向谁,全局的this会根据不同的runtime环境不同,指向也不同,在浏览器环境下指向wind......
  • solidity 引用类型修饰符memory、calldata与storage 常量修饰符Constant与Immutable区
    在solidity语言中引用类型修饰符(引用类型为存储空间不固定的数值类型)memory、calldata与storage,它们只能修饰引用类型变量,比如字符串、数组、字节等...memory适用于......
  • udp客户端 用不用 bind 的区别
    无连接的socket的客户端和服务端以及面向连接socket的服务端通过调用bind函数来配置本地信息。使用bind函数时,通过将my_addr.sin_port置为0,函数会自动为你选择一个未占用的......
  • 如何对单个列使用 apply() 函数?
    我有一个包含两列的熊猫数据框。我需要在不影响第二列的情况下更改第一列的值,并在仅更改第一列值的情况下取回整个数据框。apply()我怎样才能在熊猫中使用它?解答......
  • MIT 6.1810 Lab:system calls
    lab网址:https://pdos.csail.mit.edu/6.828/2022/labs/syscall.htmlxv6Book:https://pdos.csail.mit.edu/6.828/2022/xv6/book-riscv-rev3.pdfUsinggdb总体感觉,对xv6的调......
  • hook useRef,useState,父传子,useReducer,@observable,useCallback
    //返回一个可变的ref对象,该对象只有个current属性,初始值为传入的参数(id??'')。constactiveMenuKeyRef=useRef<string|number>(id??''); key[0]......
  • kubectl port-forward bind: address already in use unable
    前言本地的8080映射到Pod的80,kubectl会把这个端口的所有数据都转发给集群内部的Podkubectlport-forwardwp-pod8080:80&在命令的末尾使用了一个&符号,让端......
  • pandas中的apply函数
    pandas中的apply函数apply在调用函数时,默认将数据框逐行或逐列作为一个参数代入调用的函数中apndas的apply()函数可以作用于Series或者整个DataFrame,功能也是自动......
  • 设备树编译链接报错arch/arm/boot/dts/imx50.dtsi:16:42: fatal error: dt-bindings/
    1.vim scripts/Makefile.lib,   add3linesinto dtc_cpp_flags  dtc_cpp_flags =-Wp,-MD,$(depfile).pre.tmp-nostdinc                ......