首页 > 编程语言 >JavaScript-apply、bind、call

JavaScript-apply、bind、call

时间:2024-09-16 10:35:21浏览次数:9  
标签:指向 call bind JavaScript 参数 apply null

call、apply、bind 作用是改变函数执行时的上下文,简而言之就是改变函数运行时的 this 指向

区别 

apply

apply 接受两个参数,第一个参数是 this 的指向,第二个参数是函数接受的参数,以数组的形式传改变 this 指向后原函数会立即执行,且此方法只是临时改变 this 指向一次
当第一个参数为 null、undefined 的时候,默认指向 window(在浏览器中)

call

call 方法的第一个参数也是 this 的指向,后面传入的是一个参数列表
跟 apply 一样,改变 this 指向后原函数会立即执行,且此方法只是临时改变 this 指向一次
同样的,当第一个参数为 null、undefined 的时候,默认指向 window(在浏览器中)

bind

bind方法和cal很相似,第一参数也是 this 的指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)
改变 this 指向后不会立即执行,而是返回一个永久改变 this 指向的函数
当然的,当第一个参数为 null、undefined 的时候,默认指向 window(在浏览器中)

不难看出三者之间的异同

  • apply、call、bind 都能起到改变函数的 this 对象指向的作用,且当第一个参数为 null,undefined 时,默认指向 window;但 bind 可以起到永久修改的作用
  • 三者都可以传参,但是 apply是数组,而call是参数列表,且apply和call 是一次性传入参数,而 bind 可以分为多次传入

bind 实现

Function.prototype.recodeBind = function (context) {
    if (typeof (context) !== 'function') {
        throw new TypeError('recodeBind needs to be a function');
    }

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

    return function Fn() {
        return fn.apply(this instanceof Fn ? new Fn(...arguments) : context, args.concat(...arguments))
    }
}

 

标签:指向,call,bind,JavaScript,参数,apply,null
From: https://www.cnblogs.com/xxaxf/p/18416044

相关文章

  • JavaScript 手写new操作符
    new关键字的工作步骤创建一个新的对象obj将对象与构建函数通过原型链连接起来将构建函数中的this绑定到新建的对象obj上根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理constrecodeNew=function(Func,...args){//获取函数对象......
  • 【油猴脚本】00008 案例 Tampermonkey油猴脚本,动态渲染表格-实现页面动态-添加表格列,
    前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • kettle从入门到精通 第八十五课 ETL之kettle kettle中javascript步骤调用外部javascri
     场景:交流学习群里面有小伙伴咨询kettle中的javascript代码步骤如何调用外部js文件中的函数,觉得有点意思的,于是就抽时间整理了一下。 1、外部js文件为test.js,代码如下:functiontest(param){return"接收到了参数"+param;}2、当时没有过多考虑,在本地简单写了个demo测......
  • [Javascript Vue] Improve heavy component loading performance
    Let'ssaywehaveaVueapplicationthatrendersmanyheavycomponentsonthefirstload.Theproblemwe'refacingisalongwhitescreenperiodwhileJavaScriptisloadingandthebrowserispainting.Howcanweoptimizeperformance?Sincethe......
  • JavaScript DOM
    一、DOM简介1、简介​DocumentObjectModel文档对象模型​浏览器加载HTML文档时,会将HTML文档解析为一个树形结构,称为DOM树HTML文档和DOM树是一一对应的关系当DOM树被改变时,与之对应的HTML文档也会随之改变当需要对HTML中的内容进行动态改变时,可以使用DOM来进行操作DOM......
  • JavaScript中if嵌套 assert
    摘要: 本文主要探讨在JavaScript中if嵌套的使用场景以及assert语句在代码调试与逻辑验证方面的作用。通过分析if嵌套的结构与常见用法,结合assert语句在确保程序正确性上的优势,阐述它们在JavaScript编程中的重要性与高效运用方式。一、引言在JavaScript开发中,控制结构......
  • 蓝易云服务器 - ubuntu安装开发javascript ubuntu script教程
    在Ubuntu上安装开发JavaScript的教程如下:打开终端。安装Node.js:运行以下命令安装Node.js。sudoaptupdatesudoaptinstallnodejs安装npm:npm是Node.js的包管理器,运行以下命令安装npm。sudoaptinstallnpm验证安装:通过运行以下命令验证Node.js和npm是否安装成功。node-vnpm-......
  • JavaScript 中的异步任务、同步任务、宏任务与微任务
    JavaScript中的异步任务、同步任务、宏任务与微任务在JavaScript的世界里,理解异步任务、同步任务、宏任务和微任务是非常重要的,它们共同构成了JavaScript独特的执行机制。一、同步任务与异步任务1.同步任务定义:同步任务是在代码执行过程中,按照顺序依次执行的任务......
  • 题解 [ABC371G] Lexicographically Smallest Permutation(中文/English)
    本题解提供英文版,位于示例代码之后。Englishversionofthiseditorialisprovidedafterthesamplecode.官方题解竟然用Python来算高精度lcm,我来提供一个可以避免一切大整数运算的方法。考察\(u\getsP_u\)这张图的每个置换环。为了使答案字典序最小,显然需要从前往后......
  • 【JavaScript】LeetCode:707设计链表
    文章目录题目内容题目分析(1)获取第n个节点的值(2)头部插入节点(3)尾部插入节点(4)第n个节点前插入节点(5)删除第n个节点完整代码题目内容题目分析添加哨兵节点dummy。在第n个节点前插入节点时,应该找到第n-1个节点(即前一个节点),才能完成插入操作。在删除第n......