'get' 打字稿中的关键字

Question

private mouseHover:MouseEventHandler<HTMLElement> = new MouseEventHandler<HTMLElement>();
public get onMouseHover():  MouseEventHandler<HTMLElement> { return this.mouseHover; }

上面的代码，'get'关键字我没看懂。谁能教我相关知识并举例说明？谢谢！

Answer 1

Could anyone teach me the relative knowledge and give me examples?

它允许你定义一个 getter : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

基本上，当某人访问函数 onMouseOver 调用属性例如console.log(onMouseOver)

Answer 2

class SomeObject {

    public getFoo () {
        return 'foo';
    }

    public get foo () {
        return 'foo';
    }
}

var obj = new SomeObject();

// True
obj.getFoo() === obj.foo;

// Does nothing
obj.foo = 'bar';

// Still true
obj.getFoo() === obj.foo;

// Does nothing
delete obj.foo;

// Still true
obj.getFoo() === obj.foo;

// Does nothing
SomeObject.prototype.foo = 'bar';

// Still true
obj.getFoo() === obj.foo;

// It's gone from all instances of SomeObject
delete SomeObject.prototype.foo;

// True
typeof obj.foo === 'undefined';

Answer 3

本质上，它允许您控制属性被获得

时发生的情况

在示例代码中，您要了解您有一个私有属性 mouseHover。这不能在它定义的 class 之外访问。作者想要使 mouseHover 属性可以在 class 之外访问——不允许它被覆盖——本质上是只读的。

所以作者在新的属性onMouseHover上使用'get'关键字暴露了私有mouseHover属性。使用 get 作者可以告诉 JavaScript 当属性被阅读时该做什么。如您所见，只是 returns 支持属性.

这被编译成以下内容JavaScript

Object.defineProperty(YourClass.prototype, "onMouseHover", {
    get: function () {
        return this.mouseHover;
    },
    enumerable: true,
    configurable: true
});

要更好地理解这一点，请查看 Object.defineProperty 的文档 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

'get' 打字稿中的关键字

'get' keyword in typescript

typescript