使用defineProperty定义getter

Question

在我们的应用程序中，我们使用JavaScript压缩我们的UglifyJS类，它不支持在返回Unexpected token: operator (=)时压缩像onBlur = (event) => {}这样的语法。

为了解决这个问题，我们使用了以下函数来定义它们：

function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}

然后在构造函数中使用它，如下所示：

class OurClass {
    constructor(...args) {
        super(...args);
            _defineProperty(this, "onBlur", event => {
     
            });
    }
}

效果很好！但是，它不适用于定义getter：

static get values() {
    return { index: Number }
}

就像这样：

_defineProperty(this, 'values', () => {
    return { index: Number };
});

getter从未定义过，在类的其他部分中也是不可访问的，就像我们能够定义其他方法一样.

如何使用defineProperty使用相同的函数定义getter？

Answer 1

Object.defineProperty为其第三个参数接受两种不同的格式：

• 数据描述符，您目前使用
• 访问器描述符，它允许定义getter/setter

。

因此，例如，您可以使用一个可选参数扩展您自己的_defineProperty函数，以指示getter/setter的意图：

​

function _defineProperty(obj, key, value, accessor) {
    if (accessor == "getter") {
        Object.defineProperty(obj, key, {
            get: value,
            enumerable: true,
            configurable: true,
        });
    } else if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}

// simple demo
class MyClass {
    constructor() {
        _defineProperty(this, "num", () => 3, "getter");
    }
}

console.log(new MyClass().num);

​

如果您希望它是一个静态方法，那么在类(即构造函数上)上定义它：

​

function _defineProperty(obj, key, value, accessor) {
    if (accessor == "getter") {
        Object.defineProperty(obj, key, {
            get: value,
            enumerable: true,
            configurable: true,
        });
    } else if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}

// simple demo
class MyClass {}
_defineProperty(MyClass, "num", () => 3, "getter");

console.log(MyClass.num);

​