Javascript readonly和get-in-TypeScript属性之间有什么区别？

在TypeScript中将属性声明为

readonly

与通过

get（）

创建属性之间是否存在功能上的差异？两者的行为相同，但最好知道除了首选项之外，是否有理由使用一个而不是另一个。

这对生成的JavaScript有影响：getter将是一个访问器属性（例如，函数），

readonly

属性将是一个数据属性。这：

class Example {
    get foo(): string {
        return "foo";
    }
    readonly bar: string = "bar";
}

如果您的目标是ES2015+，则转换为：

"use strict";
class Example {
    constructor() {
        this.bar = "bar";
    }
    get foo() {
        return "foo";
    }
}

或者，如果您的目标是ES5+：

"use strict";
var Example = /** @class */ (function () {
    function Example() {
        this.bar = "bar";
    }
    Object.defineProperty(Example.prototype, "foo", {
        get: function () {
            return "foo";
        },
        enumerable: true,
        configurable: true
    });
    return Example;
}());

---

请注意，尽管TypeScript认为

bar

是只读的，但在运行时没有任何东西强制执行这一点<另一方面，code>foo，即使在运行时也是只读的。（尽管如果您真的愿意，您可以使用

Object.defineProperty

通过重新配置属性来击败它。）

每次访问属性时都会重新计算getter，并创建一个新值。这是一个重要的功能差异，因为这种行为通常不是您想要的：

class Example {
    get foo(): object {
        return {};
    }
    readonly bar: object = {};
}
const example: Example = new Example;
console.log(example.foo === example.foo); // false
console.log(example.bar === example.bar); // true

---

有关实现的详细信息，请参阅@T.J.Crowder的优秀答案，我在这里不再重复。

尝试使用选项输出ES5，但仍然不同。有趣。我在写问题的时候自己做了一些额外的挖掘，发现了这个。我仍然感到惊讶的是，这个问题没有在这里，所以我想提供给每个人。如果在几个小时内没有人回答，我会提供这个答案。谢谢我会看看其他人还有什么要说的。按照你写答案的方式，是的，每次都会创建一个新的值。但是，如果保持相同的值很重要，无论是由于昂贵的调用还是维护引用，那么还有其他方法可以避免这种情况。但在大多数情况下，这是一个非常重要的区别。