TypeScript:get / set,引用自身和基础值

时间:2018-02-08 15:41:41

标签: javascript typescript getter-setter

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 _prop定义,它无处可见(除了返回值并设置它)!我错过了一招吗?还是隐含地定义了?

1 个答案:

答案 0 :(得分:3)

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

使用get定义的getter定义了如何检索属性值,并在需要属性值时调用(例如:console.log(obj.prop);将调用getter)。

使用set定义的setter定义了如何在对象上保存属性值,并在分配属性值时调用(例如:this.prop = "Test"

您可以阅读有关此here

的更多信息

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

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

第二个示例定义了一个私有字段,但没有对其进行初始化。由于没有初始化,因此无需发出任何代码来定义_prop字段,它将在首次在javascript中分配时创建。如果您已初始化该字段,它将显示在构造函数中:

export class MyClass {
    private _prop = "";
}

会生成:

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