JavaScript中bind、apply、call的理解

bind、apply、call是什么?

 bind、apply、call是Function原型的方法,而在js中所有的函数都是Function的实例,所以,有所有函数都可以使用这三个方法。

 bind、apply、call有什么作用?

改变this指向 ,这是它们的共同作用,如下所示:

function fn() {console.log(this, 111)
}
let obj = {name: '谭梦寻'
}
fn() // 输出的是window全局对象
fn.call(obj) // 输出:{ name: '谭梦寻' } 111

  bind、apply、call三者的区别

 bind的特点:
  • 不会调用原来的函数   可以改变原来函数内部的this 指向
  •  返回的是原函数改变this之后产生的新函数
  • 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
bind的场景理解 :牛客网专项真题:二次封装函数_牛客题霸_牛客网
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>/* 填写样式 */</style>
</head><body><!-- 填写标签 --><script type="text/javascript">// 填写JavaScriptfunction partialUsingArguments(fn) {//null就是this,默认就是windowreturn result = fn.bind(null, ...[...arguments].slice(1))}</script>
</body></html>

这里为什么用bind呢?因为bind的作用是只改变函数的指向,而不调用该函数,很多小伙伴可能会直接使用 return result = fn(参数);这样的话,就会调用了这个函数,达不到题目要求的效果。

call的特点: 
  • call()方法接受的语法和作用与apply()方法类似,只有一个区别就是call()接受的是一个参数列表,而apply()方法接受的是一个包含多个参数的数组或伪数组。
  • call()、apply()和bind的区别就是它们会调用函数
  • call 的主要作用可以实现继承

 call的场景:

只改变this并调用函数和继承:

var o = {name: 'andy'
}function fn(a, b) {console.log(this);console.log(a + b);};
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承
function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;
}function Son(uname, age, sex) {Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
console.log(son);//Son { uname: '刘德华', age: 18, sex: '男' }
apply的特点:
  • 使用 apply, 我们可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。
  • apply 与 call() 非常相似,不同之处在于提供参数的方式。apply 使用参数数组或者伪数组,而不是一组参数列表。
  • apply 可以使用数组字面量(array literal),如 fun.apply(this, [‘eat’, ‘bananas’]),或数组对象, 如 fun.apply(this, new Array(‘eat’, ‘bananas’))。
 apply的主要应用场景:

利用 apply 借助于数学内置对象求数组最大值 :

var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);

拓展: 

函数上下文:函数的this指向。

// 将函数 fn 的执行上下文改为 obj 对象 
//函数上下文指的是this指向 即将fn函数this指向obj对象
function speak(fn, obj) {return fn.apply(obj)
}
/*
下面两个也都可以实现function speak(fn, obj) {return fn.call(obj)
}
function speak(fn, obj) {return fn.bind(obj)()
}
*/

 

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

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

相关文章

单元测试--Junit

Junit是Java的单元测试框架提供了一些注解方便我们进行单元测试 1. 常用注解 常用注解&#xff1a; TestBeforeAll&#xff0c;AfterAllBeforeEach&#xff0c;AfterEach 使用这些注解需要先引入依赖&#xff1a; <dependency><groupId>org.junit.jupiter<…

[IMX6ULL]移植NXP Linux Kernel 5.15

移植NXP Linux Kernel 5.15 2024-7-7 hongxi.zhu 1. 下载NXP Linux Kernel 5.15 仓库[nxp-imx/linux-imx] git clone -b lf-5.15.y https://github.com/nxp-imx/linux-imx.git 2. 编译NXP Linux Kernel 5.15 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- distclean make…

C++树形结构(1 基础)

目录 一.基础&#xff1a; 1.概念&#xff1a; 2.定义&#xff1a; Ⅰ.树的相关基础术语&#xff1a; Ⅱ.树的层次&#xff1a; 3.树的性质&#xff1a; 二.存储思路&#xff1a; 1.结构体存储&#xff1a; 2.数组存储&#xff1a; 三.树的遍历模板&#xff1a; 四.信…

Mysql-索引结构

一.什么是索引&#xff1f; 索引(index)是帮助MySQL高效获取数据的数据结构(有序)。在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数据结构上实现高级查找算法,这种数据结构就是索引 二.无索引的情况 找到…

SpringBoot集成Kaptcha验证码

Hi &#x1f44b;, Im shy 有人见尘埃&#xff0c;有人见星辰 1. 什么是Kaptcha验证码? Kaptcha是一个强大的开源Java验证码生成库,由Google开发。它能够生成高度可配置的图片验证码,主要用于防止自动化程序滥用web应用,提高应用的安全性。 2. Kaptcha的主要特性 Kaptch…

3.3-LSTM的改进

文章目录 1改进点1.1多层化1.2 dropout1.2.1具体概念1.2.2应该插入到LSTM模型的哪里 1.3权重共享 2改进之后的LSTMLM的代码实现2.1初始化2.2前向计算2.3反向传播 3相应的学习代码的实现4总结 1改进点 1.1多层化 加深神经网络的层数往往能够学习更复杂的模式&#xff1b;因此这…

AI学习记录 - 图像识别的基础入门

代码实现&#xff0c;图像识别入门其实非常简单&#xff0c;这里使用的是js&#xff0c;其实就是把二维数组进行公式化处理&#xff0c;处理方式如上图&#xff0c;不同的公式代表的不同的意义&#xff0c;这些意义网上其实非常多&#xff0c;这里就不细讲了。 const getSpecif…

vue-快速入门

Vue 前端体系、前后端分离 1、概述 1.1、简介 Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;可以高效地开发用户界面。…

C语言 之 理解指针(4)

文章目录 1. 字符指针变量2. 数组指针变量2.1 对数组指针变量的理解2.2 数组指针变量的初始化 3. 二维数组传参的本质4. 函数指针变量4.1 函数指针变量的创建4.2 函数指针变量的使用 5. 函数指针数组 1. 字符指针变量 我们在前面使用的主要是整形指针变量&#xff0c;现在要学…

C++入门基础:C++中的循环语句

循环语句是编程语言中用来重复执行一段代码直到满足特定条件的一种控制结构。它们对于处理需要重复任务的场景非常有用&#xff0c;比如遍历数组、累加数值、重复执行某项操作直到满足条件等。 但是在使用循环语句的时候需要注意下哈&#xff0c;有时候一不小心会构成死循环或者…

服务器利用宝塔面板部署Django项目

目录 1. 使用命令启动Django项目1.1 使用 Xshell 连接服务器1.2 安装Anaconda1.3 启动Django项目1.4 使用tmux实现项目的后台运行 2. 使用Python项目管理器部署项目2.1 安装宝塔面板和软件2.2 添加站点2.3 上传项目文件2.3.1 收集静态文件2.3.2 生成依赖文件 2.4 安装安装Pytho…

【笔记】学习记录

2024年7月23日 1.图的5中存储方式 2.二叉树的先序&#xff0c;中序&#xff0c;后序遍历。 学了图的存储方式之后&#xff0c;二叉树好像就是小菜一碟一样。注意一下名词的顺序就可以了。 所谓先中后序&#xff0c;就是先根&#xff0c;中根&#xff0c;后根的差别。没有其…

FoundationDB 基本使用

目录 一、FoundationDB介绍 二、安装单机版FoundationDB 2.1 下载安装程序 2.2 安装FoundationDB 2.3 修改配置信息 2.4 管理FoundationDB服务 三、fdbcli的常用命令 3.1连接数据库 3.2退出fdbcli 3.3查看版本 3.4 写模式 3.5写入键值 3.6读取键值 3.7删除键值 …

学习笔记之JAVA篇(0724)

p 方法 方法声明格式&#xff1a; [修饰符1 修饰符2 ...] 返回值类型 方法名&#xff08;形式参数列表&#xff09;{ java语句;......; } 方法调用方式 普通方法对象.方法名&#xff08;实参列表&#xff09;静态方法类名.方法名&#xff08;实参列表&#xff09; 方法的详…

Java之泛型基础

泛型 1 问题引入 在前面学习集合时&#xff0c;我们都知道集合中是可以存放任意对象的&#xff0c;只要把对象存储集合后&#xff0c;那么这时他们都会被提升成Object类型。当我们在取出每一个对象&#xff0c;并且进行相应的操作&#xff0c;这时必须采用类型转换。 观察下…

视频去水印免费电脑版 pdf压缩在线免费网页版 pdf压缩在线免费 简单工具软件详细方法步骤分享

消除视频中的恼人水印&#xff0c;是许多视频编辑爱好者的常见需求。在这篇文章中&#xff0c;我们将探讨几种视频去水印的技巧&#xff0c;在数字化时代&#xff0c;视频和图片的传播越来越方便&#xff0c;但随之而来的水印问题也让人头疼。本文将为您详细介绍视频剪辑去水印…

vue环境安装

安装node.js 网址&#xff1a;https://nodejs.org/en/download/ 直接点击下载就ok 一路next&#xff0c;这里可以改一下保存路径 选第一个 安装后&#xff0c;找到node.js的安装目录&#xff0c;创建这两个文件夹 之后打开命令提示符&#xff0c;右键以管理员身份运行 将新创…

智能猫砂盆买开放式还是封闭式?四年养猫老手实用测评三个品牌!

有没有人跟我一样&#xff0c;买过封闭式的智能猫砂盆回来&#xff0c;结果猫咪不爱用&#xff0c;死活不肯进去&#xff0c;搞得智能猫砂盆白买了&#xff0c;但是平时上班太忙碌&#xff0c;真的很需要一个可以帮自己铲屎的智能猫砂盆&#xff0c;后面恶补了一下知识&#xf…

通信原理-思科实验四:静态路由项配置实验

实验四 静态路由项配置实验 一&#xff1a;实验内容 二&#xff1a;实验目的 三、实验原理 四、实验步骤 选择三个2811型号的路由器 R1、R2、R3 路由器默认只有两个快速以太网接口&#xff0c;为路由器R1和R3增加快速以太网接口模块NM-1FE-TX&#xff0c;安装后检查路由器的接…

JavaSE--基础语法--继承和多态(第三期)

一.继承 1.1我们为什么需要继承? 首先&#xff0c;Java中使用类对现实世界中实体来进行描述&#xff0c;类经过实例化之后的产物对象&#xff0c;则可以用来表示现实中的实体&#xff0c;但是 现实世界错综复杂&#xff0c;事物之间可能会存在一些关联&#xff0c;那在设计程…