使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题。

直接上例子:

 1 var name = 'my name is window';
2 var obj = {
3 name: 'my name is obj',
4 fn: function () {
5 var timer = null;
6 clearInterval(timer);
7 timer = setInterval(function () {
8 console.log(this.name);  //my name is window
9 }, 1000)
10 }
11 }

在这里,从this.name可以看出this的指向是window。

如果没有特殊指向,setInterval和setTimeout的回调函数中this的指向都是window。这是因为JS的定时器方法是定义在window下的。但是平时很多场景下,都需要修改this的指向。这里总结了几种:

1、最常用的方法:在外部函数中将this存为一个变量,回调函数中使用该变量,而不是直接使用this。

 1 var name = 'my name is window';
2 var obj = {
3 name: 'my name is obj',
4 fn: function () {
5 var that = this;
6 var timer = null;
7 clearInterval(timer);
8 timer = setInterval(function () {
9 console.log(that.name); //my name is obj
10 }, 1000)
11 }
12 }

在fn中加了var that = this; 回调函数中使用that代替this即可。这种方法最常见,使用也最广泛。

2、使用bind()方法(bind()为ES5的标准,低版本IE下有兼容问题,可以引入es5-shim.js解决)

bind()的作用类似call和apply,都是修改this指向。但是call和apply是修改this指向后函数会立即执行,而bind则是返回一个新的函数,它会创建一个与原来函数主体相同的新函数,新函数中的this指向传入的对象。

 1 var name = 'my name is window';
2 var obj = {
3 name: 'my name is obj',
4 fn: function () {
5 var timer = null;
6 clearInterval(timer);
7 timer = setInterval(function () {
8 console.log(this.name); //my name is obj
9 }.bind(this), 1000)
10 }
11 }

在这里为什么不能用call和apply,是因为call和apply不是返回函数,而是立即执行函数,那么,就失去了定时器的作用。

3、使用es6的箭头函数:箭头函数的最大作用就是this指向。

 1 var name = 'my name is window';
2 var obj = {
3 name: 'my name is obj',
4 fn: function () {
5 var timer = null;
6 clearInterval(timer);
7 timer = setInterval(() => {
8 console.log(this.name); //my name is obj
9 }, 1000)
10 }
11 }

箭头函数没有自己的this,它的this继承自外部函数的作用域。所以,在该例中,定时器回调函数中的this,是继承了fn的this。当然箭头函数也有兼容问题,要是兼容低版本ie,需要使用babel编译,并且引入es5-shim.js才可以。

转载自https://www.cnblogs.com/443855539-wind/p/6480673.html

Javascript回调函数中的this指向问题的更多相关文章

  1. JS回调函数中的this指向(详细)

    首先先说下正常的this指向问题 什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 1. obj.fun()     fun中的this->obj,自动指向.前的对 ...

  2. JavaScript 回调函数中的 return false 问题

    今天一个同事问了我一个问题,就是在 Ajax 方法中,请求成功后(success)的回调函数中根据响应的值来判断程序是否继续执行,他不解的是在回调函数中已经 return false 了,但是 Aja ...

  3. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  4. 理解 JS 回调函数中的 this

    任何变量或对象都有其赖以生存的上下文.如果简单地将对象理解为一段代码,那么对象处在不同的上下文,这段代码也会执行出不同的结果. 例如,我们定义一个函数 getUrl 和一个对象 pseudoWindo ...

  5. 理解javascript 回调函数

    ##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不 ...

  6. javascript回调函数,闭包作用域,call,apply函数解决this的作用域问题

    在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...

  7. 使用匿名函数在回调函数中正确访问JS循环变量

    有时候, 需要以不同的参数调用某个URL,并且在回调函数中仍然可以访问正在使用的参数, 这时候, 需要使用闭包保存当前参数, 否则, 当回调函数执行时, 之前的参数很可能早已被修改为最后一个参数了. ...

  8. 【JavaScript】JavaScript回调函数

    什么是Javascript 回调函数? 函数和其他数据一样可以被赋值,删除,拷贝等,所以也可以把函数作为参数传入到另一个函数中. 这个函数就是所谓的回调函数   举例: //不带参数的case fun ...

  9. javascript回调函数笔记

    来源于:https://github.com/useaname/blog-study 在Javascript中,函数是第一类对象.意味函数可以像对象一样按照第一类被管理使用.回调函数是从一个叫函数式编 ...

随机推荐

  1. 《linux 必读》

    1. linux 内核设计与实现 2. 深入理解 linux 内核

  2. selenium环境配置

    在命令提示符中查找 pip的位置 where pip 输入pip,出现一下信息显示,如果提示['pip' 不是内部或外部命令,也不是可运行的程序 或批处理文件.]请查看你的系统Path 上查看你的配置 ...

  3. kvm和qemu交互处理io流程

    1.IO虚拟化的分类 (1)全虚拟化:宿主机截获客户机对I/O设备的访问请求,然后通过软件模拟真实的硬件.这种方式对客户机而言非常透明,无需考虑底层硬件的情况,不需要修改操作系统. QEMU模拟I/O ...

  4. 使用MSBuild Tools调用csproj项目文件发布网站时$(SolutionDir)宏参数值丢失为空的解决方案

    使用Visual Studio打开解决方案,对<网站项目>右键点击<发布>,一切都是正常的,所有宏都可用,宏参数值也是正确的. 而通过批处理脚本命令调用MSBuild.exe对 ...

  5. 第02节:JMS基本概念和模型

    1.JMS是什么 JMS Java Message Service,Java消息服务,是Java EE中的一个技术. 2.JMS规范 JMS定义了Java中访问消息中间件的接口,并没有机遇实现,实现J ...

  6. Linux中LAMP构架的实现

    LAMP:Linux+Apache+Mysql+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,但是因为常被放在一起使用,拥有了越来越高的兼容度共同组 ...

  7. 基于Java服务的前后端分离解决跨域问题

    导语:解决跨域问题,前后端都增加相应的允许跨域的代码段即可. 一.后端增加允许跨域的代码,可以在具体controler层加,最好是在filter中添加,这样添加一次就够了,不用在每个controler ...

  8. VS Code常用快捷键

    // 基础操作 Alt+ ↑                  向上移动行 Shift+Alt + ↓           向上复制行 Ctrl+Enter              在下面换行 (这 ...

  9. Celery完成定时任务

    1.什么是Celery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 celery支持linux,如果windows使用celery ...

  10. flutter插件汇总2

    作者:知乎用户链接:https://www.zhihu.com/question/307594373/answer/568969429来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...