【js】js中apply()、bind()、call()用法

这三个方法的作用基本上相同,用法上有一些不同,下面先对比一下它们的用法:

  • apply:调用一个具有给定 this 值的函数,以及以一个数组(或一个类数组对象)的形式提供的参数。
    语法:
apply(thisArg)
apply(thisArg, argsArray) 
  • bind:创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
    语法:
function.bind(thisArg[, arg1[, arg2[, ...]]])
  • call:使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
    语法:
function.call(thisArg, arg1, arg2, ...)

举个例子说明一下:
三个方法解决同样的问题:
JavaScript 新手经常犯的一个错误是将一个方法从对象中拿出来,然后再调用,期望方法中的 this 是原来的对象(比如在回调中传入这个方法)。如果不做特殊处理的话,一般会丢失原来的对象。

代码:
apply:

<script>this.x = 9; // 在浏览器中,this 指向全局的 "window" 对象var module = {x: 81,getX: function (y) {return this.x+':'+y;},};var module02 = {x: 91};console.log(module.getX(1));var retrieveX = module.getX;console.log(retrieveX(1));// 返回 9:1 - 因为函数是在全局作用域中调用的// 把 'this' 绑定到 module 对象var boundGetX = retrieveX.apply(module,[1]);console.log(boundGetX); // 81:1// 把 'this' 绑定到 module02对象,module02继承了getXvar boundGetX2 = retrieveX.apply(module02,[1]);console.log(boundGetX2); // 81:1
</script>

输出结果:
在这里插入图片描述

bind:

<script>this.x = 9; // 在浏览器中,this 指向全局的 "window" 对象var module = {x: 81,getX: function () {return this.x;},};console.log(module.getX());// 81var retrieveX = module.getX;console.log(retrieveX());// 返回 9 - 因为函数是在全局作用域中调用的// 创建一个新函数,把 'this' 绑定到 module 对象// 新手可能会将全局变量 x 与 module 的属性 x 混淆var boundGetX = retrieveX.bind(module);console.log(boundGetX()); // 81
</script>

输出结果:
在这里插入图片描述

call:

<script>this.x = 9; // 在浏览器中,this 指向全局的 "window" 对象var module = {x: 81,getX: function (y) {return this.x+':'+y;},};var module02 = {x: 91};console.log(module.getX(1));var retrieveX = module.getX;console.log(retrieveX(1));// 返回 9:1 - 因为函数是在全局作用域中调用的// 把 'this' 绑定到 module 对象var boundGetX = retrieveX.call(module,1);console.log(boundGetX); // 81:1// 把 'this' 绑定到 module02对象var boundGetX2 = retrieveX.call(module02,1);console.log(boundGetX2); // 81:1
</script>

输出结果:
在这里插入图片描述
从上面的例子可以看出,apply与call基本相同,区别是apply的第二个参数是传数组,而call是传一个或多个参数。bind的区别是调用时要加(),它返回的是一个函数。三者的作用都是为方法指定this的值。

用例:
1、apply用数组获取最大最小值

const numbers = [5, 6, 2, 3, 7];const max = Math.max.apply(null, numbers);console.log(max);
// Expected output: 7const min = Math.min.apply(null, numbers);console.log(min);
// Expected output: 2

ES6 的写法:...扩展运算符

Math.max(...[14, 3, 77])

2、将一个数组放到另外一个数组后面

// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

3、使用 call 方法调用匿名函数
在下例中的 for 循环体内,创建了一个匿名函数,然后通过调用该函数的 call 方法,将每个数组元素作为指定的 this 值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个 print 方法,这个 print 方法可以打印出各元素在数组中的正确索引号。当然,这里不是必须得让数组元素作为 this 值传入那个匿名函数(普通参数就可以),目的是为了演示 call 的用法。

var animals = [{ species: "Lion", name: "King" },{ species: "Whale", name: "Fail" },
];for (var i = 0; i < animals.length; i++) {(function (i) {this.print = function () {console.log("#" + i + " " + this.species + ": " + this.name);};this.print();}).call(animals[i], i);
}

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

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

相关文章

Metasploitable2靶机漏洞复现

一、信息收集 nmap扫描靶机信息 二、弱口令 1.系统弱口令 在Kali Linux中使用telnet远程连接靶机 输入账号密码msfadmin即可登录 2.MySQL弱口令 使用mysql -h 靶机IP地址即可连接 3.PostgreSQL弱密码登录 输入psql -h 192.168.110.134 -U postgres 密码为postgres 输入\…

每天一个电商API分享:淘宝商品销量接口,获取淘宝商品销售数据(淘宝商品精准销量、总销量、月销量)

开发背景 商品销量是商家决策的重要参考指标之一。通过淘宝商品销量接口&#xff0c;商家可以获取到实时的销量信息&#xff0c;从而更好地进行库存管理、供应链计划和市场推广等决策。 淘宝商品销量接口可以提供丰富的销售数据&#xff0c;包括销售数量、销售额、销售渠道等…

unity中导入自定义模型

unity中导入自定义模型 准备软件步骤1从SoildWorks中导出模型为STEP格式2将STEP格式文件导入到3DS Max中&#xff0c;再导出为FBX格式3将FBX格式导入至unity中 准备软件 需要SoildWorks、3DS Max和Unity 3D软件步骤 1从SoildWorks中导出模型为STEP格式 2将STEP格式文件导入到…

【数据结构】 List与顺序表及接口的实现

文章目录 什么是List常见接口介绍线性表顺序表顺序表接口的实现add在末尾新增元素在 pos 位置新增元素判定是否包含某个元素查找某个元素对应的位置获取 pos 位置的元素给 pos 位置的元素设为 value删除第一次出现的关键字key获取顺序表的长度清空顺序表 顺序表的优缺点优点&am…

全面掌握 Jaeger 分布式调用链路跟踪理论和实战,Go 为所有使用 go-resty 库发起 HTTP 请求集成链路跟踪 jaeger(附源码)

全面掌握 Jaeger 分布式调用链路跟踪理论和实战,Go 为所有使用 go-resty 库发起 HTTP 请求集成链路跟踪 jaeger(附源码)。 介绍一个开源的分布式跟踪系统 Jaeger,首先从理论基础知识开始学习,将学习如何在 HTTP 请求中集成链路跟踪,以及如何在 GORM 框架实现,最后学习 …

Qt应用开发(基础篇)——滚屏区域基类 QAbstractScrollArea

一、前言 QAbstractScrollArea滚屏区域抽象类继承于QFrame&#xff0c;QFrame继承于QWidget&#xff0c;是QListview(列表浏览器)、QTableview(表格浏览器)、QTextEdit(文本编辑器)、QTextBrowser(文本浏览器)等所有需要滚屏区域部件的抽象基类。 框架类QFrame介绍 QAbstractSc…

java -jar 启动服务后,关闭命令窗口后服务停止

java -jar 启动服务后&#xff0c;关闭命令窗口后服务停止 问题&#xff1a;当我们用java -jar命令启动服务后&#xff0c;只有一直保持Xshell的窗口开启且正常连接服务器时才能访问服务&#xff0c;当关闭命令窗口时&#xff0c;服务会停止运行 解决&#xff1a;使用nohup命…

java之juc二

JMM 请你谈谈对Volatile的理解 Volatile是jvm提供的轻量级的同步机制&#xff08;和synchronized差不多&#xff0c;但是没有synchronized那么强大&#xff09; 保证可见性不保证原子性禁止指令重排 什么是JMM JMM&#xff1a;java内存模型&#xff0c;不存在的东西&#…

常用Linux命令

常用Linux命令 1. 基本命令 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作系统信息 arch 显示机器的处理器架构…

一.RocketMQ概念

RocketMQ概念 1.概念2.应用场景3.MQ的优点和缺点4.常见MQ对比 1.概念 MQ(Message Queue)&#xff0c;是一种提供消息队列服务的中间件&#xff0c;也称为消息中间件&#xff0c;是一套提供了消息生产、存储、消费全过程API的软件系统。 RocketMQ是阿里巴巴2016年MQ中间件&…

Error: Couldn‘t find preset “es2015“ relative to directory

vue引入element-ui&#xff0c;运行时报了这个错误 Module build failed: Error: Couldnt find preset "es2015" relative to directory "D:\\360MoveData\\Users\\Administrator\\Desktop\\新建文件夹\\henge-test"at D:\360MoveData\Users\Administrato…

华为云classroom赋能--Devstar使应用开发无需从零开始

华为云DevStar为开发者提供业界主流框架代码初始化能力&#xff0c;通过GUI、API、CLI等多种方式&#xff0c;将按模板生成框架代码的能力推送至用户桌面。同时基于华为云服务资源、成熟的DevOps开发工具链和面向多场景的众多开发模板&#xff0c;提供一站式创建代码仓、自动生…

Windows server 2016如何安装OpenSSH

在 Windows Server 2016 上安装 OpenSSH 需要通过“添加功能和角色”向导来完成。以下是安装 OpenSSH 的步骤&#xff1a; 1.打开 Windows Server 2016 控制面板。 2.点击 "程序"&#xff0c;然后选择 "程序和功能"。 3.在左侧菜单中&#xff0c;点击 &…

【golang】数组和切片底层原理

数组类型的值&#xff08;以下简称数组&#xff09;的长度是固定的&#xff0c;而切片类型的值&#xff08;以下简称切片&#xff09;是可变长的。 数组的长度在声明它的时候就必须给定&#xff0c;并且之后不会再改变。可以说&#xff0c;数组的长度是其类型的一部分。比如&a…

Spring学习笔记之Spring IoC注解式开发

文章目录 声明Bean的注解Component注解Controller注解Service注解Repository Spring注解的使用选择性实例化Bean负责注入的注解ValueAutowired与QuaifierResource 全注解式开发 注解的存在主要是为了简化XML的配置。Spring6倡导全注解开发 注解怎么定义&#xff0c;注解中的属性…

深入探索JavaEE单体架构、微服务架构与云原生架构

课程链接&#xff1a; 链接: https://pan.baidu.com/s/1xSI1ofwYXfqOchfwszCZnA?pwd4s99 提取码: 4s99 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 --来自百度网盘超级会员v4的分享 课程介绍&#xff1a; &#x1f50d;【00】模块零&#xff1a;开营直播&a…

ARM-M0内核MCU,内置24bit ADC,采样率4KSPS,传感器、电子秤、体脂秤专用,国产IC

ARM-M0内核MCU 内置24bit ADC &#xff0c;采样率4KSPS flash 64KB&#xff0c;SRAM 32KB 适用于传感器&#xff0c;电子秤&#xff0c;体脂秤等等

[BitSail] Connector开发详解系列三:SourceReader

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 Source Connector 本文将主要介绍负责数据读取的组件SourceReader&#xff1a; SourceReader 每个SourceReader都在独立的线程中执行&#xff0c;只要我们保证Sou…

Jmeter进阶使用:BeanShell实现接口前置和后置操作

一、背景 我们使用Jmeter做压力测试或者接口测试时&#xff0c;除了最简单的直接对接口发起请求&#xff0c;很多时候需要对接口进行一些前置操作&#xff1a;比如提前生成测试数据&#xff0c;以及一些后置操作&#xff1a;比如提取接口响应内容中的某个字段的值。举个最常用…

c语言——拷贝数组

这段代码是一个简单的数组拷贝示例。它的功能是将一个原始数组 original 的内容拷贝到另一个数组 copied 中&#xff0c;并输出两个数组的元素。 代码执行过程如下&#xff1a; 首先&#xff0c;在 main() 函数中定义了一个整型数组 original&#xff0c;并初始化了它的元素。…