jquery create prototype from object

Question

I would like to cheat a little bit when creating prototypes

for example

var person = {
   name: 'John',
   age: 110,
   gender: 'm',
   ...
};

var employee = new Person(person);

function Person(args) {
   $.each(args, function(key, value) {
      this[key] = value; // Cannot create property 'key' on number
   });
}

console.log(employee.age);

In PHP this can be done like

function __construct() {
    $args = func_get_arg(0);            
    foreach ($args as $key => $value) {
        $this->$key = $value;
    }
    return $this;
}

So what is the problem here. What do you expect us to do? What kind of solution that you are expecting? — Ramesh
– Ramesh, Commented Aug 24, 2018 at 11:39
Well assigning this[key] = value is not working. I would like to create a Person out of object instead of creating something like this: var employee = new Person(person.name, person.age, person.gender, ...); and function Person(name, age, gender, ...) this.name = name etc. — Hene
– Hene, Commented Aug 24, 2018 at 11:43

Amit Wagner · Accepted Answer · 2018-08-24 11:46:56Z

3

the problem is "this" refers to the each function and not the actual Person you can change it to arrow function an it will work

var person = {
   name: 'John',
   age: 110,
   gender: 'm',
   ...
};

var employee = new Person(person);

function Person(args) {
   $.each(args, (key, value) => { //changed to arrow function to keep this in the same scope
      this[key] = value; // Cannot create property 'key' on number
   });
}

console.log(employee.age);

answered Aug 24, 2018 at 11:46

Amit Wagner

3,1843 gold badges23 silver badges39 bronze badges

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

4 Comments

Jared Smith Over a year ago

Might add that the difference between this and the OP's PHP version is that the PHP version uses a loop instead of a callback function (so no scoping issue).

Hene Over a year ago

Awesome! Thank you.

Aboca Over a year ago

Note that arrow functions might cause compatibility issues: caniuse.com/#feat=arrow-functions

alexP Over a year ago

Or just use bind(this) $.each(args, function(key, value) { this[key] = value; }.bind(this));

Aboca · Accepted Answer · 2018-08-24 11:53:09Z

2

The problem on your jQuery code is that 'this' is actually in the jquery each scope, so to actually prototype your new instance you need to do this:

function Person(args) {
    var _this = this;
   $.each(args, function(key, value) {
      _this[key] = value;
   });
}

You can also achieve this without using jQuery:

 function Person(args) {
    for(var key in args){
        this[key] = args[key];
     }
 }

edited Aug 24, 2018 at 11:53

answered Aug 24, 2018 at 11:43

Aboca

5752 silver badges9 bronze badges

Comments

alexP · Accepted Answer · 2018-08-24 11:51:51Z

1

Use bind for getting the right scope

function Person(args) {
   $.each(args, function(key, value) {
      this[key] = value; 
   }.bind(this)); //Use bind for getting the right scope
}

answered Aug 24, 2018 at 11:51

alexP

3,7657 gold badges29 silver badges37 bronze badges

Collectives™ on Stack Overflow

jquery create prototype from object

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related