今天使用react做钟表，自然用到了setInterval，但是出现this指向不明的问题。

 <html>

 <head>

 <meta charset="UTF-8" />

 <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

 <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

 <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

 </head>

 <body>

 <div id="example"></div>

 <script type="text/babel">

 class Clock extends React.Component {

   constructor(props) {

     super(props);

     this.state = {date: new Date()};

   }

   componentDidMount() {

     this.timerID = setInterval(

       () => this.tick(),

       1000

     );

   }

   componentWillUnmount() {

     clearInterval(this.timerID);

   }

   tick() {

     this.setState({

       date: new Date()

     });

   }

   render() {

     return (

       <div>

         <h1>Hello, world!</h1>

         <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>

       </div>

     );

   }

 }

 ReactDOM.render(

   <Clock />,

   document.getElementById('example')

 );

 </script>

 </body>

 </html>

　　在componentDidMount中setInterval使用了ES6的箭头函数，有建议可以使用ES6以前的函数是这样

 let that = this;

 this.timerID = setInterval(function () {

   return that.tick();

 },1000);

　　这样使可以的，但是过于繁琐，观察了一下，setInterval第一个参数不就是传一个函数就行嘛，干嘛这么费劲，于是我这样写

 this.timerID = setInterval(

   this.tick,

 1000);

　　结果报错了

　　什么？找不到setState，那就是this不对啊，果然setInterval中第一个参数若果是一个裸函数的话，函数中this指向的是window。

　　于是改为

 this.timerID = setInterval(

   this.tick.bind(this),

 1000);

　　完美运行！

setInterval中this的更多相关文章

  1. 利用函数回调获取setInterval中返回的值

    我们都知道,定时器里面想返回值如果你用return根本没作用,那么怎么拿到定时器所返回的值呢, 现在只需要利用回调函数,给主函数传一个函数类型的参数callback,然后把想要返回的num再传给cal ...

  2. 关于setInterval和setTImeout中的this指向问题

    前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...

  3. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  4. JavaScript中setInterval关闭问题

    这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...

  5. 【原】理解javascript中的this

    最近的文章基本都是总结javascript基础内容的,因为我觉得这些东西很重要.而且很多时候你觉得你理解了,其实并没有你自认为的那么理解.十月份没怎么写文章,因为国庆出去玩的比较久,心变野了,现在是时 ...

  6. setTimeout和setInterval的各自使用场景

    默认的 setTimeout 只执行一次, 清除用clearTimeout setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval 但是, setTimeout也可 ...

  7. 修改setInterval作用域

    Hello,今天和大家分享如何修改setInterval作用域. 0.引子 最近在做一个项目的时候需要开发一个图片轮播显示的组件,在实现过程中遇到了关于setInterval作用域的问题. Slide ...

  8. JavaScript中的该如何[更好的]做动效

    在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者 ...

  9. node.js之setTimeout()、clearTimeout()与 setInterval()与clearInterval()

    1.setTimeout函数与clearTimeout函数 setTimeout(cb,ms,[arg],[...])延时一定时间执行回调函数该函数中cb参数为必填函数,为需要执行的回调函数ms为经过 ...

随机推荐

  1. Sql中获取表结构（字段名称，类型，长度，说明）

    Sql中获取表结构(字段名称,类型,长度,说明) SELECT TableName = OBJECT_NAME(c.object_id), ColumnsName = c.name, Descript ...

  2. 构建Dubbo-2.0.7源码

    一. 下载源码: git clone --branch dubbo-2.0.7 https://github.com/apache/incubator-dubbo.git 二. 下载依赖 git cl ...

  3. LocalDate

    java中做时间处理时一般会采用java.util.Date,但是相比于Date来说,还有更好的选择 -- java.time.LocalDate. 这是jdk8中新增的日期处理类,同时新增的还有ja ...

  4. mysql(七)

    多表查询: 显示内连接: select 字段列表 from 表名1  inner  join 表名1 on  条件 * inner 可忽略 select * from student inner  j ...

  5. ADB——查看手机设备信息

    查看设备信息 查看手机型号 adb shell getprop ro.product.model 查看电池状况 adb shell dumpsys battery ''' Current Batter ...

  6. 马永亮(马哥) linux视频2018年版

    视频试看地址: 百度云链接: https://pan.baidu.com/s/1q4DV62DiFbBT8t63CapLJA  提取码: h5e4 资料收集于网络,如有侵权,告知后删除

  7. java实验一总结

    实验一第一部分 在Linux中运行结果 通过cd和mkdir命令建立tree,带包编译并用 javac -d bin 的命令将编译文件保存在bin目录中 通过 java -cp 的命令运行带包的程序 ...

  8. 一位数组的最大子数组（debug版）

    package 数组; import java.util.Arrays; import java.util.Scanner; public class Sum { public static void ...

  9. iOS 开发笔记 - 导航到地图

    导航到地图,已经不是什么新鲜事了.网上有好多参考的资料,我总结出只需要两步 第一步:在info中加上支持的各平台 比如:iosamap高德地图.comgooglemaps谷歌地图.baidumap百度 ...

  10. 关于优先队列浅析(priority_queue)

    优先队列 greater与less,自定义还有结构体(可以设置2层优先级)  模板; 下面废话不多说直接上程序 注释的很明白 #include<iostream> #include< ...