将JavaScript类示例转换为普通对象保留方法

eivnm1vs  于 2023-05-12  发布在  Java
关注(0)|答案(7)|浏览(135)

我想将一个示例类转换为普通对象,而不丢失方法和/或继承的属性。例如:

class Human {
    height: number;
    weight: number;
    constructor() {
        this.height = 180;
        this.weight = 180;
    }
    getWeight() { return this.weight; }
    // I want this function to convert the child instance
    // accordingly
    toJSON() {
        // ???
        return {};
    }
}
class Person extends Human {
    public name: string;
    constructor() {
        super();
        this.name = 'Doe';
    }
    public getName() {
        return this.name;
    }
}
class PersonWorker extends Person {
    constructor() {
        super();
    }
    public report() {
        console.log('I am Working');
    }
    public test() {
        console.log('something');
    }
}
let p = new PersonWorker;
let jsoned = p.toJSON();

jsoned应该是这样的:

{
    // from Human class
    height: 180,
    weight: 180,
    // when called should return this object's value of weight property
    getWeight: function() {return this.weight},

    // from Person class
    name: 'Doe'
    getName(): function() {return this.name},

    // and from PersonWorker class
    report: function() { console.log('I am Working'); },

    test: function() { console.log('something'); }
}

这是否可能实现,如果可能,如何实现?
如果你想知道,我需要这个,因为我使用的框架,不幸的是,只接受一个对象作为输入,而我试图使用TypeScript和类继承。
此外,我做了一次上述转换,所以性能不是一个需要考虑的问题。
如果编译器的target选项设置为es6,则包含遍历对象属性的解决方案将不起作用。在es5上,通过迭代对象属性(使用Object.keys(instance))的现有实现将工作。
到目前为止,我有这样的实现:

toJSON(proto?: any) {
    // ???

    let jsoned: any = {};
    let toConvert = <any>proto || this;

    Object.getOwnPropertyNames(toConvert).forEach((prop) => {
        const val = toConvert[prop];
        // don't include those
        if (prop === 'toJSON' || prop === 'constructor') {
            return;
        }
        if (typeof val === 'function') {
            jsoned[prop] = val.bind(this);
            return;
        }
        jsoned[prop] = val;
        const proto = Object.getPrototypeOf(toConvert);
        if (proto !== null) {
            Object.keys(this.toJSON(proto)).forEach(key => {
                if (!!jsoned[key] || key === 'constructor' || key === 'toJSON') return;
                if (typeof proto[key] === 'function') {
                    jsoned[key] = proto[key].bind(this);
                    return;
                }
                jsoned[key] = proto[key];
            });
        }
    });
    return jsoned;
}

但这仍然不起作用。结果对象只包含所有类的所有属性,但只包含PersonWorker的方法。我错过了什么?

ctzwtxfj

ctzwtxfj1#

已经有很多答案了,但这是最简单的,通过使用spread syntaxde-structuring对象:

const {...object} = classInstance
8i9zcol2

8i9zcol22#

这就是我的工作
更新的答案(使用递归)

const keys = x => Object.getOwnPropertyNames(x).concat(Object.getOwnPropertyNames(x?.__proto__))
const isObject = v => Object.prototype.toString.call(v) === '[object Object]'

const classToObject = clss => keys(clss ?? {}).reduce((object, key) => {
  const [val, arr, obj] = [clss[key], Array.isArray(clss[key]), isObject(clss[key])]
  object[key] = arr ? val.map(classToObject) : obj ? classToObject(val) : val
  return object
}, {})

var classs = new Response()
var obj = classToObject(classs)
console.log({ obj, classs })

原始答案

const classToObject = theClass => {
  const originalClass = theClass || {}
  const keys = Object.getOwnPropertyNames(Object.getPrototypeOf(originalClass))
  return keys.reduce((classAsObj, key) => {
    classAsObj[key] = originalClass[key]
    return classAsObj
  }, {})
}

a11xaf1n

a11xaf1n3#

好吧,所以我的OP中的实现是错误的,这个错误简直是愚蠢的。
使用es6时的正确实现是:

toJSON(proto) {
    let jsoned = {};
    let toConvert = proto || this;
    Object.getOwnPropertyNames(toConvert).forEach((prop) => {
        const val = toConvert[prop];
        // don't include those
        if (prop === 'toJSON' || prop === 'constructor') {
            return;
        }
        if (typeof val === 'function') {
            jsoned[prop] = val.bind(jsoned);
            return;
        }
        jsoned[prop] = val;
    });

    const inherited = Object.getPrototypeOf(toConvert);
    if (inherited !== null) {
        Object.keys(this.toJSON(inherited)).forEach(key => {
            if (!!jsoned[key] || key === 'constructor' || key === 'toJSON')
                return;
            if (typeof inherited[key] === 'function') {
                jsoned[key] = inherited[key].bind(jsoned);
                return;
            }
            jsoned[key] = inherited[key];
        });
    }
    return jsoned;
}
agyaoht7

agyaoht74#

下面是toJSON()方法的实现。我们正在将当前示例的属性和方法复制到一个新对象,并排除不需要的方法,即JSON和构造器

toJSON() {
    var jsonedObject = {};
    for (var x in this) {

        if (x === "toJSON" || x === "constructor") {
            continue;
        }
        jsonedObject[x] = this[x];
    }
    return jsonedObject;
}

我已经在Chrome中测试了toJSON()返回的对象,我看到对象的行为与您期望的方式相同。

j2datikz

j2datikz5#

我反复引用了Alex Cory的解决方案,但这是我的最终结果。它期望被分配给一个类作为一个函数,并在this上有相应的绑定。

const toObject = function() {
  const original = this || {};
  const keys = Object.keys(this);
  return keys.reduce((classAsObj, key) => {
    if (typeof original[key] === 'object' && original[key].hasOwnProperty('toObject') )
      classAsObj[key] = original[key].toObject();
    else if (typeof original[key] === 'object' && original[key].hasOwnProperty('length')) {
      classAsObj[key] = [];
      for (var i = 0; i < original[key].length; i++) {
        if (typeof original[key][i] === 'object' && original[key][i].hasOwnProperty('toObject')) {
          classAsObj[key].push(original[key][i].toObject());
        } else {
          classAsObj[key].push(original[key][i]);
        }
      }
    }
    else if (typeof original[key] === 'function') { } //do nothing
    else
      classAsObj[key] = original[key];
    return classAsObj;
  }, {})
}

那么如果你使用的是TypeScript,你可以把这个接口放在任何应该转换为对象的类上:

export interface ToObject {
  toObject: Function;
}

然后在类中,不要忘记绑定this

class TestClass implements ToObject {
   toObject = toObject.bind(this);
}
syqv5f0l

syqv5f0l6#

这种解决方案将丢失方法,但将类示例转换为对象是一种非常简单的解决方案。

obj = JSON.parse(JSON.stringify(classInstance))
olmpazwi

olmpazwi7#

使用Lodash

这个方法不是递归的。

toPlainObject() {
    return _.pickBy(this, item => {
      return (
        !item ||
        _.isString(item) ||
        _.isArray(item) ||
        _.isNumber(item) ||
        _.isPlainObject(item)
      );
    });
  }

相关问题