一、第一種解釋：

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中的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的四種綁定機制和作用域。

二、第二種解釋：

是因為settimeout在全局環境window中執行嗎？

對，是因為這個，簡單了說，函數中的this指向的是運行時的上下文，因此是window；而箭頭函數會幫你把this綁定到聲明時的上下文，因此還是Object

測試

在.vue文件中，setTimeout的this指向如下：

<template><div id="app"><router-view></router-view><main-tab-bar></main-tab-bar><div>---------------</div><button @click="click">按鈕</button></div> </template><script>import MainTabBar from "./components/MainTabBar";export default {name: 'App',components: {MainTabBar},methods: {click() {// console.log(this);//vue實例// setTimeout(() => {// console.log(this);//vue實例// }, 1000);// setTimeout(function() {// console.log(this);//window// }, 2000);// console.log(window);//window對象// window.setTimeout(function() {// console.log(this);//window對象// }, 3000);// const callback1 = function() {// console.log(this);//window// };// setTimeout(callback1, 0);const callback2 = () => {console.log(this);//};setTimeout(callback2, 0);//vue實例}}} </script><style>/*在style標簽里引用文件需要在import前面加個@*/@import "./assets/css/base.css";</style>

三、補充部分

關注公眾號：【深漂程序員小莊】：
內含豐富的學習資源和面試經驗（不限前端、java），還有學習交流群可加，并且還有各大廠大佬可一起交流學習，一起進步～添加小莊微信，回復【加群】，可加入互聯網技術交流群：

總結

以上是生活随笔為你收集整理的setTimeout函数this的指向的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。