JS Object.assign with own classes as properties

Question

I am looking for an alternative equivalent solution for this jQuery-expression:

$.extend(true, {}, {foo: "bar"}, {bar: "foo"});

I am using Babel with ES_2015 and polyfill. For now I was assuming, that it is possible to use

Object.assign({}, {foo: "bar"}, {bar: "foo"});

In my case this is not what I was looking for, as I found out, that when a property is my own Class, that does not work.

For example

let a = {origin: new Point(0,0), sizes: new Point(100, 100)};
let b = {origin: new Point(50,50), sizes: new Point(200, 200)};

Object.assign({}, a, b);

It does not copy my Point class. Is there any other solution, leaving jQuery out?

Best regards,

Michael

edit2: Bergi was right, I got confused myself. I will do some testing, but for now its seems fine. Maybe I have a larger issue elsewhere in my code. Will get back to you. Thx so far folks edit, so nobody gets confused:

I NEED an instance of Point. Not an object.

    /*global Point*/
describe('Object.assign', function() {
    "use strict";

    it("Point", function() {
        let a = {
            origin: new Point.Point(0, 0),
            sizes: {
                x: new Point.Point(100, 100),
                y: new Point.Point(500, 500)
            }
        };
        let b = {
            origin: new Point.Point(50, 50),
            sizes: {
                x: new Point.Point(1000, 1000),
                y: new Point.Point(5000, 5000)
            }
        };
        var s = Object.assign({}, a, b);
        console.log(typeof s.origin, s.origin instanceof Point.Point);
        console.log(typeof s.sizes.x, s.sizes.x instanceof Point.Point);
        console.log(typeof s.sizes.y, s.sizes.y instanceof Point.Point);

        console.log(s.sizes.y.clone, s.sizes.x.clone);

    });

});

So in the end, I want s instanceof Point to be true ;)

It seems to be working for me. What exactly do you get with Object.assign({}, a, b)? — Michał Perłakowski
– Michał Perłakowski, Commented Jun 5, 2016 at 13:14
Yeah, I want to have my instance of Point in the merged object — dazlious
– dazlious, Commented Jun 5, 2016 at 13:35
Your question doesn't really make sense. a, b and s are plain objects, that's what you've written. s.origin and s.sizes will of course be instanceof Point. — Bergi
– Bergi, Commented Jun 5, 2016 at 14:05

marc_s · Accepted Answer · 2016-06-11 08:17:28Z

2

I think, it need to implement "clone" method.but ES2015 doesn't have this method...

(jQuery has clone method, but I understand that you don't want to use it...)

My implementation is below, please use it for your implementation :)

function clone(obj) {
  if (null == obj || "object" != typeof obj) return obj;
  var copy = new obj.constructor;
  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) {
      if (null == obj[attr] || "object" != typeof obj[attr]) {
        copy[attr] = obj[attr];
      } else {
        copy[attr] = clone(obj[attr]);
      }
    }
  }
  return copy;
}

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

let a = {origin: new Point(0,0), sizes: new Point(100, 100)};
let b = {origin: new Point(50,50), sizes: new Point(200, 200)};

const copied = Object.assign({}, clone(a), clone(b)); // <- copied!

console.log(copied); // { origin: Point { x: 50, y: 50 }, sizes: Point { x: 200, y: 200 } }
b.origin.x = 300;    // <- changed!
console.log(b);      // { origin: Point { x: 300, y: 50 }, sizes: Point { x: 200, y: 200 } } (b was changed)
console.log(copied); // { origin: Point { x: 50, y: 50 }, sizes: Point { x: 200, y: 200 } } (but, copied isn't changed!)

edited Jun 11, 2016 at 8:17

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 5, 2016 at 13:45

joe-re

786 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dazlious Over a year ago

This is not what I wanted. This only copies an object. I want to copy instances

Collectives™ on Stack Overflow

JS Object.assign with own classes as properties

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related