bind、call、apply 区别?

作用

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

那么什么情况下需要改变this的指向呢?

下面举个例子

var name = "lucy";
var obj = {name: "martin",say: function () {console.log(this.name);}
};
obj.say(); // martin,this 指向 obj 对象
setTimeout(obj.say,0); // lucy,this 指向 window 对象

从上面可以看到,正常情况say方法输出martin

但是我们把say放在setTimeout方法中,在定时器中是作为回调函数来执行的,因此回到主栈执行时是在全局执行上下文的环境中执行的,这时候this指向window,所以输出lucy

我们实际需要的是this指向obj对象,这时候就需要该改变this指向了

setTimeout(obj.say.bind(obj),0); //martin,this指向obj对象

区别

下面再来看看applycallbind的使用

apply

apply接受两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以数组的形式传入。

改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次

function fn(...args){console.log(this,args);
}
let obj = {myname:"张三"
}fn.apply(obj,[1,2]); // this会变成传入的obj,传入的参数必须是一个数组;
fn(1,2) // this指向window

当第一个参数为nullundefined的时候,默认指向window(在浏览器中)

fn.apply(null,[1,2]); // this指向window
fn.apply(undefined,[1,2]); // this指向window

call

call方法的第一个参数也是this的指向,后面传入的是一个参数列表。

apply一样,改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次

function fn(...args){console.log(this,args);
}
let obj = {myname:"张三"
}fn.call(obj,1,2); // this会变成传入的obj,传入的参数必须是一个数组;
fn(1,2) // this指向window

同样的,当第一个参数为nullundefined的时候,默认指向window(在浏览器中)

fn.call(null,[1,2]); // this指向window
fn.call(undefined,[1,2]); // this指向window

bind

bind方法和call很相似,第一参数也是this的指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)。

改变this指向后不会立即执行,而是返回一个永久改变this指向的函数

function fn(...args){console.log(this,args);
}
let obj = {myname:"张三"
}const bindFn = fn.bind(obj); // this 也会变成传入的obj ,bind不是立即执行需要执行一次
bindFn(1,2) // this指向obj
fn(1,2) // this指向window

小结

从上面可以看到,applycallbind三者的区别在于:

  • 三者都可以改变函数的this对象指向
  • 三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefinednull,则默认指向全局window
  • 三者都可以传参,但是apply是数组,而call是参数列表,且applycall是一次性传入参数,而bind可以分为多次传入
  • bind是返回绑定this之后的函数,applycall 则是立即执行

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

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

相关文章

TikTok科技趋势:平台如何引领数字社交革命?

TikTok作为一款颠覆性的短视频应用,不仅改变了用户的娱乐方式,更在数字社交领域引领了一场革命。本文将深入探讨TikTok在科技趋势方面的引领作用,分析其在数字社交革命中的关键角色,以及通过技术创新如何不断满足用户需求&#xf…

实现树形结构的插件vue-tree-color及元素放大缩小拖动

实现流程图,借鉴vue-tree-color 引入依赖 npm install vue-tree-color 同时查看项目中是否已安装less和less-loader,因为该组件使用到less npm install --save-dev less less-loader 如果这里启动项目报错,有可能是less和less-loader的版本过高,可以降低版本,或者指定版本号…

【面试】数据库—优化—如何定位慢查询

数据库—优化—如何定位慢查询 1. 出现慢查询的情况(表象:页面加载过慢、接口压测响应时间过长(超过1s)): 聚合查询多表查询表数据量过大查询深度分页查询 2. 如何定位慢查询 方案一:开源工具…

OpenHarmony 鸿蒙系统之开发环境安装

一、首先在下方链接网址中下载DevEco Studio的安装包。 DevEco Studio历史版本下载-HarmonyOS应用开发官网

[字符串操作]挑选最大值序列

挑选最大值序列 题目描述 给出了若干行非负整数序列,请选择最大值所在的序列,按输入原样输出该序列。如果最大值出现在多个序列,则只输出最大值最后出现的序列。 假设:每个序列中至少有1个整数,至多300个整数&#x…

可替代LM5145,5.5V-100V Vin同步降压控制器_SCT82A30

SCT82A30是一款100V电压模式控制同步降压控制器,具有线路前馈。40ns受控高压侧MOSFET的最小导通时间支持高转换比,实现从48V输入到低压轨的直接降压转换,降低了系统复杂性和解决方案成本。如果需要,在低至6V的输入电压下降期间&am…

(Spring学习08)Spring之容器配置类解析过程源码解析

解析配置类 解析配置类流程图:https://www.processon.com/view/link/5f9512d5e401fd06fda0b2dd 解析配置类思维脑图:https://www.processon.com/view/link/614c83cae0b34d7b342f6d14 在启动Spring时,需要传入一个AppConfig.class给Applicat…

CNS0创建交货单没有WBS元素

1、问题 CNS0创建交货单带不出WBS,但是交货单过账之后,又可以读取到WBS。 2、原因 2.1、项目挂料 创建项目挂料时,当物料为通用料,则在网络中挂料时,采购类型为网络预留 当物料为专用料,则在网络中挂料时…

触摸键检测IC TS223——2.0V~5.5V 低功耗和宽工作电压 SSOP16、SOT-23-6封装形式

TS223是触摸键检测IC,提供1个触摸键。触摸检测IC是为了用可变面积的键取代传统的按钮键而设计的。低功耗和宽工作电压是触摸键的DC和AC特点。采用SSOP16、SOT-23-6的封 装形式封装。 主要特点: ● 工作电压2.0V~5.5V ● 工作电流VDD3V, 无…

JavaScript强制类型转换

强制类型转换: 强制类型转换:指将其他的数据类型转换为string、number、boolean 将其他数据类型转换为字符串String(): 方法一: - 可以通过调用被转换值的toString()方法来将其转换为字符串 - 调用xxx的yyy方法 --> xxx.yy…

debian12 最小化安装桌面 i3wm

怕记不住,先临时记录一下,还未整理,先凑合着看 debian12 最小安装 i3wm 一、先安装 debian12 最小安装 软件包只选择最后的两个 SSH服务,和管理工具 安装后查看IP,并用另一台电脑 ssh 连接操作,这样比较…

Android WebView 响应缓存 笔记

Android WebView 响应缓存 在 Android开发中,经常用到 WebView 进行 Hybrid 模式开发,而 缓存是 常见的优化方式。 一、WebView 缓存模式 Android WebView 通过 WebSettings.setCacheMode 设置缓存方式。 有 5 种模式,实际现在 4 种&#…

教你用JMeter做接口测试的几个简单实例

前言 这次小项目是基于HTTP协议的接口,通过JMeter来完成一次基本的接口测试,完整复习一下JMeter的基本操作。 在实际项目中,测试也要先从开发那拿到接口说明书,分析熟悉业务后,写接口的测试用例,最后再在…

Java毕业设计—vue+SpringBoot调查问卷管理系统

研究目的 在进入21世纪以后,互联网得到了蓬勃的发展,电子问卷调查也开始逐渐流行起来。传统纸质问卷和电子问卷相比较后,传统问卷还存在很多弊端: 问卷分发起来比较困难,并且分发试卷耗费大量的金钱和时间&#xff1…

2024年金科《数字媒体技术》专业参考书目及考试大纲

《计算机网络基础》考试大纲 一、参考书目: 《计算机网络技术与应用(第 2 版)》,段标、张玲主编,电子工业出版社. 二、考试形式: 闭卷,考试时间 90 分钟 三、考试内容和要求 (一…

Visual Studio(VS)常用快捷键(最详细)

Visual Studio常用快捷键 一、生成:常用快捷键二、调式:常用快捷键三、编辑:常用快捷键四、文件:常用快捷键五、项目:常用快捷键六、重构:常用快捷键七、工具:常用快捷键八、视图:常…

Echarts多图表动态更新示例

前端框架(html、echarts、jquery) <!DOCTYPE html> <html><head><meta charset"utf-8"><title>echarts多图表动态更新示例</title><script src"jquery.min.js"></script><script type"text/java…

强大的TFTP工具:Transfer免激活最新版

Transfer for Mac功能介绍 从头开始编写的Transfer可以完全控制您的文件传输&#xff0c;同时可以与现有的TFTP客户端完美兼容。Transfer附带对常见TFTP协议扩展和选项的支持&#xff0c;包括&#xff1a; RFC 2347-TFTP选项扩展 RFC 2348-TFTP块大小选项 RFC 2349-TFTP超时…

SystemUI下拉通知菜单栏定时自动隐藏

前言 在系统应用开发过程中&#xff0c;常常遇到一些特殊的需求&#xff0c;Android原生的应用并无此适配&#xff0c;此时需要对系统应用进行定制化开发。 目前遇到的这样一个需求&#xff1a;下拉通知菜单栏时&#xff0c;定时8秒后自动关闭通知菜单栏。通知菜单栏为Sytstem…

Python面经【11】- Python可迭代对象一网打尽专题

Python面经【11】- Python可迭代对象一网打尽专题 可迭代对象Python的迭代器、生成器1) 迭代器2) 生成器 可迭代对象、迭代器的区别12. 生成器、迭代器的区别什么是装饰器&#xff1f;函数装饰器有什么作用一句话解释什么样的语言能够使用装饰器Python中的作用域&#xff1f;什…