【js Call、apply与bind 区别】

JavaScript 中的 Call、apply 和 bind 都是用来改变函数的执行上下文(即 this 指向)的方法,但它们之间有些区别:

  1. Call 和 apply

Call 和 apply 都是 Function.prototype 的方法。它们的作用是改变函数的 this 指向,并立即执行函数。它们的区别只在于传入参数的方式。

function greeting(name) {console.log(`Hello, ${name}!`,this);
}
function greeting1() {this.name = ''
}greeting.call(null, 'John'); // Hello, John!,window
greeting.apply(null, ['John']); // Hello, John!,window
greeting.call(greeting1, 'John'); // Hello, John!,greeting1()
greeting.apply(greeting1, ['John']); // Hello, John!,greeting1()

他们的第一个参数就是改变this指向的关键,如上,传入其他对象或函数,this指向就发生了改变,如果传入null 就默认指定window对象

第二各参数Call 方法接收的是一个参数列表,而 apply 方法接收的是一个数组。

  1. Bind

Bind 方法也能改变函数的 this 指向,但它不会立即执行函数,而是返回一个新函数,需要调用才会执行。

function greeting(name) {console.log(`Hello, ${name}!`,this);
}const greetJohn = greeting.bind(null, 'John');
greetJohn(); // Hello, John!,window

Bind 方法的第一个参数是 this 指向,后面的参数是要在调用时传入到原函数中的值。如果在调用 bind 时不传入 this 指向,那么默认为 undefined。传入null时它的this指向就是谁调用指向谁

需要注意的是,bind 方法返回的是一个新函数,如果原函数有返回值,那么绑定后的函数也会返回相同的值。

综上所述,Call 和 apply 用来改变函数的 this 指向并立即执行,而 bind 则是用来绑定函数与 this 的关系,返回一个新的函数。

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

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

相关文章

electron 生成 arm64 的包

vue electron:https://blog.csdn.net/qq1195566313/article/details/131713875 打包配置修改如下 electronBuilder.build({config: {appId: com.example.app,productName: vite-electron,directories: {output: path.join(process.cwd(), "release"), …

Windows OS CMD 常用工具 の 命令合集

# First Of All 每次想要修改环境变量都要按部就班点开系统属性、高级系统设置、环境变量。这种操作实在是太繁琐了,对于我一个懒人来讲实在是 忍无可忍 。如果可以使用 WINR 或 CMD 直接打开系统内的一些工具,是不是就可以节省很多时间;是不…

【node.js】01-fs读写文件内容

目录 一、fs.readFile() 读取文件内容 二、fs.writeFile() 向指定的文件中写入内容 案例:整理txt 需求: 代码: 一、fs.readFile() 读取文件内容 代码: //导入fs模块,从来操作文件 const fs require(fs)// 2.调…

Elasticsearch查询裁剪

如果source有成千上百个字段,查询的数据没法看 某些敏感字段不能随意展示 响应数据较大影响网络带宽 查看文档信息 查看ffbf索引id为123的文档信息 GET /ffbf/_doc/123返回结果 {"_index" : "ffbf","_type" : "_doc","_id&qu…

【雕爷学编程】Arduino动手做(173)---SG90舵机双轴云台模块

37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&am…

windows配置anaconda环境变量

windows 配置 anaconda 环境变量,可以做到 cmd 中调用 conda 命令,不必每次都去找 Anaconda Prompt 文章目录 1. 找到Anaconda的安装位置2. 配置系统环境变量2.1 一步到位2.1 或者手动打开2.2 配置环境变量 3. 检查 1. 找到Anaconda的安装位置 默认安…

kafka面试题

kafka基本概念 Producer 生产者:负责将消息发送到 BrokerConsumer 消费者:从 Broker 接收消息Consumer Group 消费者组:由多个 Consumer 组成。消费者组内每个消费者负责消费不同分区的数据,一个分区只能由一个组内消费者消费&am…

C++[第十七章]--模板引入

模板引入 文章目录 模板引入1、函数模板格式2、使用3、参数推导过程有限的类型转换苛刻的类型匹配推导示例1、函数模板 建立一个通用函数,其函数类型和形参类型不具体指定,用一个虚拟的类型来表达。这个通用函数就称为函数模板 格式 template<类型参数表> 返回值 函…

Vue中TodoList案例_动画

MyItem.vue : 主要是引入了import animate.css样式库&#xff0c;animate.css样式库配置见上一篇文章animate.css样式库&#xff0c;然后再li标签外套了transition标签&#xff0c;引用了name里面的名称是animate.css拿过来的&#xff0c;绑定了enter-active-class和leave-act…

电脑硬盘指的是什么?电脑硬盘长什么样子呢

在很早之前就听说过电脑里面有硬盘&#xff0c;但是不知道电脑硬盘是什么样子&#xff0c;本章文章结合硬盘的接口类型&#xff0c;以及应用技术&#xff0c;说说与硬盘样式有关的知识 一。机械硬盘 如果从硬盘的应用技术来区分硬盘&#xff0c;一般分为两种&#xff0c;早些年…

2023年第三届能源、电力与电气工程国际会议 (CoEEPE 2023)

会议简介 Brief Introduction 2023年第三届能源、电力与电气工程国际会议(CoEEPE 2023) 会议时间&#xff1a;2023年11月22日-24日 召开地点&#xff1a;澳大利亚墨尔本 大会官网&#xff1a;www.coeepe.org 2023年第三届能源、电力与电气工程国际会议(CoEEPE 2023)由安徽大学、…

【大数据运维-ambari】自定义fair-scheduler.xml配置文件导致ambari-server启动失败

将自定义fair-scheduler.xml放到 /var/lib/ambari-server/resources/stacks/HDP/3.0/services/YARN/configuration目录下&#xff0c;重启ambari-server失败&#xff1a; 日志显示&#xff1a; 进ambari数据库查看发现数据应该是对的。 删掉之前自定义的文件fair-scheduler.x…

JavaScript function默认参数赋值前后顺序差异

1、(num1,num2num1) 当传值仅传一个参数时&#xff0c;先给到第一个参数即num1&#xff0c;num1再赋值给num2&#xff0c; function sum(num1, num2 num1) {console.log(num1 num2) } sum(10)//20 sum(10,3)//13 2、(t2t1,t1) 当传值仅有一个参数时&#xff0c;先给到第一个…

qt signal slots lambda

这里用到了qt的版本检测 连接 Combox的currentIndexChanged事件 emit来触发处理的事件 &#xff0c;进行业务或逻辑处理 这样的写法是lambda表达式的写法&#xff0c;和c#中的 (obj)>{ //todo } 类同 [](int indx){ //todo } #if QT_VERSION > QT_VERSION_CHECK(5,7,0)c…

Qt 第一讲

登录框设置 #include "zuoye.h" #include "ui_zuoye.h"Zuoye::Zuoye(QWidget *parent): QWidget(parent), ui(new Ui::Zuoye) {ui->setupUi(this);//界面this->resize(540,420); //设置尺寸this->setFixedSize(540,420);//固定尺寸this->setS…

FPGA设计时序分析二、建立/恢复时间

目录 一、背景知识 1.1 理想时序模型 1.2 实际时序模型 1.2.1 时钟不确定性 1.2.2 触发器特性 二、时序分析 2.1 时序模型图 ​2.2 时序定性分析 一、背景知识 之前的章节提到&#xff0c;时钟对于FPGA的重要性不亚于心脏对于人的重要性&#xff0c;所有的逻辑运算都离开…

Unity光照相关知识和实践 (烘焙光照,环境光设置,全局光照)

简介 本文将会通过一个简单的场景搭建&#xff0c;介绍如何使用烘焙光照以及相关的注意事项。另外还介绍了Unity内全局光照&#xff08;GI&#xff09;的知识和GI实际在游戏内的表现效果。 Unity关于光照相关的参考文档地址&#xff1a;https://docs.unity.cn/cn/current/Man…

JAVA基础-集合(List与Map)

目录 引言 一&#xff0c;Collection集合 1.1,List接口 1.1.1&#xff0c;ArrayList 1.1.1.1&#xff0c;ArrayList的add&#xff08;&#xff09;添加方法 1.1.1.2&#xff0c;ArrayList的remove&#xff08;&#xff09;删除方法 1.1.1.3&#xff0c;ArrayList的contai…

代码随想录刷题记录

代码随想录刷题记录 1、数组 1.1、二分查找 题目传送门 方法一&#xff1a;二分查找 class Solution {public int search(int[] nums, int target) {int left 0, right nums.length - 1;while(left < right){int mid (left right) / 2;if (nums[mid] target){return…

web前端tips:js继承——借用构造函数继承

上篇文章给大家分享了 js继承中的原型链继承 web前端tips&#xff1a;js继承——原型链继承 在文章末尾&#xff0c;我提到了 原型链的继承&#xff0c;子类需要传递参数给父类的构造函数&#xff0c;就无法通过直接调用父类的构造函数来实现&#xff0c;需要通过中间的过程来…