Question

我有一个如下所示的对象。

在第6行上，我写了console.log(this.title, elem)。

现在，根据我对 this。 -关键字的了解，this.title不应在此处引用当前对象，而应引用全局Window-Object。现在，与我的知识相反，this.title似乎正确地引用了视频对象的属性。

const video = {
    title: "a",
    tags: ["a", "b", "c", "d"],
    showTags() {
        this.tags.forEach(elem => {
            console.log(this.title + ": ", elem)
        });
    }
}
video.showTags();

这是浏览器显示的内容：

a:  a
a:  b
a:  c

我认为，由于console.log(this.title, elem)位于callBack-Function内部，因此将对全局窗口对象进行引用。 This post证实了我的观点，即this.title实际上应该引用全局对象。

有人可以解释吗？

Answer 1

箭头函数用词法绑定它们的上下文，因此实际上是指原始上下文。由于您在此处使用Arrow函数，因此forEach（）方法中this的值指向声明它的词法环境。这是在showTags()方法内部，因此它的值this与showTags()相同。

如果此处未使用箭头功能，则this的值将是window，如下所示：

const video = {
    title: "a",
    tags: ["a", "b", "c", "d"],
    showTags() {
        this.tags.forEach(function(elem ) {
            console.log(this.title, elem)
        });
    }
}
video.showTags();

这个。引用对象而不是窗口对象

1 个答案: