一文搞懂JS系列（十一）之this的三种特殊指向-一一网

写在最前面：这是我写的一个关于JS的系列，一篇文章也不会光光只讲一个知识点，主要希望你不要觉得突然讲那么多东西，看的会很烦躁，因为我一般会将有关联的知识点串联起来，所以，学起来会让你感觉知识很连贯，我也想通过这个系列一边记录自己的学习，一边分享自己的学习，互勉！如果可以的话，也请给我点个赞，你的点赞也能让我更加努力地更新！

概览

食用时间： 7分钟
难度：简单，别跑，看完再走
食用价值：彻底搞懂 this 指向的问题。
铺垫知识

一文搞懂JS系列（十）之彻底搞懂this指向，理解this的设计初衷以及this指向的基本规则。

前言

有三种情况下的 this 指向，是不需要动脑筋的，因为一看就是指向 window ，那么，分别是以下三种情况

立即执行函数（ IIFE ）
setTimeout 中传入的函数
setInterval 中传入的函数

在这之前，我们先来看一个例子，为下面的例子进行铺垫

var name = 'windowName'

var dog = {
  name: 'wangcai',
  // 声明位置
  hello: function() {
    console.log(this.name)
  },
}

dog.hello() // wangcai
复制代码

经过上一节的学习，这道题是真的很简单，答案就是 wangcai 。

如果没学过的，可以先移步一文搞懂JS系列（十）之彻底搞懂this指向进行学习，先对 this 指向有个大概的了解和认知。

接下来，我们来逐个讲解 this 的三种特殊指向。

立即执行函数（ `IIFE` ）

所谓立即执行函数，就是定义后立刻调用的匿名函数，为了证实这一个观点，我们来改写下上面的代码

var name = 'windowName'

var dog = {
  name: 'wangcai',
  // 声明位置
  hello: function() {
    (function () {
      console.log(this.name)
    }())
  },
}

dog.hello() // windowName
复制代码

可以看到，我们将 hello 方法重写了，在内部采用了立即执行函数的方式来 console.log(this.name) ，结果输出的是 this.name 。

回想下上一节的内容，我们说过：

当调用方法没有明确对象时，this 就指向全局对象。在浏览器中，指向 window；在 Node 中，指向 Global。（严格模式下，指向 undefined）

立即执行函数，就是所谓的定义后立刻调用的匿名函数，它并没有明确指定调用对象，所以，就指向了 window ，也就是最后输出的 windowName 。以后看到 立即执行函数，我们就要首先想到指向全局对象。

`setTimeout` 以及 `setInterval` 中传入的函数

setTimeout 也同样有着指向 window 的黑魔法，我们来具体看一下这个例子：

var name = 'windowName'

var dog = {
  name: 'wangcai',
  // 声明位置
  hello: function() {
    setTimeout(function () {
      console.log(this.name);
    },100)
  },
}

dog.hello() // windowName
复制代码

可以看到，同样地，输出的也是 windowName 。

再回顾一下我们上一节中的内容，this 永远指向最后调用它的那个对象。

我们都知道， setTimeout 是属于 window 的方法，从 MDN 中的描述大家就可以看出来了。

所以，在 setTimeout 中传入的函数，最后的调用对象始终是 window

也就是说，上面的代码可以这么来理解

var name = 'windowName'

var dog = {
  name: 'wangcai',
  // 声明位置
  hello: function() {
    window.setTimeout(function () {
      console.log(this.name);
    },100)
  },
}

dog.hello() // windowName
复制代码

首先执行 dog.hello() 那么此刻，调用对象是 dog ，接着进入 dog.hello() 方法，执行了 window.setTimeout ，也就是说最后，执行 console.log(this.name) 的时候， this 指向已经是 window 了。也就是最后输出 windowName 。

当然， setInterval 也是同理。