关于JavaScript中this的指向问题

最新推荐文章于 2022-06-10 15:00:26 发布
原创 最新推荐文章于 2022-06-10 15:00:26 发布 · 343 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #es6

本文详细介绍了JavaScript中this的指向问题，包括全局、函数调用、对象方法、事件处理和定时器等场景下的this行为。特别提到了箭头函数和ES6中的bind、call、apply方法如何改变this的指向。通过对这些知识点的总结，有助于开发者更好地理解和掌握JavaScript中this的用法。

this是JavaScript中的关键字，this的指向问题也一直是一个让人比较头疼的问题，

由于this是一个魔术变量，它的指向也是由函数的调用方式来决定的。下面我总结几个this的使用场景，来帮助大家更好的理解this的指向问题（欢迎留言补漏）

1、在全局中的this就指向window

在这里插入图片描述
在这里插入图片描述

2、全局调用普通函数，函数中的this指向window

在这里插入图片描述
在这里插入图片描述

3、在全局中，自调用函数中的this指向window

在这里插入图片描述

在这里插入图片描述

4、对象方法中的this指向当前对象

在这里插入图片描述
在这里插入图片描述

5、js动态绑定事件函数中的this指向当前事件源（节点对象）

在这里插入图片描述

在这里插入图片描述

6、行内绑定事件的回调函数中的this指向window

在这里插入图片描述
在这里插入图片描述

7、行内绑定事件中的this指向当前节点对象

在这里插入图片描述
在这里插入图片描述

8、延时器和定时器中的this指向window

在这里插入图片描述
在这里插入图片描述

this始终指向的都是一个对象，所以this的指向还是要看是谁来调用的

在ES6新语法中有一个特殊的函数 - 箭头函数

箭头函数中的this继承了函数当前所处的作用域，这就为开发者提供了一个很便利的方式，可控制this的指向

在这里插入图片描述
在这里插入图片描述

改变this指向其实还有更为简单粗暴的方法，也是ES6新语法：

1、bind(希望的this指向，函数参数) - 一般用在浏览器或者js自己调用的回调函数上，改变this指向，但是不立马调用（会复制函数，改变的是复制的函数中的this，原函数不变）

在这里插入图片描述
在这里插入图片描述

2、call(希望的this指向，形参1，形参2…)，apply(希望的this指向，[参数1，参数2…]) - 一般用在立马调用的地方（直接改变原函数中的this）

在这里插入图片描述
在这里插入图片描述

Humor_Mr
关注
关于JavaScript中的this指向问题总结篇
12-09
综上所述，理解JavaScript中的this指向是至关重要的，因为它决定了函数如何访问和修改数据。在编写代码时，需根据具体情况选择合适的方式来处理this，以避免出现意外的错误。通过熟悉上述规则和场景，能更好地掌握...
Javascript 中 this指向
09-07
这时，this指向的是最后调用它的对象，在foo.fn()语句中，this指向的是foo对象。 例题 4： ``` const student = { name: 'zhangsan', fn: function () { return this; } } console.log(student.fn() === ...
JavaScript中的this（你不知道的JavaScript）
李刚的学习专栏
07-25 8152
JavaScript中的this，刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要，然而自己并不关心；随着自己对JavaScript一步步深入了解，突然恍然大悟，原来它真的很重要！所以，自己花费了大约2周的时间去查贴、翻阅之前读的书籍，将this的全貌展示如下。 一、this是什么--基于调用位置的上下文；调用位置不同，this值不同。 大家都JavaScript中this存
JavaScript中的this
weixin_33922672的博客
01-21 324
JS JavaScript中的this this是JavaScript语言中的一个关键字 它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。 function test() {  this.x = 1; } 复制代码那么，this的值是什么呢？ 函数在不同使用场合，this有不同的值。总之，this就是函数运行时所在的环境对象。 情况一：纯粹的函数调用 ...
javascript中的this问题
jackyxwr的专栏
03-31 411
在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境 。用另外一句更明了的话来说就是this指向调用该函数的对象。根据上面的这几句话，对this的调用说明如下。 具体的是可以看看http://www.cnblogs.com/wangfupeng1988/p/3988422.
JavaScript this
Reagan_的博客
07-31 402
this this 本身原本很简单，总是指向类的当前实例。 this的特点： 在 function 内部被创建 函数预编译过程中， this –> window（this指向window） 全局作用域里this –> window 指向调用时所在函数所绑定的对象 谁调用这个方法，this就指向谁。obj.func(); func()里面的this指向obj) this 不能...
JavaScript this
fuziwang的博客
12-06 2164
JS this简介及特点 JavaScript语言中的this 在 JavaScript 中，this 是动态绑定，或称为运行期绑定的。由于其运行期绑定的特性，JavaScript 中的 this 含义要丰富得多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式 this不进行作用域传递（函数嵌套时的this缺陷） 补充：调试小技巧 JS this四种应用场景 一般函数中的...
javascript中this指向详解
10-22
为了让读者更加深入地理解JavaScript中的this指向问题，本文将会详细分析this在不同场景下的行为，并通过实际代码示例来说明。 首先，JavaScript中的this不同于一些其他面向对象编程语言（如Java或C#）中的this。在...
JavaScript中this的指向问题
01-08
以下是关于JavaScript中`this`指向问题的详细解析： 1. **默认绑定** 当一个函数没有明确的归属对象（即没有使用`.`操作符或`call`、`apply`、`bind`方法调用）时，`this`通常会指向全局对象。在浏览器环境中，...
Javascript中的this
u011141492的博客
07-21 809
我们知道JavaScript执行上下文中有三个重要属性：VO/AO和scope chain，以及this指针。我们今天就来看下this指针。 首先看看下面两个对this的概括： this是执行上下文（Execution Context）的一个重要属性，是一个与执行上下文相关的特殊对象。因此，它可以叫作上下文对象（也就是用来指明执行上下文是在哪个上下文中被触发的对象）。  ...
5分钟彻底搞懂JavaScript中的this指向问题
科技男
06-10 478
在Javascript中，的指向灵活，使用场景多，面试中会被经常提及。由于指向的灵活性，会在开发过程中产生一些不容易发现的BUG。技术社区通常用一句话总结了的指向问题：谁调用它，就指向谁。也就是说，的指向是在调用时确定它究竟指向谁的。通过社区的技术文章，有人总结出几条规律：我们各点进行分析下：非严格模式下this指向 那么上面的代码输出则应该是在严格模式下函数体内的this指向 通过指明严格模式的情况下 执行则是下面看一道题目 fn 函数在foo对象中用来作为对象的方法,但是在赋值给之后，仍然在全局环境中
javascript 中的this
03-29 748
javascript 中的this javascript中的this 经常让人迷迷糊糊，让人难以理解，时常困惑this 到底指向谁呢？ 首先在window 下面，全局变量直接输出this ，这个是不需要疑问的,this指向window console.log(this);//window
javascript中this
Struggleing......
01-07 971
 下面都是个人理解以及查找的网上的资料,如有不对的地方请指正This this 始终指向调用它的对象 ,都没有对象调用时就指向window另外就是this一般都是在function中,当不在function中的时候  一定是指向window的.var a =a;alert(this.a); //出来的是aalert(this.b); //undefined
JavaScript中this讲解
weixin_44691513的博客
07-18 189
JavaScript中this讲解 在JavaScript中一般这样理解this：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。 1.普通函数调用 this 指向 window <Script> function person() { // 函数也是window对象下面的 this.name = "xl"; console.log(this);
Javascript 中的this介绍
leoleocs的专栏
09-28 612
在javascript中的构造函数创建对象时，常常使用this，但是this到底是什么，其实有一遍英文的文章 介绍的很详细： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 这里我把它翻译出来，自己也深刻的理解和体会一下。原文翻译如下：Javascript中this关键字的行为与其他
JavaScript中的this用法
jasonzds的博客
12-14 1662
1涵义 this总是返回一个对象，就是返回属性或者方法当前所在的对象 this.property 例如： var person ={     name: '张三',     describe: function () {         return '姓名：'+ this.name;     } }; person.describe()//张三 this.name表示d
this详解:JAVASCRIPT中的this到底是谁?
tenyit的专栏
12-13 522
了解javascript中this的详细用法,增加对javascript的对象及其他方法的理解.
JavaScript this指向问题解析与解决策略
"这篇Markdown文件主要讨论了JavaScript中this的指向问题，特别是涉及到函数、定时器以及事件处理函数中的上下文。作者分享了自己的学习心得，并给出了一段代码示例来说明常见问题及其解决方案。" 在JavaScript中，...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值