javascript中的this使用场景以及箭头函数中的this

最新推荐文章于 2024-11-07 13:38:59 发布
最新推荐文章于 2024-11-07 13:38:59 发布
阅读量97 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/657630
版权

this总是指向一个对象，有时指向全局对象，有时指向构造对象，有时指向DOM对象

1. 作为对象的方法调用

做为对象的方法调用时 this 指向对象本生

img_095f7d70e33c17d77618109aae91f0b3.png

2. 作为普通函数被调用

普通函数里的this总是指向全局变量

img_c9fd0cf854d2df08dc7f21e27dbbe2bb.png

对象的方法复制给变量，在通过变量来调用后对象的方法变成了普通函数

img_afaad9999c297a7d985f4dac13d4ddca.png

观看这个例子发现：

getName1 = Person.getName  是把getName1指向Person.getName方法的内存地址(方法本身没有被执行)，其本质是个函数，所以在使用getName1() 时就是调用普通函数

getName2 = Person.getName() 是把Person.getName的返回值(已经执行了)bingxl赋值给getName2

对两个变量经行typeof操作

img_404e7a75088cab84583b03923e4cebf0.png

3. DOM事件触发函数里的this

DOM事件触发函数里的this指向DOM节点本身

img_98c74bacaff7d51de5fc5a10d3999cb8.png

test() 是一个普通函数，所以test里的this指向了全局对象window

4. 构造器调用

使用new运算符调用构造函数时会返回一个对象，构造函数里的this一般就指向返回的对象

当构造函数使用return显式的返回一个对象时new操作符返回的就是显式返回的对象

img_99e6e854750048904a5726b0a92bc1ce.png

5. call ， apply 和 bind

通过call 或apply调用会改变this的指向传入的对象

img_a4d2d0284b12ab0e5916ece24b29adb1.png

6. 箭头函数中的this

箭头函数中的this就是定义时所在的this, 也就是说 箭头函数本身没有this。

箭头函数也可以使用bind, call , applay来改变this指向

img_c03f03c6c827770492df78b6f1cf0cbc.png

对比 arrow 和 sub 函数可以看出

JavaScript 箭头函数：适用与不适用场景
Tyloo_wdnmd的博客
02-19 460
JavaScript 箭头函数：适用与不适用场景 现代 JavaScript 中最引人注目的功能之一是引入了箭头函数，用 => 来标识。 这种函数有两大优点 – 非常简洁的语法，和更直观的作用域和 this的绑定。 这些优点有时导致箭头函数比其他形式的函数声明更受欢迎。 例如，受欢迎的 airbnb eslint 配置 会在您创建匿名函数时强制使用JavaScript箭头函数。 然而，就像工...
箭头函数的this指向问题及其具体使用场景
rainylululululu的博客
04-23 271
obj = { name:'lili', age:20, sayAge1:function(){ // obj调用sayAge1()，则this指向obj,this.name相当于obj.name console.log('my name is ' + this.name + ' my age is ' + this.age) }, sayAge2:() =&g...
关于箭头函数中的this
qq_42384225的博客
12-18 479
关于箭头函数中的this 箭头函数并不是通过使用function关键字来定义的，而是通过操作符=>定义的，他是根据外层（函数或者全局）作用域来决定this的。 样例 function foo(){ return (a)=>{ //this 继承自foo() console.log(this.a) } } var obj1={ a:2 }; var obj2=...
简单理解JavaScript中this指向以及箭头函数中的this
samfung09的博客
05-02 353
平时敲代码时经常会用到this关键字，但如果你不清楚了解当前this指向谁时经常会带来一些错误，下面简单理解下JavaScript中的this。 JavaScript中this指向与函数在哪声明或是在哪执行无关，主要看最终是谁调用，简单来说看函数执行时前面是否有点，有点则该函数内this指向点前面的对象，没点则指向全局对象( 浏览器端为window )。看代码 var obj1 = { ...
Js中的this指向问题（普通函数和箭头函数）
前端与计算机相关知识的分享，博主的qq523235674
01-21 3975
一：普通函数的this指向 *普通函数中this是动态的，当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般指向我们函数的调用者。（谁调用指向谁） 1.普通函数 //1.普通函数 function fn() { console.log('普通函数的this' + this); } fn();//window 实际上，这里是window.fn();谁调用，this就指向谁 这里的this指向全局对象window 2.对象的.
【JavaScript】普通函数与箭头函数中的 this 详解
lph159的博客
09-16 1271
this是 JavaScript 中的一个特殊关键字，通常用来引用函数执行时的上下文（context）。这个上下文指的是当前代码执行时，this所指向的对象。不同的执行环境和调用方式会导致this指向不同的对象，因此this具有动态绑定的特点。普通函数和箭头函数在 JavaScript 中的this处理方式有着显著差异。普通函数的this依赖于调用方式，并在不同上下文中表现出不同的绑定行为；而箭头函数则是根据定义时的词法作用域来绑定this。理解这些差异不仅可以帮助你避免常见的this。
深入理解Javascript箭头函数中的this
10-20
总的来说，箭头函数是JavaScript中解决`this`指向问题的一种强大工具，它使得代码更简洁，但也要求开发者更加注意`this`的使用场景。在编写JavaScript代码时，理解并正确使用箭头函数对于提高代码质量和可维护性至关...
JavaScript箭头函数中的this详解
10-16
这种特性使得箭头函数在某些场景下更易于理解和使用，但也需要注意它可能导致的`this`行为差异，尤其是在涉及到对象方法和事件处理程序等场景时。因此，理解箭头函数的`this`行为是掌握JavaScript高级特性的关键。
关于ES6箭头函数中的this问题
11-26
在JavaScript的ES6标准中，箭头函数引入了一个新的特性，即`this`的处理方式与传统的函数有所不同。本文将详细解析箭头函数中的`this`问题，帮助开发者更好地理解和运用这一新特性。 通常，`this`在JavaScript中的...
JavaScript基础之this和箭头函数详析
10-16
箭头函数的这个特性使得它们在某些场景下非常有用，比如作为事件处理函数或者回调函数，因为它们可以保持外部作用域的`this`引用。但是，这也意味着你不能像普通函数那样通过`call()`, `apply()`, 或 `bind()`来改变...
JavaScript中的this原理及6种常见使用场景详解
10-15
在实际编程中，使用箭头函数（`=>`）可以避免`this`的动态绑定，因为箭头函数的`this`继承自父作用域。此外，`bind()`方法也可以用来预先绑定`this`的值，确保函数在任何地方被调用时，`this`始终保持不变。
JavaScript 箭头函数究竟是什么？
人生代码 ---- 公众号
11-16 1290
JavaScript 箭头函数大致相当于 python 中的 lambda 函数 或 Ruby 中的 blocks。 这些是匿名函数，它们有自己的特殊语法，接受一定数量的参数，并在其封闭的作用域的上下文（即定义它们的函数或其他代码）中操作。 让我们依次分解这些部分。 箭头函数语法 箭头函数具有单一的总体结构，然后在特殊情况下可以通过多种方式简化它们。 核心结构如下所示： JavaScript 代码...
前端学习笔记（20）之JS中箭头函数的this指向问题
前端下午茶
08-19 453
先说一下普通函数的this指向，判断普通函数的this指向，不需要考虑函数的定义环境，只需要考虑函数的调用，谁调用的函数，谁就是该函数的this。 关于ES6中的箭头函数，官方的解释是： 箭头函数里面的 this 是 上下文(context), 外部作用域的 this 就是箭头函数内的 this。 判断箭头函数的this： 技巧：它的外层没有函数，this是window。 外层有函数，看外层函数的this是谁，它的this就是谁。 （外层函数可能是常规函数可能是箭头函数，判断外层的this要根据函数种类用不
箭头函数this指向以及改变this指向的方法
何淑女的博客
10-30 5893
箭头函数this指向以及改变this指向的方法 call apply bind 总结 相同点： 都可以改变函数内部的this指向 不同点 ： 1.call和apply会调用函数,并且改变函数内部this的指向 2.call和apply传递的参数不一样,call传递参数aru1,aru2…形式 , apply必须数组形式 3.bind 不会调用函数,可以改变函数内部this指向 主要应用场景 1.call经常做继承 2.apply经常跟数组有关系,比如借助于数学对象实现数组最大值最小值 3.bind不调用函数
上门理发系统的搭建
最新发布
app830的博客
11-07 304
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 570
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 196
vxe-grid新增空行，并且定位到空行位置。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
cx18333的博客
11-05 507
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
JavaScript高级this绑定详解及箭头函数应用
本文档主要探讨了JavaScript中关于"this"绑定规则以及箭头函数的相关知识点，帮助读者更好地理解和应用在编程实践中。首先，我们了解了JavaScript中的"this"绑定规则： 1. **默认绑定**：在非严格模式下，全局作用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值