Typescript 中的 `this` 和 `static` 有什么不同？

Question

我是 Typescript 的新手。我想了解它。在官方文档中，静态描述：

Static Properties

Up to this point, we’ve only talked about the instance members of the class, those that show up on the object when it’s instantiated. We can also create static members of a class, those that are visible on the class itself rather than on the instances. In this example, we use static on the origin, as it’s a general value for all grids. Each instance accesses this value through prepending the name of the class. Similarly to prepending this. in front of instance accesses, here we prepend Grid. in front of static accesses.

所以代码是：

class Grid {
    static origin = {x: 0, y: 0};
        calculateDistanceFromOrigin(point: {x: number; y: number;}) {
            let xDist = (point.x - Grid.origin.x);
            let yDist = (point.y - Grid.origin.y);
            return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
        }
    constructor (public scale: number) { }
}

let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

我把static origin = {x: 0, y: 0};改成origin = {x: 0, y: 0};后，

let xDist = (point.x - this.origin.x);
let yDist = (point.y - this.origin.y);

输出相同。那么，有什么不同呢？感谢您的帮助。

Answer 1

如果 origin 不是静态的，调用 Grid.origin 应该会崩溃。我说 "should" 就像 "in any real OOP language" 一样。问题是 typescript 只是一个被转译为 js 的中介，它不是 OOP，并且不知道 "static" 关键字。

它的正确用法是在这种情况下使用 static 声明。请注意，尽管它似乎在运行时有效，但您的 IDE 仍应通知您该问题，因为 IDE 知道静态的含义。

Answer 2

您使用它的方式没有区别，因为您没有更改 origin 值。静态属性或方法主要用在class.

之外

此外，不必创建 class 即可使用静态 properties/methods。因此，在下面的示例中，您可以获得这样的 origin 值。

class Grid {
    static origin = {x: 0, y: 0};
}

console.log(Grid.origin); // {x: 0, y: 0}

如果 origin 值不是 static，您将创建一个 new Grid() 对象来获取该值。

class Grid {
    origin = {x: 0, y: 0};
}

const grid = new Grid();
console.log(grid.origin); // {x: 0, y: 0}

否则你会得到：Error TS2339: Property 'origin' does not exist on type 'typeof Grid'.

需要注意的一件事是静态属性在所有 Grid 对象中都是相同的。它是 class 级别属性而不是对象级别属性。

class Grid {
    static origin = {x: 0, y: 0};

    constructor() {
        console.log(Grid.origin);
    }
}

console.log(new Grid()) // {x: 0, y: 0}
console.log(new Grid()) // {x: 0, y: 0}

// Change the static value
Grid.origin = {x: 5, y: 6}

console.log(new Grid()) // {x: 5, y: 6}
console.log(new Grid()) // {x: 5, y: 6}

如果您希望您创建的每个对象的 origin 都不同，那么请不要将其设为静态。

您通常不会将 class 静态与正常 properties/methods 混用。我过去可能做过。在下面的示例中，我们将所有内容设为静态，因为我们只希望应用程序中有一个 ScoreTracker 实例。

class ScoreTracker {

    private static _score: number = 0;

    public static setScore(value: number): void {
        ScoreTracker._score = value;
    }

    public static getScore(): number {
        return ScoreTracker._score;
    }

    public static addPoints(value: number): void {
        ScoreTracker._score += value;
    }

    public static removePoints(value: number): void {
        ScoreTracker._score -= value;
    }

}

然后在我们的应用程序中，我们可以执行以下操作，我们确信我们的分数是在一个地方管理的。

ScoreTracker.setScore(10);
ScoreTracker.addPoints(1);
ScoreTracker.removePoints(2);
console.log( ScoreTracker.getScore() ); // 9

希望这对您有所帮助。

Typescript 中的 `this` 和 `static` 有什么不同？

What is different between `this` and `static` in Typescript?

typescript

typescript2.0