Javascript'THIS'值使用构造函数而不分配给变量[重复]答案

【问题标题】：Javascript 'THIS' value using constructor without assignment to a variable [duplicate]Javascript'THIS'值使用构造函数而不分配给变量[重复]
【发布时间】：2019-07-15 04:07:51
【问题描述】：

我目前正在尝试使用 Javascript 中的构造函数并编写了一些代码，但我自己不太理解

function someOtherFunction() {
    new Player(0, 0);
}

function Player(x, y){

    let self = this;

    this.x = x;
    this.y = y;

    window.addEventListener('click', function() {
        self.x++;
        self.y++;

        console.log('x:' + self.x + 'y: ' + self.y);
    });
}

someOtherFunction();

我创建了一个构造函数，它在使用 New 关键字时执行，然后设置 x 和 y 值并将事件侦听器绑定到窗口对象。

我对 new Player 的实际存储位置以及它如何引用 this.x 和 this.y 并增加其值感到困惑。

我没有将新玩家分配给变量来创建对象，所以我不确定 THIS 指向什么？

我没写：

let a = new Player(0, 0);

然后 this.x 将引用对象 'a', x 属性。那么当我没有将它分配给变量时 this.x 指的是哪里以及它如何保持递增？

我想也许我创建了一个闭包，但我在一个函数中创建了一个新的播放器实例，我假设 get 一旦调用和执行就被丢弃，那么它如何保持对对象 x 和 y 属性的引用而不分配给一些变量。

【问题讨论】：

“我假设它一旦被调用就会被丢弃” - 你的假设是不正确的。虽然您没有在构造函数之外存储对 Player 实例的显式引用，但事件侦听器保留了对 self 的引用，创建了一个闭包，导致实例保留在内存中。

标签： javascript constructor new-operator

【解决方案1】：

我没有将新玩家分配给变量来创建对象，所以我不确定 THIS 指向什么？

调用new Player会创建一个对象。

对该对象有两个引用。

this函数内
函数的返回值

你丢弃后者。

您将前者复制到一个名为 self 的变量中。

这由事件处理函数关闭。见How do JavaScript closures work?。

然后 this.x 将引用对象 'a', x 属性。那么当我没有将它分配给变量时 this.x 指的是哪里以及它如何保持递增？

您已将其分配给变量 — this — 只需使用 new 关键字。

我想也许我创建了一个闭包

是的

但是我在一个函数中创建了一个新的播放器实例，我假设一旦调用并执行它就会被丢弃

闭包的全部意义在于它使变量在关闭它的函数中保持活动状态。

【讨论】：

哦，谢谢。把事情弄清楚了。我对关闭有点困惑。干杯！

【解决方案2】：

在 JavaScript 中，所有不是原始类型（布尔、空、数字、字符串、未定义）的东西都是对象。所以你创建的函数是一个对象。

使用new 实例化对象的一个实例。每个实例都有一个自动的this 变量。

【讨论】：