由setTimeout()里的this引出的this
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的更多相关文章
- setTimeout里的函数是何时进入任务队列里的
先看一段代码 setTimeout(function () { console.log('abc') }, 1000) for (var i = 0; i <= 800000000; i++) ...
- setTimeout 里 传递字符串代码报错
js高程 第三版 p203 重点:超时调用的代码都是在全局作用域中执行的,因此函数中this 的值在非严格模 式下指向window 对象,在严格模式下是undefined. 不过这里仅仅解释前半句: ...
- Lind.DDD.Utils.HttpHelper里静态对象引出的Http超时问题
回到目录 Lind.DDD.Utils.HttpHelper组件主要实现了对HTTP的各种操作,如Get,Post,Put和Delete,它属于最纯粹的操作,大叔把它封装的目的主要为了实现与API安全 ...
- setTimeout里无法调用鼠标事件的event
问题的由来是下面这段代码: middleOnmouseLeave: function (event) { setTimeout(function () { event.currentTarget.st ...
- setTimeout那些事儿
一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们 ...
- setTimeout和setInterval的注意事项
精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...
- javascript线程解释(setTimeout,setInterval你不知道的事)
john resig写的一篇文章: 原文地址:http://ejohn.org/blog/how-javascript-timers-work/ 作为入门者来说,了解JavaScript中timer的 ...
- 从setTimeout看js函数执行
老实说,写这篇文章的时候心里是有点压抑的,因为受到打击了,为什么?就 因为喜欢折腾不小心看到了这个"简单"的函数: for (var i = 0; i < 5; ...
- 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 这道题涉及了异步.作用域.闭包 ...
随机推荐
- BZOJ1677: [Usaco2005 Jan]Sumsets 求和
1677: [Usaco2005 Jan]Sumsets 求和 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 570 Solved: 310[Submi ...
- JVM探索(一)
JVM测试的样例代码: import java.lang.management.ManagementFactory; /** * @author zhailzh * * @Date 2015年 ...
- Visual studio 能否定位打开文件在项目中的位置
文件位置:http://zhidao.baidu.com/link?url=FmwuCXTR2ptnRfqr7xGGPrnoXaONDAWgvO6iP4Dn736DwL7hEZCwQqanJbE0di ...
- has-a关系——多重私有继承
#ifndef _STUDENT_H_ #define _STUDENT_H_ #include <iostream> #include <string> #include & ...
- Java学习日记-2.2 增强后的switch-case
switch-case语句的基本格式 switch(expression){ case condition1: ... break; case condition2: ... break; case ...
- Spring JDBC 随笔
Spring 框架,借助 JdbcTemplate 类来简化 java 访问 database. 完成一个增查改删(CRUD)的基本功能,借助下面 5 个角色来共同来完成. 1. object cla ...
- Hbase 设计与开发实战
Hbase 概述 大数据及 NoSQL 的前世今生 传统的关系型数据库处理方式是基于全面的 ACID 保证,遵循 SQL92 的标准表设计模式(范式)和数据类型,基于 SQL 语言的 DML 数据交互 ...
- Python自动化之Django的CSRF
什么CSRF? CSRF, Cross Site Request Forgery, 跨站点伪造请求.举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果 某个用户已经登录到你的网站上了,那么当这个 ...
- html5中input新增type值的使用
二狗在最近的项目以html5和webapp为主,并接触到了input新增type值的使用,下面就把这些玩意一一以实例列举出来 一:type = date:定义日期:年-月-日 input type=& ...
- 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 ...