以setTimeout为例，如何用bind和箭头函数改变this指向

最新推荐文章于 2024-04-23 20:50:49 发布
最新推荐文章于 2024-04-23 20:50:49 发布
阅读量1.4k 收藏 3
点赞数 2
分类专栏： 问题 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38368658/article/details/109388351
版权

首先先明白一个定义：this是指对当前对象的引用

案例

对于如下结构
在这里插入图片描述

<body>
        <h1>Hello ECMAS cript</h1>
        <button id="btn">点我</button>
        <script src="static/2-1.js"></script>
    </body>

代码1

let oBtn = document.querySelector('#btn');
oBtn.
最低0.47元/天 解锁文章
Elylicery
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中箭头函数和this
mengsandy的专栏
09-10 2900
1、箭头函数理解 箭头函数内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42 上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执
利用箭头函数解决vue使用setTimeout的this问题和使用小技巧
进步的记录
07-20 3029
注：箭头函数本身没有执行作用域，是继承其父的执行上下文，所以箭头函数的this指向绑定其父的作用域 1、在vue里面使用setTimeout发现this失效 原因是setTimeout的this指向的windows 解决：setTimeout的第一个参数的function用箭头函数来代替，原因文章开头已解释了箭头函数的作用 2、vue的方法想要同时传入事件对象和自定义参数 解决方法： 1、方法名（$event，定义参数）$event为自定义参数 2、使用箭头函数(val)=>{方
setTimeout回调函数 this指向问题
最新发布
weixin_63681863的博客
04-23 270
内部的回调函数中，确保。
闭包/this/箭头函数/setTimeout 总结
ljs_coding
08-06 597
1 前言 这四点是在面试中经常会被问到的，这两天终于查了书也看了几篇博客，在此做整理。 这也提醒我们看书过后不代表掌握，任何学习过程都要经历懂-会-对-悟四个阶段，准备面试过程其实也是对知识点的梳理过程。 以下内容，欢迎指正。 2 闭包 参考 红宝书与 https://juejin.im/entry/57d60f7067f3560057e37e25 闭包是指有权访问另一个函数作用域中的变量的函数。...
ts学习笔记：箭头函数
小吴同学的博客
09-26 2541
//箭头函数 //es5 setTimeout(function(){ console.log(‘time’, 1); },1000); //箭头函数里面的this指向上下文 //ts 箭头：=> setTimeout(()=>{ console.log(‘箭头函数’, ‘这就是箭头函数，省略了函数名，多加了箭头’)； },1000); ...
setTimeout怎么用【详细讲解】
z2000ky的博客
08-14 1508
不保证在指定的毫秒数之后立即执行，它只是将函数放入异步任务队列中，并在队列中的等待时间过后执行。如果队列中有其他任务需要执行，那么可能会稍微延迟执行。是 JavaScript 提供的一个函数，用于在指定的时间延迟后执行一段代码（函数）。将会在 2000 毫秒（2秒）后被打印出来。
箭头函数和普通函数的区别
weixin_42317878的博客
05-19 264
一，箭头函数基本用法： 箭头函数 伪代码 类似 函数表达式， 大多数用于 声明一些回调函数，简单 明了 const fn = (name)=>{ // do some other things return `hello ${name}` } 伪代码 等同于 const fn = function(name){ // do some other things return `hello ${name}` } 关于箭头函数的参数， 1....
JavaScript高级-this绑定规则+箭头函数
10-21
这意味着箭头函数不能用作构造函数，也不能使用`call()`、`apply()`或`bind()`方法来改变`this`的指向。 例如： ```javascript let obj = { name: "Bob", foo: function() { setTimeout(() => { console.log...
vue 解决setTimeOut和setInterval函数无效报错的问题
11-19
// 使用箭头函数，this将正确指向Vue实例 }, 1000); } } ``` 这样，`this`将正确地引用Vue实例，使得`time`方法能够被调用而不会出现错误。 此外，关于Vue和Element UI的使用，当在`el-form`中使用`el-input`...
详解JavaScript的this指向和绑定
10-14
箭头函数是个例外，它们没有自己的`this`，而是继承自父作用域的`this`。 4. **显式绑定**： 通过`call`、`apply`或`bind`方法可以显式地改变`this`的指向。这些方法允许你指定`this`的值，并控制函数调用的方式...
关于JavaScript中的this指向问题总结篇
12-09
在使用new关键字创建实例时，构造函数内部的this指向新创建的对象。例如： ```javascript function Person(name) { this.name = name; } const person = new Person('Tom'); console.log(person.name); // Tom ``` ...
js进阶day4-195：bind使用案例（包括disabled、setTimeout）
weixin_52005267的博客
06-01 85
2、普通函数：谁调用，this指向谁，延时函数setTimeout是属于window对象的方法，过了多久后，window调用函数（延时函数中第一个参数），故延时函数第一个参数若为普通函数，里面的this指向window。改进：function函数内部this默认是window，现在已经改变了指向，而bind并未在函数中，它的this和this.disabled=true的this是同一个，都是btn。
从settTimeout到匿名函数、箭头函数之() =＞ {}
hongdunyang的博客
12-14 1536
1、使用到了setTimeout函数，困惑：为什么使用() => {}。 setTimeout(() => { if (XXX) { this.save(); } this.index = null;}, 10); 2、查看setTimeout()的定义： declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[])
ES6中箭头函数的使用
东子的博客 细节决定成败，点滴铸就辉煌。
10-10 2199
基本用法ES6允许使用“箭头”（=>）定义函数。 var f = v => v; 上面的箭头函数等同于： var f = function(v) { return v; }; 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 var f = () => 5; // 等同于 var f = function () { return 5 };
es6 的箭头函数 =>
热门推荐
现在学习也不晚
11-29 1万+
1  基本用法ES6 允许使用 “ 箭头 ” （=&gt;）定义函数。var f = v =&gt; v; //上面的箭头函数等同于： var f = function(v) { return v; }; //如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 var f = () =&gt; 5; // 等同于 var f = function () { return 5 }...
箭头函数与setTimeout（）
done1898的博客
10-19 1164
1.JavaScript高级程序设计》第二版中，写到：“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined”。 2.我们说，setTimeout中有两个this。第一，调用环境下的this，称之为第一个this；第二，把延迟执行函数中的this称之为第二个this；第一个this的指向是需要根据上下文来确定...
setTimeout中this指向全局windows
github_25505453的博客
03-02 1121
遇到一道题目foo = function(){ this.myName = "Foo function."; } foo.prototype.sayHello = function(){ alert(this.myName); } foo.prototype.bar = function(){ setTimeout(this.sayHello, 1000); } var f
箭头函数 bind方法this指向误区
qq_45305088的博客
01-18 450
let obj = {}; obj.test1 = ()=>{return this};//obj={test1:()=>{return this}} 两种写法一模一样 obj.test2 = function(){ return this; } obj.test3 = function(){return}.bind(this) obj.test1();//window obj.test2();//obj obj.test3();//window 看一些教程说"."方法 this指向的就是
vue中函数this指向问题
06-03
在 Vue 中，函数中的 this 关键字默认指向当前组件实例。但是，当函数被作为回调函数传递时...为了解决这个问题，我们使用箭头函数或者 bind 方法来绑定 this 的值，确保 showMessage 方法中的 this 指向当前组件实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值