example 1:

window.id='windowid';
function M(){
this.id='Mid';
this.f1=function(){console.log(this.id);};
this.f2=function(){
setTimeout(this.f1,5000);
};
}
var m=new M();
m.f2(); //'windowid'

example 2:

window.id='windowid';
function M(){
this.id='Mid';
this.f1=function(){console.log(this.id);};
this.f2=function(){
setTimeout(function(){this.f1();},5000);
};
}
var m=new M();
m.f2(); //Error: undefined is not a function

example 3:

 window.id='windowid';
function M(){
this.id='Mid';
this.f1=function(){console.log(this.id);};
this.f2=function(){
var that=this;
setTimeout(that.f1,5000);
};
}
var m=new M();
m.f2(); //'windowid'

example 4:

 window.id='windowid';
function M(){
this.id='Mid';
this.f1=function(){console.log(this.id);};
this.f2=function(){
var that=this;
setTimeout(function(){that.f1();},5000);
};
}
var m=new M();
m.f2(); //'Mid'

setTimeout(fun,time)中的fun是在全局对象:`window`下执行的。example3和example4的区别在于:

example3相当于在全局下执行:

(function(){console.log(this.id);})(); //this-->global object:window

example4相当于在全局下执行:

(function(){that.f1();})();   //this in side of that.f1--> m.prototype

补充:

this指谁由调用函数的方式决定,如下所示。

function foo() {
console.log(this);
}
//作为普通的函数调用
foo(); // this -->全局对象:`window` //作为一个对象的方法属性调用
var obj = {bar: foo};
obj.bar(); // this --> `obj` // 作为构造函数调用
new foo(); // this --> `foo.prototype`

手动指定this的方式

1.  fun.call(thisobj,param1,param2,...);

2.  fun.apply(thisobj,[arguments]);

3. fun.bind(thisobj,param1,param2,...)----return a fun;

example:

this.x='windowX';
var obj={
x:'ojbX',
f1:function(a){console.log(this.x+a);}
}
var fun=obj.f1;
fun(1);
fun.call(this,1);
fun.apply(this,[1]);
fun.bind(this,1)();
fun.call(obj,1);
fun.apply(obj,[1]);
fun.bind(obj,1)(); //windowX1
//windowX1
//windowX1
//windowX1
//ojbX1
//ojbX1
//ojbX1

利用bind修改上例中的setTimeout:

 window.id='windowid';
function M(){
this.id='Mid';
this.f1=function(){console.log(this.id);};
this.f2=function(){
setTimeout(this.f1.bind(this),5000);
};
}
var m=new M();
m.f2(); //'Mid'

再来看看setTimeout里function的参数问题:

var i=9;
setTimeout(function(i){console.log(i);},1000) ;
//输出结果是????

for(var i=0;i<10;i++){
setTimeout(function(){console.log(i);},1000) ;
}
//输出结果是????,输出结果的间隔是??? for(var i=0;i<10;i++){
setTimeout(function(i){console.log(i);},1000) ;
}
// ?????? for(var i=0;i<10;i++){
( function(i){ setTimeout(function(){console.log(i);},1000) }) (i);
}

由setTimeout()里的this引出的this的更多相关文章

  1. setTimeout里的函数是何时进入任务队列里的

    先看一段代码 setTimeout(function () { console.log('abc') }, 1000) for (var i = 0; i <= 800000000; i++) ...

  2. setTimeout 里 传递字符串代码报错

    js高程 第三版 p203 重点:超时调用的代码都是在全局作用域中执行的,因此函数中this 的值在非严格模 式下指向window 对象,在严格模式下是undefined. 不过这里仅仅解释前半句: ...

  3. Lind.DDD.Utils.HttpHelper里静态对象引出的Http超时问题

    回到目录 Lind.DDD.Utils.HttpHelper组件主要实现了对HTTP的各种操作,如Get,Post,Put和Delete,它属于最纯粹的操作,大叔把它封装的目的主要为了实现与API安全 ...

  4. setTimeout里无法调用鼠标事件的event

    问题的由来是下面这段代码: middleOnmouseLeave: function (event) { setTimeout(function () { event.currentTarget.st ...

  5. setTimeout那些事儿

    一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们 ...

  6. setTimeout和setInterval的注意事项

    精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...

  7. javascript线程解释(setTimeout,setInterval你不知道的事)

    john resig写的一篇文章: 原文地址:http://ejohn.org/blog/how-javascript-timers-work/ 作为入门者来说,了解JavaScript中timer的 ...

  8. 从setTimeout看js函数执行

    老实说,写这篇文章的时候心里是有点压抑的,因为受到打击了,为什么?就 因为喜欢折腾不小心看到了这个"简单"的函数:        for (var i = 0; i < 5; ...

  9. for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}

    for(var i=0;i<=3;i++){ setTimeout(function() {  console.log(i)  }, 10);} 答案:打印4次4 这道题涉及了异步.作用域.闭包 ...

随机推荐

  1. BZOJ1677: [Usaco2005 Jan]Sumsets 求和

    1677: [Usaco2005 Jan]Sumsets 求和 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 570  Solved: 310[Submi ...

  2. JVM探索(一)

    JVM测试的样例代码: import java.lang.management.ManagementFactory; /**  * @author zhailzh  *   * @Date 2015年 ...

  3. Visual studio 能否定位打开文件在项目中的位置

    文件位置:http://zhidao.baidu.com/link?url=FmwuCXTR2ptnRfqr7xGGPrnoXaONDAWgvO6iP4Dn736DwL7hEZCwQqanJbE0di ...

  4. has-a关系——多重私有继承

    #ifndef _STUDENT_H_ #define _STUDENT_H_ #include <iostream> #include <string> #include & ...

  5. Java学习日记-2.2 增强后的switch-case

    switch-case语句的基本格式 switch(expression){ case condition1: ... break; case condition2: ... break; case ...

  6. Spring JDBC 随笔

    Spring 框架,借助 JdbcTemplate 类来简化 java 访问 database. 完成一个增查改删(CRUD)的基本功能,借助下面 5 个角色来共同来完成. 1. object cla ...

  7. Hbase 设计与开发实战

    Hbase 概述 大数据及 NoSQL 的前世今生 传统的关系型数据库处理方式是基于全面的 ACID 保证,遵循 SQL92 的标准表设计模式(范式)和数据类型,基于 SQL 语言的 DML 数据交互 ...

  8. Python自动化之Django的CSRF

    什么CSRF? CSRF, Cross Site Request Forgery, 跨站点伪造请求.举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果 某个用户已经登录到你的网站上了,那么当这个 ...

  9. html5中input新增type值的使用

    二狗在最近的项目以html5和webapp为主,并接触到了input新增type值的使用,下面就把这些玩意一一以实例列举出来 一:type = date:定义日期:年-月-日 input type=& ...

  10. Disposable microfluidic devices: fabrication, function, and application Gina S. Fiorini and Daniel T

    Disposable microfluidic devices: fabrication, function, and application Gina S. Fiorini and Daniel T ...