Can we cast a generic object to a custom object type in javascript?

JavascriptOopObject

Javascript Problem Overview


For example, I already have this object somewhere in the code, it is a generic object:

var person1={lastName:"Freeman",firstName:"Gordon"};

I have the constructor for a Person object:

function Person(){
 this.getFullName=function(){
  return this.lastName + ' ' + this.firstName;
 }
}

Is there a simple syntax that allows us to convert person1 to an object of type Person?

Javascript Solutions


Solution 1 - Javascript

> The answer of @PeterOlson may be worked back in the day but it looks like Object.create is changed. I would go for the copy-constructor way like @user166390 said in the comments.
The reason I necromanced this post is because I needed such implementation.

Nowadays we can use Object.assign (credits to @SayanPal solution) & ES6 syntax:

class Person {
  constructor(obj) {
    obj && Object.assign(this, obj);
  }
  
  getFullName() {
    return `${this.lastName} ${this.firstName}`;
  }
}

Usage:

const newPerson = new Person(person1)
newPerson.getFullName() // -> Freeman Gordon

ES5 answer below

function Person(obj) {
    for(var prop in obj){
        // for safety you can use the hasOwnProperty function
        this[prop] = obj[prop];
    }
}

Usage:

var newPerson = new Person(person1);
console.log(newPerson.getFullName()); // -> Freeman Gordon

Using a shorter version, 1.5 liner:

function Person(){
    if(arguments[0]) for(var prop in arguments[0]) this[prop] = arguments[0][prop];
}

jsfiddle

Solution 2 - Javascript

No.

But if you're looking to treat your person1 object as if it were a Person, you can call methods on Person's prototype on person1 with call:

Person.prototype.getFullNamePublic = function(){
    return this.lastName + ' ' + this.firstName;
}
Person.prototype.getFullNamePublic.call(person1);

Though this obviously won't work for privileged methods created inside of the Person constructor—like your getFullName method.

Solution 3 - Javascript

This is not exactly an answer, rather sharing my findings, and hopefully getting some critical argument for/against it, as specifically I am not aware how efficient it is.

I recently had a need to do this for my project. I did this using Object.assign, more precisely it is done something like this:Object.assign(new Person(...), anObjectLikePerson).

Here is link to my JSFiddle, and also the main part of the code:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function() {
    return this.lastName + ' ' + this.firstName;
  }
}

var persons = [{
  lastName: "Freeman",
  firstName: "Gordon"
}, {
  lastName: "Smith",
  firstName: "John"
}];

var stronglyTypedPersons = [];
for (var i = 0; i < persons.length; i++) {
  stronglyTypedPersons.push(Object.assign(new Person("", ""), persons[i]));
}

Solution 4 - Javascript

This borrows from a few other answers here but I thought it might help someone. If you define the following function on your custom object, then you have a factory function that you can pass a generic object into and it will return for you an instance of the class.

CustomObject.create = function (obj) {
    var field = new CustomObject();
    for (var prop in obj) {
        if (field.hasOwnProperty(prop)) {
            field[prop] = obj[prop];
        }
    }

    return field;
}

Use like this

var typedObj = CustomObject.create(genericObj);

Solution 5 - Javascript

This is just a wrap up of Sayan Pal answer in a shorter form, ES5 style :

var Foo = function(){
    this.bar = undefined;
    this.buzz = undefined;
}

var foo = Object.assign(new Foo(),{
    bar: "whatever",
    buzz: "something else"
});

I like it because it is the closest to the very neat object initialisation in .Net:

var foo = new Foo()
{
    bar: "whatever",
    ...

Solution 6 - Javascript

This worked for me. It's simple for simple objects.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    return this.lastName + " " + this.firstName;
  }

  static class(obj) {
    return new Person(obj.firstName, obj.lastName);
  }
}

var person1 = {
  lastName: "Freeman",
  firstName: "Gordon"
};

var gordon = Person.class(person1);
console.log(gordon.getFullName());

I was also searching for a simple solution, and this is what I came up with, based on all other answers and my research. Basically, class Person has another constructor, called 'class' which works with a generic object of the same 'format' as Person. I hope this might help somebody as well.

Solution 7 - Javascript

Here have a way if you like. 1st make an object with your all desire properties. Then Call this object with your custom values. Here is link to the JSFiddle, and also the main part of the

 function Message(obj) {
  this.key = Date.now();
  this.text = "";
  this.type = "client";
  this.status = 0;
  this.senderID = "";
  this.name = "";
  this.photoURL = "";
  this.metaData = [];
  this.time = new Date().toISOString();
  
  for (var prop in obj) {
    if (this.hasOwnProperty(prop)) {
      this[prop] = obj[prop];
    }else{
    	this.metaData = [ ...this.metaData, {[prop]: obj[prop]} ];
    }
  }
}

 const getAllMessages = function (messages=[]) {
  var newMessages = [];
  for (var i = 0; i < messages.length; i++) {
    newMessages.push(new Message(messages[i]));
  }
  return newMessages;
};

var messages = [{
  name: "Jhon",
  text: "Hello 1"
}, {
  name: "Smith",
  text: "Hello 2",
  meta1: "meta data 1"
}];

console.log("single Instances", new Message(messages[0]));

console.log("Multiple Instances",getAllMessages(messages));

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionboboView Question on Stackoverflow
Solution 1 - JavascriptA1rPunView Answer on Stackoverflow
Solution 2 - JavascriptAdam RackisView Answer on Stackoverflow
Solution 3 - JavascriptSayan PalView Answer on Stackoverflow
Solution 4 - JavascriptObiView Answer on Stackoverflow
Solution 5 - JavascriptpasxView Answer on Stackoverflow
Solution 6 - JavascriptLovroView Answer on Stackoverflow
Solution 7 - JavascriptShapon PalView Answer on Stackoverflow