How to mimic constructor in JavaScript in OOP style?

Question

In an OOP way, I am defining a Person "class" as follows:

var Person = {
  name: '',
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
};

Now, I am instantiating the above class.

var person1= Object.create(Person);
person1.name = 'personname';
person1.greeting();

How can I mimic a constructor so that when Object.create(Person) creates a new object, the constructor code is automatically computed?

Could be a typo, but animal is not defined in your example. — gotomanners
– gotomanners, Commented Feb 2, 2017 at 7:39
what are you trying to do? why do you need to mimic sth. that already exists? why don't you just use the existing mechanics, but instead you work around them and ask how to mimic them? What's the purpose of this, what are your intentions/reasons/thoughts? — Thomas
– Thomas, Commented Feb 2, 2017 at 7:42
@Thomas Avoiding the keywords new, this, and constructor functions is a common style in JavaScript that comes from Douglas Crockford. He's written some popular books, and works on the board for ECMAScript, so I can see how they would like to do things this way. — castletheperson
– castletheperson, Commented Feb 2, 2017 at 7:53

castletheperson · Accepted Answer · 2017-02-02 07:59:44Z

1

You would wrap up the code in a function, and call it there. Object.create will establish a relationship with the prototype, but won't call any additional code automatically.

function person(name) {
  var person1 = Object.create(Person);
  person1.name = name;
  return person1;
}

person('personname').greeting();

You should also avoid uppercasing the first letter of variables unless they are functions which should be called using new. This is a naming convention used only for constructor functions.

edited Feb 2, 2017 at 7:59

answered Feb 2, 2017 at 7:36

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2017-02-02 07:44:33Z

1

You could make an real class for use with new.

var Person = function () {
    var Person = function () {
        this.name = ['', ''];
        this.age = 32;
        this.gender = 'male';
        this.interests = ['music', 'skiing'];
    };
  
    Person.prototype.bio = function() {
        return this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.';
    };
    Person.prototype.greeting = function() {
        return 'Hi! I\'m ' + this.name + '.';
    };
    return Person;
}();


var p1 = new Person;

p1.name = ['Tom', 'Sawyer'];
console.log(p1.bio());
console.log(p1);

answered Feb 2, 2017 at 7:44

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Alexander Elgin · Accepted Answer · 2017-02-02 07:40:06Z

0

var Person = function(name) {
  this.name = name || '';
  this.age = 32;
  this.gender = 'male';
  this.interests = ['music', 'skiing'];
  
  this.bio = function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  };
  
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
};

var person1= new Person('personname');
person1.greeting();

answered Feb 2, 2017 at 7:40

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

5 Comments

kofhearts Over a year ago

so all the assignments for example this.name, this.age, this.gender, this.interests are equivalent to constructor code. is that right?

Alexander Elgin Over a year ago

@user734861 Correct. That's the way how constructor is defined in JS. ES6 has a more elegant OOP syntax.

Thomas Over a year ago

@user734861 this is a constructor

castletheperson Over a year ago

My interpretation of the question was they wanted to "simulate" a constructor. Meaning new was off-limits.

Ry- Over a year ago

This doesn’t mimic a constructor; this is a constructor, and it doesn’t make use of its prototype like the original code with Object.create would.

Collectives™ on Stack Overflow

How to mimic constructor in JavaScript in OOP style?

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related