Question

有人可以在Javascript中解释this关键字吗？最好用简单的英语而不引用在线资源或教科书。我很确定我已经读完了这些。我还没有完全掌握这个概念。

我理解this可以有几种不同的含义，具体取决于它的使用方式和时间。

例如，我读到它在某些情况下可以引用全局对象。你能解释一下this的含义会发生变化以及如何使用它的不同情况吗？

Answer 1

更好的方法是查看“如何在Javascript中调用函数？”

在内部有一个称为"[[Call]]"的函数原语，我们在Function.prototype.call(thisArg, arguments...)中有一个接口，这就是我在这里使用的内容。

每次在Javascript中调用函数时，您都会编写将转换为等效Function.call语句的语法，并为您传递thisArg。它完全取决于您调用函数的方式，而不取决于任何其他面向对象的概念。这是程序员在使用Javascript时基于类的对象语义在其他语言中工作的主要方式之一。

对于在全局上下文中调用的函数：

function foo(a) { console.log(a); return this; }
foo(5); // equivalent to foo.call(window, 5);
        // outputs 5, returns (Window)

对于一个名为的函数，就像一样，它被链接到一个对象（点语法）：

var o = { foo: function(a) { console.log(a); return this; } };
o.foo(5); // equivalent to o["foo"].call(o, 5)
          // outputs 5, returns (Object(o))

这就是它的全部内容。请注意，我们可以通过不同的方式访问相同的函数：

var x = o.foo;
x(5); // equivalent to x.call(window, 5);
      // outputs 5, returns (Window)

并且这个完全相同的函数不知道与我们创建它的o有任何关联。

用我认为这个主题可以得到的简单英语：

如果您在不添加点的情况下调用函数，this将为window（全局对象）。
如果前面有一个点，this将成为点前面的对象。

如果您不喜欢它的工作方式，您可以通过各种方式模拟不同的行为（例如Function.prototype.bind或将您自己的thisArg传递给call或{{1 }}）。

^{小字：在ECMAScript严格模式下，在上面的示例中传递了apply，它将通过window。通过“前面的点”，我只是说实话，undefined，与o["foo"](6)相同，与o.foo(6)做同样的事情。}

Answer 2

要理解this，你必须理解面向对象的编程。

在面向对象编程中，大多数方法（函数）属于objects。在Javascript中，大多数objects是窗口元素;一个按钮，一个列表，一个div。您可以将某个名称描述为名词的网页上的任何内容都可能是object，以某种方式;还有一些不是的东西，是objects的成员。

因此，在面向对象编程中，您遇到的问题是您可能有一个方法，比如onclick。在onclick里面你有一些代码可以执行;假设您正在将<div>的背景从蓝色更改为绿色，并在单击时将其更改回来。让我们用英语/伪代码构造它。

myDiv.onClick {
  if the div that was clicked on has a background of blue then set that div's background to green
  else if the div that was clicked on has a background of green then set it to blue
}

所以，非常简单，对吧？如果这不是面向对象的编程，那么你的函数将采用参数div_id。所以，

onClick(div_id theDiv) {
  if theDiv.background=blue then theDiv.background=green
  else if theDiv.background=green then theDiv.backgrond=blue
}

然而，这是面向对象的编程。 onClick是div的一个方法，面向对象编程的一部分优点是你不需要传递你所说的div这样的参数 - 你的意思就是那个被调用的参数，当然！每个div都有自己对onClick的引用，可能是它自己的副本，具体取决于你编写方法的方式。

但是，这确实存在问题。怎么说呢，

  if this Div's background is blue then set this div's background to green

？答案是this。 this指的是当前方法所属的对象。因此，当单击div时，会调用其onClick方法;你有：

div.onClick() {
  if this.background=blue then this.background=green
  else if this.background=green then this.background=blue
}

所以你只写了一个div.onClick函数，现在每个div都可以在闲暇时变成蓝色或绿色。

Javascript：THIS关键字的说明

2 个答案: