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

相关文章

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》:本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3

Jsoncpp的安装与使用方式

《Jsoncpp的安装与使用方式》JsonCpp是一个用于解析和生成JSON数据的C++库,它支持解析JSON文件或字符串到C++对象,以及将C++对象序列化回JSON格式,安装JsonCpp可以通过... 目录安装jsoncppJsoncpp的使用Value类构造函数检测保存的数据类型提取数据对json数

Redis事务与数据持久化方式

《Redis事务与数据持久化方式》该文档主要介绍了Redis事务和持久化机制,事务通过将多个命令打包执行,而持久化则通过快照(RDB)和追加式文件(AOF)两种方式将内存数据保存到磁盘,以防止数据丢失... 目录一、Redis 事务1.1 事务本质1.2 数据库事务与redis事务1.2.1 数据库事务1.

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

Linux磁盘分区、格式化和挂载方式

《Linux磁盘分区、格式化和挂载方式》本文详细介绍了Linux系统中磁盘分区、格式化和挂载的基本操作步骤和命令,包括MBR和GPT分区表的区别、fdisk和gdisk命令的使用、常见的文件系统格式以... 目录一、磁盘分区表分类二、fdisk命令创建分区1、交互式的命令2、分区主分区3、创建扩展分区,然后

Linux中chmod权限设置方式

《Linux中chmod权限设置方式》本文介绍了Linux系统中文件和目录权限的设置方法,包括chmod、chown和chgrp命令的使用,以及权限模式和符号模式的详细说明,通过这些命令,用户可以灵活... 目录设置基本权限命令:chmod1、权限介绍2、chmod命令常见用法和示例3、文件权限详解4、ch

springboot整合 xxl-job及使用步骤

《springboot整合xxl-job及使用步骤》XXL-JOB是一个分布式任务调度平台,用于解决分布式系统中的任务调度和管理问题,文章详细介绍了XXL-JOB的架构,包括调度中心、执行器和Web... 目录一、xxl-job是什么二、使用步骤1. 下载并运行管理端代码2. 访问管理页面,确认是否启动成功

Java中的密码加密方式

《Java中的密码加密方式》文章介绍了Java中使用MD5算法对密码进行加密的方法,以及如何通过加盐和多重加密来提高密码的安全性,MD5是一种不可逆的哈希算法,适合用于存储密码,因为其输出的摘要长度固... 目录Java的密码加密方式密码加密一般的应用方式是总结Java的密码加密方式密码加密【这里采用的