JavaScript 'this' 详解：一劳永逸地掌握它！

嗨 👋🏾

今天我想在帖子中问大家一个问题。

你们当中有多少人真正理解JavaScriptthis中的关键字？🤔

我本人已经进行过几次JavaScript 面试，有时我会用这个问题来开启面试，而我得到的答案通常是这样的：

• 它指向Object（什么物体？）
• 它指向function（哪个函数？）
• 它指向自身（意识？）。

尽管目前有一种趋势认为使用thisJavaScript 是一种不好的做法，并建议避免使用它。

这或许没错，但了解某件事的运作方式总是好的，无论我们是否决定使用它！

那我们今天就开始吧！🙌🏾

让我们来看看thisJavaScript 中的关键字究竟是如何工作的。

实际答案

嗯，大多数情况下，我们对这个问题的回答都是错误的，因为this关键词的作用方式会根据this关键词的使用地点而有所不同。

这就是理解它的关键。把它分解成各种场景，然后逐个场景地分析。

在函数内部

在作用域内的任何函数内部global，this关键字指向非严格模式global下的对象，而自身处于严格模式。undefined

作为对象上的方法

当作为对象的方法调用时，例如person.getName()，this关键字指的是调用该方法的对象。

使用 call 调用时

当使用 call 调用函数时，例如getName.call(animal)，this关键字指的是传递给 call 函数的对象。

当使用new关键字调用时

new在这种情况下，当我们通过在函数前面加上关键字来调用函数来创建一个新对象时，就像这样：

let bruno = new Dog();

然后，在Dog函数内部，所有this关键字都将指向新分配并返回的对象。

为了方便视觉学习者理解，这里以图文并茂的形式给出同样的解释：

就是这样。这些案例涵盖了超过95%的情况。

现在你知道如何回答这个棘手的问题了。

下次见，干杯！🙌🏾

PS：
如果您喜欢上面的插图，您或许也会喜欢我最近发布的🎊免费🎊电子书，其中涵盖了其他几个JavaScript概念。点击下方图片即可获取：