Javascript使用装饰器改变静态类字段值?

mnemlml8  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(120)

JS字段装饰器可以改变它的值吗?
一个简化的使用情形如下所示:

const addItem = (newValue) => {
  return function (target) {
    target.value.push(newValue);
  };
};

class Test {
  @addItem(4)
  static values = [1,2,3];
}

const test = new Test();
console.log(test.constructor.values) // [1,2,3,4]

使用以下实验装饰器:

'@babel/plugin-proposal-decorators',
  {
    version: '2018-09',
    decoratorsBeforeExport: true,
  },

最终的目标是做一个装饰器来将tailwind样式表注入到lit元素static styles中。目前正在使用一个mixin来完成这个任务,但是这样做只是为了好玩,并学习装饰器的功能。

更新Barmars评论

当试图从内部函数返回一个值时,我最终得到了一个错误:

export const addItem = (value) => {
  return function (target) {
    return [value];
  };
};

Uncaught TypeError: An element descriptor's .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "undefined"

查看文档,传递给每个函数的变量似乎也不匹配。

function logged(value, { kind, name }) {
  if (kind === "field") {
    return function (initialValue) {
      console.log(`initializing ${name} with value ${initialValue}`);
      return initialValue;
    };
  }
}

运行该示例时,logged()的第二个参数未定义。“initialValue”也是一个对象,而不是值:

Object { kind: "field", key: "styles", placement: "own", descriptor: {…}, initializer: value(), … }
dvtswwa3

dvtswwa31#

Nicolo Ribaudo能够帮助我完成Babel的讨论,正确的方法是使用初始化函数:

const addItem = (newValue) => {
  return function (target) {
    const { initializer } = target;
    target.initializer = function () {
      return [
        ...initializer.call(this),
        newValue,
      ];
    };
  };
};

class Test {
  @addItem(4)
  static values = [1,2,3];
}

const test = new Test();
console.log(test.constructor.values) // [1,2,3,4]

相关问题