How are they different and why would you use one over the other?

For example:

function setupOptionsObj(num) {
  return {
    data: num,
    func: function() {
      return num * 10
    }
  }
}

function setupOptionsConstructor(num) {
  this.data = num;
  this.func = function() {
    return num * 10
  }
}

var one = setupOptionsObj(123)
var two = new setupOptionsConstructor(123)

console.log(one.func());
console.log(two.func());

Thank you :)

CodePudding user response：

setupOptionsObj() returns a plain object.

new setupOptionsConstructor() returns an object whose prototype is setupOptionsConstructor.prototype.

Prototypes allow you to add methods and properties that apply to all objects created by that constructor. This is the basis of JavaScript's prototype-based object-oriented programming.

For example, below we only have one foo function, not one in every object.

function setupOptionsConstructor(num) {
  this.data = num;
}

setupOptionsConstructor.prototype.func = function() {
  return this.data * 10
};

var two = new setupOptionsConstructor(123);
var three = new setupOptionsConstructor(456);

console.log(two.func());
console.log(three.func());

CodePudding user response：

A constructor function is a normal function.

What makes the difference here is the use of the new operator which makes the context (this) in the function the new instance, thus letting it take the two properties, and returns this new instance.

Without the new operator, the context would have been the external one.

The whole magic, thus, is in the new operator :

Let’s take an example to understand the birth of constructors in Javascript. Suppose, you are asked to create an object of employee and it should have 4 properties firstName, lastName, gender , and designation. Well! you said no problem.

var employee1={};
employee1.firstName="Anoop";
employee1.lastName="Rai";
employee1.gender="M";
employee1.designation="Software Engineer";

Above is the simplest way, first you created empty object and then you associated all the 4 properties to the object (of course, you could have also created the same via inline). What if you are asked again to create another employee object with the same properties.

var employee2={};
employee1.firstName="Ram";
employee1.lastName="Kumar";
employee1.gender="M";
employee1.designation="Associate Software Engineer";

Seems no problem at all. Now what if you are asked that there are total 100 employees and you just created 2 of them, common you need to create another 98 employee objects. Now you won’t be creating objects like above as it seems tedious. Gotcha! let’s create a factory method that will be called any number of times and it will create objects and then return it to us. Yeah! write once and will be used many times.

function createEmployeeObject(firstName, lastName, gender, designation){
  var employee={};
  employee.firstName=firstName;
  employee.lastName=lastName;
  employee.gender=gender;
  employee.designation=designation;
  return employee;
} 

var employee3=createEmployeeObject("Harry", "Dsouza", "M", "Project Manager");

Much convenient way, and without any duplicate codes. Just call createEmployeeObject function with your arguments and in return you get your object. What if we have several types of objects say department. Then also we will have a function that will create a department object and returns it.

So, what is common in these kinds of functions. It is:-

1. creating empty object var myObj={};

2. returning object after populating it return myObj;

Creating empty object and returning object is common across all functions that create objects. Javascript has created a shortcut that lets you not to write these lines when you are using function that creates objects. So, these 2 lines can be skipped. Way to do this is by using Constructors.

Using functions for creating objects is fairly common in Javascript, so Javascript provides shortcut that lets you write functions for creating objects. These special functions are called Constructor functions. Constructors are functions that lets you populate the object which you need to create.

function createEmployeeObject(firstName, lastName, gender, designation){
  this.firstName=firstName;
  this.lastName=lastName;
  this.gender=gender;
  this.designation=designation;
}
var employee4=new createEmployeeObject("Alan", "Marks", "F", "Business Analyst");

You must know about this keyword It points to the current object.Remember that in Constructor functions Javascript creates empty object for us, so this actually points to that object only. Javscript Construtor functions automatically returns the object after it is populated. Now how to tell Javascript that a function is called in Constructor mode, it’s the new keyword that tells Javascript to treats a function as Constructor function. Everytime you need an object, use new keyword and then call a function, and then that function prepares an object for us and returns it.

Even though Javascript is not class based, you must take care of the Constructor function name. it’s not good to use camel case, use regular one.

function Employee(firstName, lastName, gender, designation){
  this.firstName=firstName;
  this.lastName=lastName;
  this.gender=gender;
  this.designation=designation;
}
var employee5=new Employee("Mark", "Watson", "M", "DBA");