首页 > 编程语言 >JavaScript——函数的call、apply、bind方法

JavaScript——函数的call、apply、bind方法

时间:2024-01-05 17:44:07浏览次数:43  
标签:... JavaScript bind args call context apply myCall

JavaScript的函数拥有三个方法:

  1. call
  2. apply
  3. bind

这三个方法都可以改变函数被调用时,函数内部this的指向。至于区别,阅读下面代码即可一目了然:

function myCall(context) {
    const args = [...arguments].slice(1)
    let result

    context = context ? context : window
    context[Symbol.for('myCall')] = this
    result = context[Symbol.for('myCall')](...args)
    delete context[Symbol.for('myCall')]

    return result
}

function myApply(context, args) {
    args = args ? args : []

    return this.myCall(context, ...args)
}

function myBind(context) {
    const that = this,
        args = [...arguments].slice(1)

    context = context ? context : window

    return function () {
        return that.myApply(context, args.concat(...arguments))
    }
}

Function.prototype.myCall = myCall
Function.prototype.myApply = myApply
Function.prototype.myBind = myBind

由代码可知,它们的区别如下:

  1. call、apply会立即在指定的执行上下文中执行函数并返回执行结果;bind会返回一个已指定执行上下文的函数但并未执行
  2. call被调用时,参数可以一个一个地直接传;apply被调用时,参数需封装成一个数组再传;bind被调用时,参数可以分开传

欢迎评论,欢迎纠错,我们一起成长!
[email protected]

标签:...,JavaScript,bind,args,call,context,apply,myCall
From: https://www.cnblogs.com/xiangyuzhou/p/17947753

相关文章

  • JavaScript——数组的归并方法
    JavaScript的reduce和reduceRight的作用是通过遍历数组得到一个结果,原理如下:functionmyReduce(execute,initValue){constlength=this.lengthletresultfor(leti=0;i<length;i++){if(i===0){consthasInitValue=initV......
  • 关于JavaScript的技巧一
    1.滚动到页面顶部我们可以使用window.scrollTo()平滑滚动到页面顶部。constscrollToTop=()=>{window.scrollTo({top:0,left:0,behavior:"smooth"});};2.滚动到页面底部当然,如果知道文档的高度,也可以平滑滚动到页面底部。constscrollToBottom=()=>{wind......
  • javascript的Map和Set概念以及区别和使用场景
    Map和SetJavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对。但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。MapMap是一组键值对的结构,具有极快的查找速度。举个例子,假设要根......
  • 25个JavaScript One-Liner让你更专业
    今天我们分享一些单行代码技巧,了解这些技巧,可以提升我们的工作效率,现在,我们一起来看一下今天的这些单行代码技巧吧。数组1.检查变量是否是数组constisArray=Array.isArray(arr);constisArray=arrinstanceofArray;2.数字数组的和constsum=(arr)=>arr.reduce((a,b)......
  • 使用 JavaScript 根据输入值调整输入字段 (HTML) 的 (CSS) 中的文本颜色
    可以通过以下代码使用JavaScript根据输入值调整输入字段的文本颜色:HTML:<inputtype="text"id="myInput"oninput="changeTextColor()"placeholder="Enteravalue">CSS:#myInput{color:black;}JavaScript:functionchangeTextColor......
  • Linux内核bind系统调用源码分析
    一、环境说明内核版本:Linux3.10内核源码地址:https://elixir.bootlin.com/linux/v3.10/source(包含各个版本内核源码,且网页可全局搜索函数)二、应用层-bind()函数将socket套接字绑定指定的地址:/**sockfd:由socket函数返回的套接口描述符*sockaddr:一个指向特定于协议......
  • JavaScript元素根据父级元素宽高缩放
    /***等比缩放*@paramwrap外部容器*@paramcontainer待缩放的容器*@returns{{width:number,height:number}}*返回值:width:宽度,height:高度*/aspectRatio(wrap:any,container:any){//w=h/ratio,h=w*rat......
  • JavaScript调用系统邮件快速分享
    在前端使用邮件分享进行快速分享~,详情参考->MDN自定义参数subject:主题cc:抄送到次要收件人(与邮件有关但无需做出应答的个人或组织)bcc:密送到其他收件人(主要、次要收件人不应该获得密送收件人的身份)body:邮件内容注:每个字段的值都必须进行编码(也就是,带有......
  • JavaScript圆形转多边形经纬度数组算法及示例
    前言在地理信息系统(GIS)和地图应用中,有时需要将圆形区域表示为多边形的经纬度数组对象。本文将介绍如何使用JavaScript实现圆形转多边形经纬度数组的算法,并提供一个示例来演示其用法。概述圆形转多边形经纬度数组的算法的目标是将给定的圆形区域表示为多边形的经纬度数组对象。这......
  • 像Google SRE一样OnCall【转载】
    在GoogleSRE的著作《Google运维解密》[1](原作名:SiteReliabilityEngineering:HowGoogleRunsProductionSystems)中,GoogleSRE的关键成员们几乎不惜用了三个章节的篇幅描述了在Google他们是如何OnCall的。GoogleSRE实践中,有一个广为人知的理念:减少琐事,用软件工程......