箭头函数-this指向

最新推荐文章于 2024-06-10 23:37:57 发布
最新推荐文章于 2024-06-10 23:37:57 发布
阅读量778 收藏
点赞数
分类专栏： es6 文章标签： 箭头函数 this指向
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42198227/article/details/80437132
版权

今天看视频看到了一个知识点,觉得有用就记录下来,方便日后翻查.

就是this指向问题.举个例子:

上面图片中的,methods部分中lang()函数里,  定时器内部的 this 原本指向 VM实例的,但实际上却不是,

这时候,将定时器参数里的function,换成箭头函数,既

这时候,this指向的就是我们想要的vm实例了, 这就是箭头函数的this指向.

以上截图,知识点来自传智播客vue教程

艾米～艾米
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ES6】JavaScript函数-箭头函数-this指向-简写
YK菌的博客
01-21 423
文章目录1. 定义箭头函数2. 箭头函数注意点3. 箭头函数简写4. 箭头函数应用 ES6 允许使用“箭头”（=>）定义函数 1. 定义箭头函数 原本的定义方式 var fn = function(a, b) { return a + b; }; 箭头函数d 写法 let fn = (a, b) => { return a + b; }; 2. 箭头函数注意点 this是静态的，this始终指向函数声明时所在作用域下的this的值 function getName(){ con
ES6-箭头函数this指向
qq_43781887的博客
07-28 359
因为箭头函数是没有this指向的，所以在click事件里面的回调函数就没有this，它会去上一层init里面去找，init也是一个箭头函数也没有this指向又到Page，然后找定义Page对象的作用域链就是window。因为箭头函数是没有this指向的，所以在click事件里面的回调函数就没有this，它会去上一层init里面去找，init也是一个箭头函数也没有this指向又到Page，然后找定义Page对象的作用域链就是window。...
ES6 箭头函数及this指向
半夏_2021的博客
04-20 1674
ES6 中箭头函数及this指向
箭头函数 this
AgonyQAQ的博客
06-10 357
箭头函数中，是没有this的，所以写在箭头函数中的this，会自动向当前作用域的上一层作用域寻找，是否含有this，如果有就指代，没有就继续找上一层。所以setTimeout函数中的this指代的就是Vue实例对象vm。setTimeout箭头函数中没有this可以指代的对象。上一层作用域是Vue实例对象vm的监视属性watch。所以watch中的this指代的是Vue实例对象vm。JS的window对象调用setTimeout函数。setTimeout函数，是箭头函数。
ES6中箭头函数的this指向
weixin_43739375的博客
03-16 2771
一直以来对于ES6中箭头函数有些疑虑，其中一项就是this的指向问题，所以不敢放手去使用。因为跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的，但是在箭头函数中this到底指向谁，这块儿模模糊糊的。所以为了搞清楚这个问题，就特意查阅了相关的资料，现总结下来。 在JavaScript语言里面，this的用途很广泛。在这里，对this的含义以及原理就不做解释和说明，因为本文的目的是阐明箭头函...
箭头函数与this指向详解
web$-小白
07-16 3351
箭头函数以及箭头函数中this的指向问题
箭头函数的this指向
angry_rooster的博客
06-04 7457
箭头函数的this指向 箭头函数 箭头函数为以下形式的函数 const func = (paramList) => { // 函数体 } 按照习惯，将箭头函数作为单独一个函数来使用的情况并不多，往往是当要传入的参数是函数时才使用箭头函数 // 比如 elem.addEventListener("click", () => { // 函数体 }) this在函数中的指向 我们常用函数关键字function来声明一个函数，在一个function()中，this总是指向调用这个函数
箭头函数及其this指向
weixin_42178670的博客
04-10 6153
箭头函数 1、只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号 2、返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return 3、箭头函数在返回对象的时候必须在对象外面加上小括号 箭头函数的this指向和普通函数的区别 1、普通函数this指向： 指向它的调用者，如果没有调用者则默认指向window 2、箭头函数指向： 指向箭头函数定义的时候所处的对象，而不是其所使用的时候所处的对象，默认指向父级的this 综上：
箭头函数的this指向问题
专注
12-29 443
箭头函数内部的this是继承自定义时所在对象，而不是执行时所在的对象。这意味着箭头函数没有自己的this，而是使用外层代码块的this。因此，箭头函数不能用作方法或构造函数，也不能访问arguments和super。例如，下面的代码中，obj的show方法是一个箭头函数，它的this是继承自全局对象window，而不是obj本身。所以，this.x的值是undefined，而不是100。如果想让箭头函数的this指向obj，可以使用普通的函数表达式，或者使用bind方法显式绑定this。
箭头函数 改变this指向
珎珎啊
04-09 4481
1.箭头函数 <div>我是div</div> <script> const oDiv = document.querySelector('div'); // 普通函数 oDiv.addEventListener('click' , function(){ cons...
JavaScript高级-this绑定规则+箭头函数
10-21
在这个例子中，即使`setTimeout`是异步的，箭头函数内的`this`仍然指向`obj`，而不是全局对象。 总结来说，理解JavaScript中的`this`绑定规则对于编写复杂的JavaScript代码至关重要。正确地处理`this`可以帮助我们...
关于ES6箭头函数中的this问题
11-26
同样，如果箭头函数在构造函数内部，其`this`会指向构造函数的实例，就像下面的例子所示： ```javascript var a = 11; function test1() { this.a = 22; let b = function() { console.log(this.a); }; b(); }...
JavaScript箭头函数中的this详解
10-16
在非箭头函数中，`this`的值取决于函数的调用方式：全局上下文中`this`指向全局对象（浏览器环境下为`window`），作为对象方法调用时`this`指向调用该方法的对象，而在函数内部（非方法）`this`则可能根据严格模式和...
ES6对象方法声明对象时，箭头函数this的指向问题
01-08
没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' ...
04-箭头函数.rar
11-06
这意味着，箭头函数不会像常规函数那样在调用时重新绑定this，这对于在事件处理或回调函数中使用this非常有利，避免了在闭包中的this指向问题。 3. **返回值**：如果函数体只有一条语句且该语句可以返回一个值，...
kechengsheji2021.zip
07-30
kechengsheji2021.zip
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
最新发布
07-30
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
TwineCompile571GetItSetup.7z
07-30
JomiTech TwineCompile 是一款集成在 C++Builder IDE 中的插件，旨在通过多种技术显著减少 C++ 编译、构建和生成的时间。以下是 TwineCompile 的一些关键能力和特点： 集成编译优化：TwineCompile 通过多线程、文件缓存和自动后台编译等技术，直接集成到 C++Builder IDE 中，优化编译过程。 编译器封装：它不是 C++ 编译器，而是将 Embarcadero 经典和 CLANG 编译器封装在一个构建系统中，优化文件和项目的构建方式。 IDE 支持：TwineCompile 通过 GetIt 包管理器提供，支持安装它的 IDE。对于旧版 IDE 或没有活跃更新订阅的 IDE，可以购买许可证以获得支持。 版本兼容性：TwineCompile 5.x 支持 C++Builder 10.2 至 C++Builder 12.0，而 TwineCompile 4.x 支持 C++Builder 5 至 C++Builder 10.1。
箭头函数改变this指向
09-15
箭头函数确实改变了this的指向。在普通函数中，this的值是在函数被调用时动态确定的，它指向调用该函数的对象。而在箭头函数中，this的值是在函数定义时确定的，它指向箭头函数所处的上下文。 具体来说，在箭头函数中，this指向的是定义箭头函数的词法作用域中的this值，而不是调用箭头函数时的对象。这意味着箭头函数没有自己的this绑定，并且无法使用call()、apply()和bind()等方法来改变this的值。 这种特性使得箭头函数特别适用于回调函数或需要保留外部this值的情况。同时，箭头函数也可以避免一些常见的this指向问题，比如在嵌套函数中使用this时导致this指向错误的情况。 需要注意的是，由于箭头函数没有自己的this绑定，所以在箭头函数内部使用this时，它会继续向上查找外部作用域中的this值，直到找到为止。如果没有找到符合条件的this值，则会返回undefined。 总之，箭头函数通过改变this的指向，解决了一些传统函数中的this指向问题，并且更加简洁和易于使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值