JS中改变this指向的六种方法

大家肯定为this指向的问题感到烦恼,接下来让我为大家介绍六种改变this指向的方法吧!

1、在指定位置定义this存为变量

    // 在指定位置定义this存为变量// 我们可以自己存一个变量let _this = thisconst obj = {fun(){console.log(_this) //window}}obj.fun()

2.箭头函数

    // 箭头函数// 获取按钮,添加点击事件document.querySelector("button").onclick = ()=>{// 在我们普通函数下的事件this指向调用者console.log(this) //window}

3.使用setTimeout

    // 使用setTimeout,this指向window// 获取按钮,添加点击事件document.querySelector("button").onclick = function(){setTimeout(function(){console.log(this) //window},1000)} 

4.call( )方法改变this指向

作用:调用函数 改变this指向
语法:fun.call(thisArg,arg1,arg2,…)

thisArg:在fun函数运行时指定的this值
arg1,arg2:传递的其他参数
返回值就是函数的返回值,因为它就是调用函数

    const obj = {uname: "张三"}function fun(a, b) {//正常情况下指向window// 这里我们使用了call方法改变了this指向,指向了objconsole.log(this) //指向obj {uname : "张三"}// 这里我们传了2个值 1 2console.log(a + b) //3}fun.call(obj, 1, 2)

5.apply( )方法改变this指向

作用:调用函数 改变this指向
语法:fun.apply(thisArg,[argsArray])
thisArg:在fun函数运行时指定的this值
argsArray:传递的值,必须包含在数组里面
返回值就是函数的返回值,因为它就是调用函数

    const obj = {uname: "张三"}function fun(a, b) {//正常情况下指向window// 这里我们使用了apply方法改变了this指向,指向了objconsole.log(this) //指向obj {}// 这里我们传了2个值 1 2console.log(a + b) //3}fun.apply(obj, [1, 2])

6、bind( )方法改变this指向(重要)

bind()方法不会调用函数。但是能改变函数内部this指向
语法:fun.bind(thisArg,arg1,arg2,…)
thisArg:在fun函数运行时指定的this值
arg1,arg2:传递的其他参数
返回由指定的this值和初始化参数改造的 原函数拷贝(新函数)
因此当我们只是想改变this指向,并且不想调用这个函数的时候,可以使用 bind ,比如改变定时器内部的this指向

不调用函数:

    function fun() {console.log(this) //不打印}fun.bind()

原函数拷贝(新函数)

    const obj = {uname: "张三"}function fun() {console.log(this)}// 相当于拷贝// function fun() {//     console.log(this)// }fun.bind(obj)

如果想要使用

    const obj = {uname: "张三"}function fun() {console.log(this) //指向obj {uname:"张三"}}// 加()fun.bind(obj)()

感谢大家的阅读,如有不对的地方,可以向我指出,感谢大家!

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

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

相关文章

Edge---微软浏览器-兼容性问题-解决办法(详细)

图片现象: 快捷键:winR (进入管理员命令窗口) 输入:regedit (进入注册表编辑器) 点击文件夹:HKEY_LOCAL_MACHINE 找到这个路径的文件项:HKEY_LOCAL_MACHINE\SOFTWARE…

web前端面试-- IEEE754标准JS精度丢失问题0.1+0.2!=0.3、0.2+0.3==0.5 十进制转二进制讲解

本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-) web面试题专栏:点击此处 背景 WEB前端面试官:0.20.3是否等于0.5&#xff…

JDBC-day06(数据库连接池)

八:数据库连接池 1. 传统连接数据库的模式 在使用开发基于数据库的web程序时,传统的模式基本是按以下步骤: 在主程序(如servlet、bea,ns)中建立数据库连接进行sql操作断开数据库连接 传统的模式存在的问…

zookeeper(目前只有安装)

安装 流程 学kafka的时候安装 Apache ZooKeeper 安装地址:https://archive.apache.org/dist/zookeeper/zookeeper-3.5.7/apache-zookeeper-3.5.7-bin.tar.gz 解压 tar -zxvf kafka_2.12-3.0.0.tgz -C /export/server/ 改配置 cd config cp zoo_sample.cfg z…

一、vue介绍

一、介绍 vue式前端框架,是一套用于构建用户界面的渐进式框架 1、安装vue 安装node.js(配置环境变量) https://nodejs.org/en/download/ 更换镜像 npm config set registry https://registry.npm.taobao.org 查看镜像 npm config get regi…

Pixhawk 6c (PX4)真机USB连接mavros失败

概述 笔者和同事近期购买了Pixhawk6c,它也是目前Pixhawk系列中最新的飞控。 但是在测试的过程中遇到了一个问题,发现它无法连接到mavros。 于是进行了一系列原因摸排,在国内的博客尚未看到能用的解决方案,在px4论坛上倒是找到了答…

VUE:侧边弹出栏组件,组件中有树状图,搜索框可筛选树状图节点,可收缩

作者:CSDN @ _乐多_ 本文记录了一个侧边弹出栏组件代码。代码即插即用。 弹出栏中有树状图,搜索框,可收缩。 其中,搜索框可筛选树状图节点。点击右侧小按钮可以收缩弹出框,点击X号也可以收缩弹出框。 文章目录 一、组件代码代码依赖element-plus库。且需要下载几个svg图…

Hadoop分布式计算框架-MapReduce

本文所有代码链接:https://download.csdn.net/download/shangjg03/88437313 1.MapReduce概述 Hadoop MapReduce 是一个分布式计算框架,用于编写批处理应用程序。编写好的程序可以提交到 Hadoop 集群上用于并行处理大规模的数据集。 MapReduce 作业通过将输入的数据集拆分为独…

FUNCTION 表示 getter setter

场景: 某些时候,会对同一个对象的多个不同属性做相同操作,代码复用原则,可以把 getter setter 用 FUNCTION 表示; import java.util.function.BiConsumer;import java.util.function.Function;private static void res…

采集数据重复解决方法

在大数据采集或大批量采集文章时,有可能会出现数据重复,而重复数据会导致数据分析出现偏差甚至错误,如何避免采集数据重复是个值得研究的问题。 目录 1. 优化采集方案 2. 过滤去重规则 3. 比对算法 4. 数据采集工具 减少采集数据重复的常…

grafana v10.1版本设置告警

1. 相关概念概述 如图所示,点击切换菜单标志,可以看到警报相关子选项。 警报规则:通过PromQL语句定义告警规则,即达到怎样的状态触发告警。 联络点: 设置当警报规则实例触发时,如何通知联系人,…

AI杀疯!2023上半年至今有趣的AI算法(内附视频)

公众号:算法一只狗 文章目录 第一个,一切都可以进行分割第二个,开源图文回答工具第三个,视频转换风格生成第四个,免费好用的文档对话工具文档对话能力文档联系功能 今年,我们见证了人工智能算法的起飞&…

用结构加法比较4个结构的顺序

( A, B )---5-30-2---( 1, 0 )( 0, 1 ) 让网络的输入只有5个节点,AB训练集各由5张二值化的图片组成,让A中有5个点,B全是0。统计迭代次数并排序。 其中5-x有4组数据 5-x 差值结构 迭代次数 41 4-x 差值结构 迭代次数 19 0 0 1 236…

Python 机器学习入门之ID3决策树算法

系列文章目录 第一章 Python 机器学习入门之线性回归 第一章 Python 机器学习入门之梯度下降法 第一章 Python 机器学习入门之牛顿法 第二章 Python 机器学习入门之逻辑回归 番外 Python 机器学习入门之K近邻算法 番外 Python 机器学习入门之K-Means聚类算法 第三章 Python 机…

常量字符串

一、常量字符串是什么? 常量字符串是一个常量,它的值是首字符的地址 比如 "abcdefg" 或 "123456789" 就是常量字符串 二、常量字符串与普通字符串的区别 1.常量字符串不可更改,而普通字符串可以更改 利用memcpy内存…

python知识:从PDF 提取文本

一、说明 PDF 到文本提取是自然语言处理和数据分析中的一项基本任务,它允许研究人员和数据分析师从 PDF 文件中包含的非结构化文本数据中获得见解。Python 是一种通用且广泛使用的编程语言,它提供了多个库和工具来促进提取过程。 二、各种PDF操作库 让我…

Vue+openlayers+projs4实现坐标转换

一、背景 有一堆点数据,需要在地图上标记,只知参考北京54坐标系或西安80坐标系,但具体是哪种不清楚,这时候就需要坐标转换。ps:EPSG:3857(openlayers参照的坐标系) 二、思路 1、研…

原码、反码、补码在汇编中的应用

原文章:知乎 原码和二进制类似,不过它有符号位。正数符号位为0,负数为1 。 例:40000 0100 ,-41000 0100 原码是人脑最容易理解和计算的表示方式。 但是这在计算机中计算就出了问题,这两个(4…

Jmeter接口测试:jmeter导入和导出接口的处理

JMeter测试导入接口 利用Jmeter测试上传文件,首先可根据接口文档或者fiddler抓包分析文件上传的接口;如下图: 以下是我通过fiddler所截取的文件上传的接口 1、填写导入接口的信息 查看文件上传栏下的填写信息: 文件名称&#x…

vue与react,angular的区别

Vue.js 作为一个优秀的前端框架,方便前端开发者快速开发应用的前端,在实际项目中使用得比较普遍。 当然 Vue.js 也不是实际项目中唯一的前端框架,比较优秀的前端框架还有 React、AngularJS 和 Angular等。接下来就介绍一下 Vue.js 同这3个框架…