0%

从setTimeout()函数开始谈起

最近在阮一峰老师的网站学习es6,在promise小节下面看到下面的代码,作为小白的我看到这个代码的第一反应是setTimeout怎么有三个参数,上网一查才知道,setTimeout可以跟多个参数,第三个及之后的参数都是第一个参数(函数)的参数

下面是一个Promise对象的简单例子。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)

第一个参数

1
2
3
4
5
setTimeout(console.log(this),3000);//console.log(this)会立即执行

setTimeout('console.log(this)',3000);//console.log(this)加引号之后3s之后执行

setTimeout(function(){console.log(this)},3000);//console.log(this)3s之后执行
1
2
3
4
5
6
{
function test(){
console.log(this);
}
setTimeout(test,3000);//console.log(this)3s之后执行
}
1
2
3
4
5
6
{
function test(){
console.log(this);
}
setTimeout(test(),3000);//console.log(this)立即执行
}
1
2
3
4
5
6
{
function test(){
console.log(this);
}
setTimeout('test()',3000);//console.log(this)3s之后执行
}

总结:setTimeout里面的函数有三种正确写法

  1. 用引号引起来,
  2. 放到匿名函数里,
  3. 使用函数名直接调用,不加括号。

第一个参数this的作用域

参考:http://www.cnblogs.com/hutaoer/p/3423782.html

第一段代码:

1
2
3
4
5
6
7
8
9
10
var test = "in the window";

setTimeout(function() {alert('outer ' + test)}, 0); // 输出 outer in the window ,默认在window的全局作用域下

function f() {
var test = 'in the f!'; // 局部变量,window作用域不可访问
setTimeout('alert("inner " + test)', 0); // 输出 inner in the window, 虽然在f方法的中调用,但执行代码(字符串形式的代码)默认在window全局作用域下,test也指向全局的test
}

f();

第二段代码:

1
2
3
4
5
6
7
8
9
10
var test = "in the window";

setTimeout(function() {alert('outer' + test)}, 0); // outer in the window ,没有问题,在全局下调用,访问全局中的test

function f() {
var test = 'in the f!';
setTimeout(function(){alert('inner '+ test)}, 0); // inner in the f! 有问题,不是说好了执行函数中的this指向的是window吗?那test也应该对应window下的值才对,怎么test的值却是 f()中的值呢????
}

f();

第三段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var test = "in the window";

setTimeout(function() {
alert('outer ' + test)
}, 0); // in the window

function f() {
var test = 'in the f!';

function ff() {
alert('inner ' + test);// 能访问到f中的test局部变量
alert('inner ' + this.test);//window中的test
}

setTimeout(ff, 0); // inner in the f!
}

f();

总结:
三种写法中

  1. 引号引起来的函数中的this指向和变量作用域都是window,
  2. 匿名函数中的变量作用域是上下文,this指向是window,
  3. 以函数名直接调用中的变量作用域是上下文,this指向是window。 第2和第3其实是一种写法,不同形式。 其实匿名函数中this应该指向词法作用域,这是javascript的一个错误,在箭头函数中已经修复了这个错误。

箭头函数中的this作用域

参考:
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000

坚持原创技术分享,您的支持将鼓励我继续创作!

欢迎关注我的其它发布渠道