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

相关文章

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》:本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量:定义、赋值自定义变量:引用、修改、删

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

python判断文件是否存在常用的几种方式

《python判断文件是否存在常用的几种方式》在Python中我们在读写文件之前,首先要做的事情就是判断文件是否存在,否则很容易发生错误的情况,:本文主要介绍python判断文件是否存在常用的几种... 目录1. 使用 os.path.exists()2. 使用 os.path.isfile()3. 使用

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.