JavaScript——浅谈“this”

this指向谁？（基本指向原则）

• 真传一句话，假传万卷书。我们先说结论，在标准函数中this是把函数当成方法调用的上下文对象。（注意这里是标准函数中，与之对应的是箭头函数，下面会讲到）
• 概而言之，即为，谁调用函数，this就指向谁
• 当调用方法没有明确对象的时候，this指向全局对象window（严格模式下是undefined）

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};
firstName = "spicyLemon"
user.sayHi();

结果是什么？
显而易见是Hello，John。
因为这里是user调用的sayHi函数，所以this指向的自然就是user。这和我上面说的结论是一致的。

总结：this的指向是在调用时决定的，和书写的位置没有关系，这一点和闭包还有箭头函数刚刚好时相反的。（大多数情况下）

小测验

这里是一个小测验，如果你真正理解了上面的内容，那么应该不难。

var me = {
 name: 'xiuyan',
 hello: function() {
 console.log(`你好，我是${this.name}`)
 }
}
var you = {
 name: 'xiaoming',
 hello: function() {
 var targetFunc = me.hello
 targetFunc()
 }
}
var name = 'BigBear'
you.hello()

先思考一下再看答案。
如果你对了，那么恭喜你已经掌握this的基本指向规则了（也许）。如果你错了，那么请再仔细揣摩上面的内容。
答案是：BigBear

特殊情况下的this指向

setTimeout

这是第一例的变体

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};
firstName = "spicyLemon"
setTimeout(user.sayHi, 1000);

看完了么，来吧，说输出。
Hello，spicyLemon
这个时候肯定有人有疑惑了。
啊，博主你刚刚不是说谁调用的函数this就归谁么，这里确实是user来调用的啊。

• 确实这里写的是user.sayHi，我们的this此时应该指向user才对。
• 但是当将对象方法作为回调进行传递，例如传给setTimeout的时候，我们的this就不会像我们刚刚所想的那样指向user了

那是因为，这些回调都是在全局作用域下实现的。
无论是 setTimeout 还是 setInterval 里传入的函数，都会首先被交付到全局对象手上。
我们可以理解为，函数直接被整个交给了setTimeout，然后由setTimeout来调用
这时就不是user来调用了
因此，函数中 this 的值，会被自动指向 window。

setInterval

这里和setTimeout是一样的，我就不再多做赘述了。

立即执行函数（IIFE）

由于我们这一篇博客讲的是this指向，我就不再IIFE上多做赘述，这里直接上代码。
不了解的同学可以查看一下资料再回来看代码，我的IIFE是在红宝书（第四版）的314页看的，有书的同学可以直接翻看。

var name = 'spicyLemon'
var me = {
 name: 'xiuyan',
 
 sayHello: function() {
 console.log(`你好，我是${this.name}`)
 },
 hello: function() {
 (function(cb) {
 
 cb()
 })(this.sayHello)
 }
}
me.hello()

来吧，展示你们的输出相信经过这几分钟的锤炼你已经很难再错了。
答案是：你好，我是spicyLemon

特殊情况的总结

不管怎么样，这三个所谓的特殊情况里的this判断，还是离不开我开头说的this指向原则
多数情况下（99%）这三种情况的this都指向window

箭头函数

真传一句话，假传万卷书。我们直接说结论：箭头函数它没有自己的this，它的this是别人的，是定义它的对象的this。（这里不太严谨，但是比较好理解）
看代码

var name = 'BigBear'
var me = {
 name: 'xiuyan',
 
 hello: () => {
 console.log(this.name)
 }
}
me.hello()

答案是spicyLemon
箭头函数比较特殊，这里我来一步一步引导大家

• 箭头函数它没有自己的this，它的this是别人的，是定义它的对象的this。这是我给的结论。
• 那么我们把它放在这个代码中来看，定义它的对象是user，user的this就是window了。

于是答案就解释的通了

箭头函数中的 this 比较特别，它和严格模式、非严格模式啥的都没关系。它和闭包很相似，都是 认“死理”——
认“词法作用域”的家伙。所以说箭头函数中的 this，和你如何调用它无关，由你书写它的位置决定（和咱们普通函数的 this规则恰恰相反～）

箭头函数正是由于没有自己的this所以它可以在那些没有自己的“上下文”，但在当前上下文中起作用的短代码的使用场景中大放异彩。

如有错误，请在评论区指正，看到后会修改。不明白的可以私信问我（虽然我也不是特别明白哈哈哈）