'this' 在调用函数中，当它用于超类的子类中时

Question

当调用函数中的“this”这个词用在超类的子类中时，我很难理解这个词：

function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}

Rectangle.prototype.area = function() { return this.width * this.height; }

function PositionedRectangle(x, y, w, h) {
    Rectangle.call(this, w, h);
    this.x = x;
    this.y = y;
}

PositionedRectangle.prototype = new Rectangle();

delete PositionedRectangle.prototype.width;
delete PositionedRectangle.prototype.height;

PositionedRectangle.prototype.constructor = PositionedRectangle;

PositionedRectangle.prototype.contains = function(x, y) {
    return (x > this.x && x < this.x + this.width && 
            y > this.y && this.y + this.height);
}

var r = new PositionedRectangle(2, 2, 2, 2); 

document.write(r.contains(3, 3)); // 4
document.write("<br>" + r.area()); // 4

document.write("<br>" + r.x + ", " + r.y + ", " + r.width + ", " + r.height + "<br>"); // 2, 2, 2, 2

document.write(r instanceof PositionedRectangle && r instanceof Rectangle && r instanceof Object); // true

现在这部分我不明白：

Rectangle.call(this, w, h); 

在 PositionedRectangle 类中。 “这”代表什么？我可以用什么替换它以便代码可以正常工作？ 我首先认为“this”与 Rectangle 相同，我试图用名称 Rectangle 替换它，但它没有用。比我认为它是一个 PositionedRectangle 子类我试图用 PositionedRectangle 替换它。

我读到“this”的含义取决于它的调用方式，并且我知道调用函数中的第一个参数代表一个对象，但是当该对象的值为“this”时，我不明白它实际代表什么。

如你所见，我还是 JavaScript 新手。

感谢您的帮助。

Answer 1

call 是 javascript 函数，它调用或简单地运行具有给定上下文和参数的函数。

问：在 PositionedRectangle 类中。 “这”代表什么？

A:代表PositionedRectangle函数的构造函数。

问：我可以用什么替换它，这样代码才能正常工作？

答：您想要实现的目标相当令人困惑，因为在我看来这只是一些非结构化功能！

问：我一开始以为'this'和矩形一样...

答： javascript 中没有子类/超类，Rectangle.call(this, w, h); 行中的this 指的是 PositionedRectangle 的上下文，您可以阅读更多关于 context 和 this here.

问： ...但是当该对象的值是“this”时，我不明白它实际代表什么。

答：让我举个例子让你更容易理解。想象一下，我重复一遍想象一下你有两个函数a 和b。 a的上下文引用c，b的上下文引用d

function a(){
    this; //refers to c
}
function b(){
    this; //refers to d
}

现在，如果您在 a 函数中调用 b 并使用 a 的上下文如下：

function a(){
    b.call(this); //remember this refers to c in a function
}

您正在将b 的上下文从d 更改为c，所以如果您返回b 的上下文：

function b(){
    return this;
}

再回到整个画面，你会发现不同：

function a(){
    this; //refers to c
    this.bContext=b.call(this);
}
function b(){
    return this; //refers to d
}

b(); //returns d
a.bContext; //returns c

我知道一开始会有点混乱，但随着时间的推移你会明白的，所以不要太用力。