js改变this指向的call();apply();bing()的使用方式!

2024-04-10 16:38

本文主要是介绍js改变this指向的call();apply();bing()的使用方式!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

js改变this指向的call();apply();bing()的使用方式!

1、call()

我们在js中写上这样一个代码

  var o = {name :"andy"}function fn (){console.log(this)}fn()

发现打印出来的this是window;
在这里插入图片描述
这时候我们可以使用我们call()方法来改变this的指向;

var o = {name :"andy"}function fn (){console.log(this)}fn.call(o);//这个是上面的o对象

这里我们就把this指向变成了o对象了
在这里插入图片描述
call()方法不仅可以改变this指向问题,我们还可以进行数据的传参,如下:

     var o = {name :"andy"}function fn (a,b){console.log(this)console.log(a+b);}fn.call(o,1,2);//这个是上面的o对象  1、2是我们传递的参数

我们可以获取到结果:
在这里插入图片描述

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 ('么西么西',21,'男')console.log(son);

在这里插入图片描述

2、apple()

1、改变this的指向:

var o = {name :"andy"}function fn (){console.log(this)}fn.apply(o,);//这个是上面的o对象

在这里插入图片描述
2、传递参数(注意参数一定只能是数组形式)

 var o = {name :"andy"}function fn (arr){console.log(this)console.log(arr);}fn.apply(o,['666']);

在这里插入图片描述
3、apply()的主要应用:比如说我们可以利用apply的方法来借助于数学的内置对象求最大值,

var arr=[1,66,3,99,4]var max = Math.max.apply(Math,arr)console.log(max);

在这里插入图片描述

bind()

1、改变this的指向:

  var o = {name :"andy"}function fn (){console.log(this)}var f = fn.bind(o);f();

在这里插入图片描述
我们发现bind()不会调用原来的函数,但是可以改变原来的this指向然后返回一个原函数改变this指向的新函数!!!
2、数据传参
和call()方法一样,我们看一下:

   var o = {name :"andy"}function fn (a,b){console.log(this);console.log(a+b);}var f = fn.bind(o,11,22);f();

出来的效果是这样的:
在这里插入图片描述
典型应用:如果我们有的函数我们不需要立即调用函数但又想改变this的指向
比如:我们点击了一个按钮,我们在3秒之后开启,我们就是使用bind():

<button>按钮</button><script>var o = {name :"andy"}function fn (a,b){console.log(this);console.log(a+b);}var f = fn.bind(o,11,22);f();btn = document.querySelector("button")btn.onclick = function(){this.disabled = true;setTimeout(function(){this.disabled= false;}.bind(this),3000)//我们写在定时器的外面,此时this指定的是我们btn这个对象}</script>

好了!3种方法都说了!!!

现在总结一下:

相同点:
都可以改变函数内部的this指向。
区别点:
1、call和apply会调用函数,并且改变内部this指向
2、call和apply传递参数不一样,call传递参数aru1,aru2…形式,apply必须数组形式[arg]
3、bind不会调用函数,可以改变函数内部this指向。
主要应用场景
1、call经常做继承
2、apply经常跟数组有关系,比如借助于数学对象数组最大值最小值
3、bind不会调用函数,但是还想改变this指向,比如改变定时器内部的this指向。

这篇关于js改变this指向的call();apply();bing()的使用方式!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/891586

相关文章

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》:本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法,没有

MyBatis ParameterHandler的具体使用

《MyBatisParameterHandler的具体使用》本文主要介绍了MyBatisParameterHandler的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、概述二、源码1 关键属性2.setParameters3.TypeHandler1.TypeHa

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识:Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可