setTimeout函数this的指向
一、第一种解释：
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>
