javascript - 为什么settimeout中的函数this指向window？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 为什么settimeout中的函数this指向window？

PHP中文网 2017-04-11 11:56:40

[JavaScript讨论组]

745

var obj = {
    name: 'name',
    foo: function () {
        console.log(this); // Object {name: "name"}
        setTimeout(function () {
            console.log(this);  // Window
        }, 1000);
    },
    foo2: function () {
        console.log(this); // Object {name: "name"}
        setTimeout(() => {
            console.log(this);  // Object {name: "name"}
        }, 2000);
    }
}

为什么settimeout中的函数this指向window？而箭头函数this指向Object

是因为settimeout是window对象的方法还是说当做直接调用一个函数？

PHP中文网

认证0级讲师

全部回复(4)

伊谢尔伦2017-04-11 11:58:40 4楼

这个就是关于this指向的问题了，setTimeout中的function你可以理解为callback,

function callback(){}  
setTimeout(callback,2000);

这样不知道你能否理解?
setTimout中的执行伪代码可以理解为：

function setTimeout(fn,delay) {
// 等待delay 毫秒
fn(); // <-- 调用位置！
}

可以看到，他是直接调用fn(),前面没有给任何对象绑定在一起，所以根据JavaScript的规则，它属于默认绑定，自然就是window了，不知道你能否理解？如果你想改变他得绑定对象，可以使用bind去绑定。
再说说箭头函数，在ES6中箭头函数的this是指向父级作用域的(不是很准确)，你的foo2中使用的箭头函数，因此默认会指向obj，
如果你将

var fooo = obj.foo2;
fooo()

这样this不会指向obj而是会指向window，
若

var b = {name:''};
b.foo = obj.foo2;
b.foo();

这样呢this会指向b，
建议去查看一下this的四种绑定机制和作用域

赞 +0

添加回复

大家讲道理2017-04-11 11:58:40 3楼

是因为settimeout在全局环境window中执行吗？

对，是因为这个，简单了说，函数中的this指向的是运行时的上下文，因此是window；而箭头函数会帮你把this绑定到声明时的上下文，因此还是Object

赞 +0

添加回复

天蓬老师2017-04-11 11:58:40 2楼

箭头函数有绑定this的作用
settimeout是异步的代码等到执行的时候不一定程序已经运行到哪了所以用this的时候就不是同一个环境了

赞 +0

添加回复

伊谢尔伦2017-04-11 11:58:40 1楼

楼上说的很好了，箭头函数类似于foo3

var obj = {
    name: 'name',
    foo: function () {
        console.log(this); // Object {name: "name"}
        setTimeout(function () {
            console.log(this);  // Window
        }, 1000);
    },
    foo2: function () {
        console.log(this); // Object {name: "name"}
        setTimeout(() => {
            console.log(this);  // Object {name: "name"}
        }, 2000);
    },
    foo3: function(){
        console.log(this);
        setTimeout(function(){console.log(this);}.bind(this), 2000)
    }
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>