首页 > web前端 > js教程 > 在 JavaScript 中使用 setTimeout/setInterval 时,如何在原型方法中保留'this”上下文?

在 JavaScript 中使用 setTimeout/setInterval 时,如何在原型方法中保留'this”上下文?

Mary-Kate Olsen
发布: 2024-10-18 15:02:30
原创
621 人浏览过

How Can I Preserve \

Preserving "this" Context in Prototype Methods with setTimeout/setInterval

In Javascript, accessing "this" within a prototype method can become tricky when using setTimeouts or intervals. Unlike in Python, Javascript methods lose their context when passed externally. To overcome this challenge, we explore various solutions.

Anonymous Function Wrapper

The most straightforward approach is to wrap the method call in an anonymous function:

<code class="javascript">var that = this;
setInterval(function(){
    return that.baz();
}, 1000);</code>
登录后复制

This ensures that the method call and access to "this" occur simultaneously, preserving the correct context.

Fat Arrow Function Wrapper (ES6)

For implementations supporting fat arrow functions:

<code class="javascript">setInterval( () =&gt; this.baz(), 1000 );</code>
登录后复制

This concise syntax preserves the context from the surrounding function.

Function Binding

Finally, consider using a binding function like Function.prototype.bind:

<code class="javascript">setInterval( this.baz.bind(this), 1000 );</code>
登录后复制

Alternatively, libraries like Dojo provide methods like "hitch" for context binding.

以上是在 JavaScript 中使用 setTimeout/setInterval 时,如何在原型方法中保留'this”上下文?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板