apply、call和bind的作用和区别

news2024/11/23 23:58:42

apply与call

首先介绍一下apply与call,因为这两个方法的功能和使用方式都差不多,只是传参的方式不同。call和apply的作用都是改变函数运行时的上下文(context)

语法

fun.call(thisArg, arg1, arg2, ...)

fun.apply(thisArg, argsArray)

参数

thisArg:在fun函数运行时this的指向
arg1, arg2, ...:传递给函数的参数列表
argsArray:一个数组或类数组对象,数组中的元素将被作为参数传递给函数。

示例

function fun(name, age) {
    console.log(name, age);
  }

  fun('张三', 18);
  fun.apply(this, ['张三', 18]);
  fun.call(this, '张三', 18);

将会输出同样的结果:

改变指向

window.name = 'windowName';

  const user = {
    name: 'userName',
  };

  function fun() {
    console.log(this.name);
  }

  fun(); //  Cannot read properties of undefined (reading 'name')
  fun.apply(window); // windowName
  fun.apply(user); // userName

判断元素类型

直接使用typeof进行类型判断时,并不能识别出Array和null,都会识别为object,因此需要使用Object.prototype.toString()方法

Object.prototype.toString.apply([1, 2]) // Array
Object.prototype.toString.call([1, 2]) // Array

Object.prototype.toString.apply({}) // Object
Object.prototype.toString.call({}) // Object

注意:元素本身的toString()并不能打印出类型,只会输出元素的值

bind

bind与call和apply相似,但它不会立即执行函数,而是返回一个新的函数,这个新函数的this被永久绑定到第一个参数提供的值。

const user = {
    name: 'userName',
  };

  function fun() {
    console.log(this.name);
  }

  const res = fun.bind(user);
  res(); // userName

总结

call方法

优势:

  1. 立即执行:call方法会立即调用函数,并允许你指定函数运行时的this值。
  2. 参数列表:可以传递任意数量的参数,只需在this值之后依次列出即可。

区别:call通过参数列表传递给函数,而不是数组。

apply方法

优势:

  1. 立即执行:与call一样,apply也会立即调用函数,并允许你指定函数运行时的this值。
  2. 数组或类数组参数apply可以接受一个数组(或类数组对象)作为参数,这使得当你需要传递大量参数时,applycall更方便。

区别:apply只接受两个参数,第二个参数必须是一个数组或类数组对象。

bind方法

优势:

  1. 不立即执行bind方法不会立即调用函数,而是返回一个新的函数,这个新函数的this被永久绑定到提供的值。
  2. 预设参数:可以在绑定this的同时预设一些参数,使得新函数在调用时可以接收更多参数。

区别:

      1. 执行时机bind不会立即执行函数,而是返回一个新的函数实例。

      2. 多次调用:由于bind返回的是一个新函数,你可以多次调用这个新函数,而callapply在调用后即执行完毕。

综合比较

  • 执行时机

    • callapply:立即执行函数。
    • bind:返回一个新的函数,可以在任何需要的时候调用。
  • 参数传递

    • call:直接传递参数列表。
    • apply:传递一个包含所有参数的数组或类数组对象。
    • bind:可以在绑定this的同时预设参数,并在调用时接收更多参数。
  • 使用场景

    • 需要立即调用一个函数并指定this值时,使用callapply
    • 需要创建一个新函数,以便在任何时候调用并预设this值和参数时,使用bind

总的来说,callapply在功能上非常相似,主要区别在于参数传递的方式。而bind则提供了更大的灵活性,它允许创建一个新的函数实例,可以延迟执行并预设参数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2161042.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

类的难疑点

一、知识点 1、类的属性和对象属性(实例属性) shuxing"123" self.shuxing"123" 2、类的对象 self.loginMyclass() loginMyclass() 3、访问类属性和方法的操作 通过“类名.属性”访问:Myclass.shuxing 通…

详解常见排序

目录 ​编辑 插入排序 希尔排序(缩小增量排序) 选择排序 冒泡排序 堆排序 快速排序 hoare版 挖坑法 前后指针法 非递归版 归并排序 递归版 非递归版 计数排序 声明:以下排序代码由Java实现!!&#xff01…

【研赛D题成品论文】24华为杯数学建模研赛D题成品论文(第一问)+可运行代码丨免费分享

2024华为杯研究生数学建模竞赛D题精品成品论文已出! D题 大数据驱动的地理综合问题 一、问题分析 问题一:目标:利用1990-2020年的数据,针对降水量和土地利用的时空演化特征进行描述。数据:两个核心变量,一…

电商效果图渲染神器:轻松高效出图

在这个电商行业飞速发展的今天,离不开商品图的效果。而电商效果图同样离不开渲染,而大量的渲染需求有需要大量的机器,还要追求更快的渲染速度和更稳定的性能。毕竟,谁不想快点完成项目又省心呢? 而云渲染服务是个很好…

C++之STL—deque容器

双端数组 区别于 vector (单端数组)&#xff0c; 构造函数 注意&#xff1a;读取数据时&#xff0c;const修饰保证函数内只能读取&#xff0c;不能修改数据 void print(const deque<int>& deq) {for (deque<int>::const iterator it deq.begin(); it ! deq.e…

使用 Nuxt Kit 的构建器 API 来扩展配置

title: 使用 Nuxt Kit 的构建器 API 来扩展配置 date: 2024/9/24 updated: 2024/9/24 author: cmdragon excerpt: 摘要:本文详细介绍了如何使用 Nuxt Kit 的构建器 API 来扩展和定制 Nuxt 3 项目的 webpack 和 Vite 构建配置,包括扩展Webpack和Vite配置、添加自定义插件、…

正向科技|格雷母线定位系统的设备接线安装示范

格雷母线安装规范又来了&#xff0c;这次是设备接线步骤 格雷母线是格雷母线定位系统的核心部件&#xff0c;沿着移动机车轨道方向上铺设&#xff0c;格雷母线以相互靠近的扁平状电缆与天线箱电磁偶合来进行信号传递&#xff0c;从而检测得到天线箱在格雷母线长度方向上的位置。…

OpenLayers 开源的Web GIS引擎 - 添加地图控件地图控件

中心点按钮、地图放大缩小滑块、全图和比例尺控件 直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.…

python爬虫案例——腾讯网新闻标题(异步加载网站数据抓取,post请求)(6)

文章目录 前言1、任务目标2、抓取流程2.1 分析网页2.2 编写代码2.3 思路分析前言 本篇案例主要讲解异步加载网站如何分析网页接口,以及如何观察post请求URL的参数,网站数据并不难抓取,主要是将要抓取的数据接口分析清楚,才能根据需求编写想要的代码。 1、任务目标 目标网…

基于深度学习的树叶识别系统的设计与实现(pyqt5 python3.9 yolov8 10000张数据集)

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

vector的模拟实现以及oj题

前言 上篇博客介绍了voctor的大部分的重要接口&#xff0c;本篇博客将模拟实现部分接口的效果。 vector的模拟实现 vector的模拟实现分为两个文件进行实现&#xff1a;vector.h、test.cpp vector.h 该部分为文件的主要部分&#xff0c;分别实现了vector的以下功能&#xf…

VSCode扩展连接虚拟机MySQL数据库

在虚拟机安装MySQL vscode通过ssh远程登录Ubuntu 在vscode终端运行以下命令。 sudo apt-get install mysql-server-5.7 用以下命令确认MySQL是否安装完成。 sudo mysql MySQL安装成功。 在VSCode安装SQL扩展 扩展名&#xff1a;MySQL Shell for VS Code。 安装完成后&am…

oracle各种版本在各种系统上安装配置需求快速参考

Oracle Database (RDBMS) on Unix AIX,HP-UX,Linux,Solaris and MS Windows Operating Systems Installation and Configuration Requirements Quick Reference (12.1/12.2/18c/19c) (Doc ID 1587357.1)

(14)关于docker如何通过防火墙做策略限制

关于docker如何通过防火墙做策略限制 1、iptables相关问题 在Iptables防火墙中包含四种常见的表&#xff0c;分别是filter、nat、mangle、raw。 filter&#xff1a;负责过滤数据包。 filter表可以管理INPUT、OUTPUT、FORWARD链。 nat&#xff1a;用于网络地址转换。 nat表…

边缘计算网关在工业中的应用

在工业4.0和智能制造的浪潮中&#xff0c;边缘计算网关扮演着至关重要的角色。AIoTedge边缘计算网关&#xff0c;作为工业互联网的关键组件&#xff0c;通过其强大的数据处理能力和智能分析功能&#xff0c;正在改变工业生产的面貌。 边缘计算网关的定义与角色 边缘计算网关是…

apache paimon简介(官翻)

介绍 如下架构所示: 读/写操作: Paimon 支持多样化的数据读写方式,并支持 OLAP 查询。 读取: 支持从历史快照(批处理模式)中消费数据,从最新偏移量(流处理模式)中读取数据,或以混合方式读取增量快照。写入: 支持从数据库变更日志(CDC)进行流式同步,从离线数据中…

sicp每日一题[2.24-2.27]

2.24-2.26没什么代码量&#xff0c;所以跟 2.27 一起发吧。 Exercise 2.24 Suppose we evaluate the expression (list 1 (list 2 (list 3 4))). Give the result printed by the interpreter, the corresponding box-and-pointer structure, and the interpretation of this a…

Vue3:自定义customRef

目录 一.性质 1.自定义性 2.工厂函数参数 3.track 和 trigger 函数 二.作用 1.防抖/节流 2.异步更新 3.条件性更新 4.精细控制依赖追踪 5.优化性能 三.使用 1.ts组件 2.vue.组件 四.代码 1.ts代码 2.vue代码 五.效果 在 Vue 3 中&#xff0c;customRef 是一个…

YOLOv10改进,YOLOv10主干网络替换为VanillaNet( CVPR 2023 华为提出的全新轻量化架构),大幅度涨点

摘要 基础模型的核心理念是“更多即不同”,这一理念在计算机视觉和自然语言处理领域取得了惊人的成功。然而,变压器模型的优化挑战和固有复杂性呼唤一种向简化转变的范式。在本研究中,引入了 VanillaNet,一种拥抱设计优雅的神经网络架构。通过避免高深度、快捷方式和复杂操…

java开发jmeter采样器

目录 1.前言 2.新建一个springboot工程 2.1 引入相关依赖 2.2 编写核心代码 2.2.1 取样器代码 2.2.2 取样器界面 2.2.3 sdk接口封装 3.源码打包 3.1 将sdk源码和采样器源码打成jar包 3.2 拷贝引用包 4.配置jmeter脚本 4.1 选择自定义采样器 4.2 界面里面配置参数 1.…