Javascript TypeScript:get/set，引用自身和底层值

TypeScript中这个特定的getter/setter是如何工作的：

export class MyClass {

  get prop() {
    return this.prop;
  }

  set prop(val: string) {
    this.prop = val;
  }

}

getter和setter都引用了

this.prop

，但它们都定义了

this.prop

。那么它所指向的实际潜在价值是什么呢

在翻译后的代码段中，生成的ES2015代码段为：

var MyClass = /** @class */ (function () {
    function MyClass() {
    }
    Object.defineProperty(MyClass.prototype, "prop", {
        get: function () {
            return this.prop;
        },
        set: function (val) {
            this.prop = val;
        },
        enumerable: true,
        configurable: true
    });
    return MyClass;
}());

如果我将getter/setter更改为引用局部变量，如下所示：

export class MyClass {

  private _prop;

  get prop() {
    return this._prop;
  }

  set prop(val: string) {
    this._prop = val;
  }

}

它产生了以下结果：

Object.defineProperty(exports, "__esModule", { value: true });
var MyClass = /** @class */ (function () {
    function MyClass() {
    }
    Object.defineProperty(MyClass.prototype, "prop", {
        get: function () {
            return this._prop;
        },
        set: function (val) {
            this._prop = val;
        },
        enumerable: true,
        configurable: true
    });
    return MyClass;
}());

---

希望看到在某个地方定义的

var\u prop

，却看不到它（除了返回值并设置它）！我错过了一个把戏吗？还是隐式定义的？

这是ES2015/Typescript中的属性访问器语法

用

get

定义的getter定义了如何检索属性值，并将在需要属性值时调用（例如：

console.log（obj.prop）；

将调用getter）

用

set

定义的setter定义了如何在对象上保存属性值，并将在指定属性值时调用（例如：

this.prop=“Test”

）

你可以阅读更多关于这方面的内容

继续来看您的示例，第一个是逻辑错误，将导致堆栈溢出异常，因为在getter内部，您使用相同的属性，因此再次调用getter，对于setter也是如此。这在语法上是有效的，但不起作用：

export class MyClass {      
    method(){
        this.method();
    }
}

第二个示例定义了一个私有字段，但没有对其进行初始化。由于没有初始化，因此不需要发出任何代码来定义

\u prop

字段，它将在首次在javascript中分配时创建。如果您已初始化该字段，则该字段将显示在构造函数中：

export class MyClass {
    private _prop = "";
}

将产生：

var MyClass = /** @class */ (function () {
    function MyClass() {
        this._prop = "";
    }
}

---

这是ES2015/Typescript中的属性访问器语法

用

get

定义的getter定义了如何检索属性值，并将在需要属性值时调用（例如：

console.log（obj.prop）；

将调用getter）

用

set

定义的setter定义了如何在对象上保存属性值，并将在指定属性值时调用（例如：

this.prop=“Test”

）

你可以阅读更多关于这方面的内容

继续来看您的示例，第一个是逻辑错误，将导致堆栈溢出异常，因为在getter内部，您使用相同的属性，因此再次调用getter，对于setter也是如此。这在语法上是有效的，但不起作用：

export class MyClass {      
    method(){
        this.method();
    }
}

第二个示例定义了一个私有字段，但没有对其进行初始化。由于没有初始化，因此不需要发出任何代码来定义

\u prop

字段，它将在首次在javascript中分配时创建。如果您已初始化该字段，则该字段将显示在构造函数中：

export class MyClass {
    private _prop = "";
}

将产生：

var MyClass = /** @class */ (function () {
    function MyClass() {
        this._prop = "";
    }
}

---

“期望在某处看到_prop”-它就在生成的getter/setter中。这只是普通的老式getter/setter，从ES5开始提供。这里没什么特别的。

this.\u prop

在同一个地方

this.prop

在第一个生成的代码中。。。另外，您的第一个示例会在尝试获取或设置

prop

时导致堆栈溢出。不确定您是否知道。我将更新我的问题，我的意思是在某处定义（如

var\u prop

）您不需要在javascript中定义对象属性“期望在某处看到\u prop”-它就在生成的getter/setter中。这只是普通的老式getter/setter，从ES5开始提供。这里没什么特别的。

this.\u prop

在同一个地方

this.prop

在第一个生成的代码中。。。另外，您的第一个示例会在尝试获取或设置

prop

时导致堆栈溢出。不确定您是否知道。我将更新我的问题，我的意思是在某个地方定义（如

var\u prop

），您不需要在javascript中定义对象属性