zoukankan      html  css  js  c++  java
  • Javascript对象中关于setTimeout和setInterval的this介绍

    转:http://www.jb51.net/article/30858.htm

        在Javascript里,setTimeout和setInterval接收第一个参数是一个字符串或者一个函数,当在一个对象里面用setTimeout延时调用该对象的方法时 

    代码如下:

    1 function obj() { 
    2 this.fn = function() { 
    3 alert("ok"); 
    4 console.log(this); 
    5 setTimeout(this.fn, 1000);//直接使用this引用当前对象 
    6 } 
    7 } 
    8 var o = new obj(); 
    9 o.fn(); 

    然后我们发现上面的代码不是想要的结果,原因是setTimeout里面的this是指向window,所以要调用的函数变成 window.fn 为undefined,于是悲剧了。所以问题的关键在于得到当前对象的引用,于是有以下三种方法 

    代码如下:
     1 // 方法一: 
     2 
     3 function obj() { 
     4 this.fn = function() { 
     5 alert("ok"); 
     6 console.log(this); 
     7 setTimeout(this.fn.bind(this), 1000);//通过Function.prototype.bind 绑定当前对象 
     8 } 
     9 } 
    10 var o = new obj(); 
    11 o.fn(); 

    这样可以得到正确的结果,可惜Function.prototype.bind方法是ES5新增的标准,测试了IE系列发现IE6-8都不支持,只有IE9+可以使用。要想兼容就得简单的模拟下bind,看下面的代码 

    代码如下:

     1 // 方法二: 
     2 function obj() { 
     3 this.fn = function() { 
     4 alert("ok"); 
     5 setTimeout((function(a,b){ 
     6 return function(){ 
     7 b.call(a); 
     8 } 
     9 })(this,this.fn), 1000);//模拟Function.prototype.bind 
    10 } 
    11 } 
    12 var o = new obj(); 
    13 o.fn(); 


    首先通过一个自执行匿名函数传当前对象和对象方法进去,也就是里面的参数a和b,再返回一个闭包,通过call方法使this指向正确。下面是比较简洁的方法 

    代码如下:

     1 // 方法三: 
     2 function obj() { 
     3 this.fn = function() { 
     4 var that = this;//保存当前对象this 
     5 alert("ok"); 
     6 setTimeout(function(){ 
     7 that.fn(); 
     8 }, 1000);//通过闭包得到当前作用域,好访问保存好的对象that 
     9 } 
    10 } 
    11 var o = new obj(); 
    12 o.fn(); 

    上面第三个方法的两个关键点是 保存当前对象this为别名that 和 通过闭包得到当前作用域,以访问保存好的对象that;当对象方法里面多层嵌套函数或者setTimeout,setInterval等方法丢失this(也就是this不指向当前对象而是window),所以在this指向正确的作用域保存var that = this就变得很实用了

  • 相关阅读:
    pytorch 文本输入处理
    理解 on-policy 和 off-policy
    Monte Carlo与TD算法
    Monte Calro Tree Search (MCTS)
    强化学习概览
    linux 服务器 keras 深度学习环境搭建
    sed和awk学习整理
    linux shell编程进阶学习(转)
    gdb调试:
    MySQL C API 访问 MySQL 示例
  • 原文地址:https://www.cnblogs.com/ldjhust/p/3780101.html
Copyright © 2011-2022 走看看