js中apply,call,bind的区别与用法

news2024/9/20 23:02:16

在JavaScript中,所有的函数再被调用的时候都会默认传入两个参数,一个是this,还有一个是arguments。在默认情况下this都是指当前的调用函数的对象。但是有时候我们需要改变this的指向,也就是说使函数可以被其他对象来调用,那么我们应该怎样做呢?这时候我们就可以使用call,apply和bind方法了。
this指向 = 谁调用,指向谁(这是错误的!!!)
this永远指向最后一个调用它的那个对象(正解)
如何解决this指向问题?
1.使用ES6中箭头函数
2.函数内部使用_this = this
3.使用apply,call,bind方法
4.new实例化一个对象

一:call,apply和bind方法的来历

在js中所有的函数都是Function的实例,而且对于Function来说,它的原型即Function.prototype中含有很多东西,其中call,apply和bind方法就是Function原型中的方法,所以根据原型的规则,所有的函数都可以使用原型中属性和方法,所以来说,对于所有的函数都可以使用call,apply和bind方法。
简单一句话:call,apply和bind都是Function原型中的方法,而所有的函数都是Function的实例。

我认为它们的作用可以用一句话来描述:就是改变this的指向。对于这句话的解释,我们可以结合代码来理解。

二:call函数

首先我们放个截图看看官方对call的解释:

从图示上我们可以看到,方法解释为:调用对象的方法,将另一个对象替换为当前对象。

两个参数,thisArg:要用作当前对象的对象。argArray:传递给方法的参数列表。

怎么理解呢,下面放个代码图方便直观解释下:

在上面的截图中我们可以明确的看到,在调用test()方法后传入参数后,this的指向为全局对象。

为方便区分,我们再用call函数改变this的指向。

在这张图上,我们在调用test方法时,使用call函数,在call函数里传递了person对象及属性birthday,我们可以看到再次打印出来的this已经变成了person对象。

综上,可以得出结论:call函数传递两个参数(一个用来改变this指向的对象(必传),一个用于使用的参数列表(选传))。

三:apply函数

接下来我们看看apply函数。
apply() 方法调用一个函数,其具有一个指定的this值,以及作为一个数组(或者类似数组的对象)提供的参数。

官方对apply的解释是:对于给定的函数,创建一个与原始函数具有相同主体的绑定函数。绑定函数的this对象与指定对象相关联,并具有指定的初始参数。

两个参数:

thisArg:在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值,如果是原始值的this会指向该原始值的自动包装对象。

argArray:一个数组或者类数组对象,其中的数组元素将作为单独的参数传给fun函数。参数为null或者undefined,则表示不需要传入任何参数。

我们可以看到,在apply中传入person对象和参数数组(这里我们直接使用Object.values()将person对象的属性值直接转化为数组了)。打印出来的this指定依旧被改变为person对象了。

四:bind函数

最后我们看看bind函数。
bind() 方法对于给定的函数,创建一个与原始函数具有相同主体的绑定函数。绑定函数的this对象与指定对象相关联,并具有指定的初始参数。

thisArg:this关键字可以在新函数中引用的对象。

argArray:传递给新函数的参数列表。

可以看到,bind创建了一个源函数相同的函数,且拥有this对象及参数列表。

call,apply,bind都是js里改变this指向的函数,不同的是,call只接受一个参数,apply接收一个数组,bind创建一个同源函数。

五:call的应用

比如判断数据类型:


console.log(Object.prototype.toString.call("qq"))            // [Object String] 返回值都是字符串类型
console.log(Object.prototype.toString.call(12))              // [object Number]
console.log(Object.prototype.toString.call(false))           // [object Boolean]
console.log(Object.prototype.toString.call(undefined))       // [object Undefined]
console.log(Object.prototype.toString.call(null))            // [object Null]
console.log(Object.prototype.toString.call(function(){}))    // [object Function]
console.log(Object.prototype.toString.call([]))              // [object Array]
console.log(Object.prototype.toString.call({}))              // [object Object]

然后进行封装

很简单的实现了类型判断。

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

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

相关文章

【数据可视化】Arcgis api 4.x 专题图制作之分级色彩,采用自然间断法(使用simple-statistics JS数学统计库生成自然间断点)

1.效果 2.实现 2.1 分级色彩 分级色彩是在GIS制图中,通过不同颜色等级来表示数据量级差异的符号化方法,帮助用户直观识别和比较数据的大小。 2.2 分级方法 在GIS中进行分级色彩制图时,可以选择不同的分级方法来表示数据的分布和变化&#xf…

好用又便宜的电商分账系统

多部门联合治税的背景下,合规运营是企业的首要任务。确保税务合规不仅能避免法律风险,还能提升企业的信誉和运营效率,电商分账系统是电商行业必备的合规工具。今天,商淘云为您分享选择性价比高的电商分账系统的三大规则&#xff0…

鸿蒙Harmony应用开发,数据驾驶舱登录页面的实现

鸿蒙Harmony应用开发,数据驾驶舱登录页面的实现 ​ 首先我们有个Splash 过渡页面来判断当前是用户是否登录,我们先从preferences中获取token是否存在。如果不存在直接跳转登录即可,如果存在的情况我们再去获取下用户的信息看看token是否过期…

探索音乐的新边界——AI写歌的奇妙呈现

在音乐的世界里, 创新总是令人充满期待。 对于没有创作灵感、毫无创作水平的小孩,走进一个充满惊喜的音乐平台 —— (Suno) 看看AI 写歌的神奇魅力。S为我们提供了一个丰富多彩的音乐世界, 从新歌推荐到各种风格的音…

Vmware虚拟机无法打开内核设备“\\.\Global\vmx86“的解决方法

我的问题是在一次系统更新后,导致虚拟机无法使用的。我的虚拟机只有方法三解决了问题。 一、方法一 以管理员身份打开cmd,依次执行以下命令: net start vmci net start vmx86 net start VMnetuserif二、方法二 按 WinR 键,运行…

用好这几个AI抠图工具,既省心又省力!

在设计、摄影和数字创作的世界里,抠图虽然常见,却往往让人感到繁琐。不过,随着人工智能的飞速发展,许多可爱的AI抠图工具应运而生,轻松高效地解决了这一难题!下面就来看看几款超级实用的AI抠图工具&#xf…

Python “字符串操作” ——Python面试100道实战题目练习,巩固知识、检查技术、成功就业

本文主要是作为Python中列表的一些题目,方便学习完Python的元组之后进行一些知识检验,感兴趣的小伙伴可以试一试,含选择题、判断题、实战题、填空题,答案在第五章。 在做题之前可以先学习或者温习一下Python的列表,推荐…

Qt 学习第九天:标准对话框 页面布局

系统标准对话框 错误对话框 //错误对话框connect(createPro, &QAction::triggered, this, []{//参数1 父亲 参数2 标题 参数3 对话框内显示文本内容 。。。QMessageBox::critical(this, "报错!", "没加头文件!");}); 【运行结果】 信息对话框 co…

使用arduino玩基于esp8266的nodemcu开发板

一、简介 中秋节到图书馆看书,看到了arduino方面的书籍,里面有提到ESP8266模块。让我想起我抽屉里吃灰很久了的基于esp8266的nodemcu开发板。于是把书借回家研究了一下。这里做个记录。 二、我目前在使用的云服务器推荐 学Linux不搞个云服务器始终感觉…

【笔记】进制转换

文章目录 一、任意进制转十进制1、整数转化成十进制(1)二进制转十进制(2)八进制转十进制 2、小数转化成十进制(1)二进制转十进制(2)八进制转十进制 3、代码1、整数转化成十进制2、小…

使用 Vue 3 和 TypeScript 实现带打字效果的仿 AI 分析展示组件

在这篇博客中,我将分享如何用 Vue 3 和 TypeScript 实现一个带打字效果的 AI 分析展示组件。该组件具有如下功能: 动态打字效果:模拟打字机逐步显示内容。自动滚动:内容超出容器高度时自动滚动到最新位置。 1. 组件实现需求 我…

【读点论文】Text Recognition in the Wild: A Survey 非常纯粹的OCR研究,专业细致,脉络清晰

Text Recognition in the Wild: A Survey 文本的历史可以追溯到几千年前。文本所携带的丰富而精确的语义信息在广泛的基于视觉的应用场景中非常重要。因此,自然场景中的文本识别一直是计算机视觉和模式识别中一个活跃的研究领域。近年来,随着深度学习的…

基础 Web 开发

1. 构建项目&#xff1a; 2.添加依赖 <dependencies> <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupI…

低代码门户技术:构建高效应用的全新方式

什么是低代码门户技术&#xff1f; 低代码门户技术是一种利用低代码平台构建企业门户网站或应用的技术。门户通常是企业内部和外部用户访问信息和应用的集中平台。低代码门户技术通过图形化界面和预置组件&#xff0c;允许用户快速搭建和定制这些门户平台&#xff0c;而无需深…

数据结构入门学习(全是干货)——树(中)

数据结构入门学习&#xff08;全是干货&#xff09;——树&#xff08;中&#xff09; 1 二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称 BST&#xff09; 1.1 二叉搜索树及查找 二叉搜索树&#xff08;Binary Search Tree, BST&#xff09; 是一种特殊的二叉树…

四、JVM原理-4.1、JVM介绍

4.1、JVM介绍 4.1.1、如何理解Java虚拟机&#xff0c;它的结构是如何设计的&#xff1f; 答&#xff1a; Java虚拟机&#xff08;Java Virtual Machine&#xff0c;JVM&#xff09;是Java语言编写的程序在运行时的执行环境。它是Java的核心组成部分&#xff0c;负责解释和执行…

开源项目 face parsing 人脸区域分割 人像区域分割 人脸分割 人像区域分割 BiSeNet

开源项目 - face parsing 人脸区域分割 人像区域分割 人脸分割 人像区域分割 BiSeNet 人像分割 开源项目地址&#xff1a;https://gitcode.net/EricLee/faceparsing 包括开源数据集 和 预训练模型 咨询合作 DataBall 项目&#xff0c;欢迎加以下微信。 助力快速掌握数据集的信…

HarmonyOS 速记

目录 装饰器Entry(入口)Component(组件)State(状态)Prop(属性)Preview(预览)PreviewerInspector 结构体structbuild自定义组件自定义 Custom 组件 容器Row(行) & Column(列)RelativeContainer(相对布局容器)marginpaddingSwiper(轮播图)Grid(网格容器)List(列表) 组件Image…

python函数一:函数的概念、函数定义与调用、函数的参数、函数的返回值、说明文档以及函数的嵌套调用

文章目录 1. 函数介绍1.1 函数的概念1.2 函数定义与调用1.2 函数的参数1.3 函数的返回值1.4 说明文档 2. 函数的嵌套调用2.1 嵌套调用及执行流程2.2 嵌套调用的应用 1. 函数介绍 1.1 函数的概念 什么是函数&#xff1f; 函数:是一个被命名的、独立的、完成特定功能的代码段&am…

使用c#制作一个小型桌面程序

封装dll 首先使用visual stdio 创建Dll新项目,然后属性管理器导入自己的工程属性表&#xff08;如果没有可以参考visual stdio 如何配置opencv等其他环境&#xff09; 创建完成后 系统会自动生成一些文件&#xff0c;其中 pch.cpp 先不要修改&#xff0c;pch.h中先导入自己需…