JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Constructor Functions

In previous chapters we learned how to create objects in JavaScript.

The examples from the previous chapters are limited. They only create single objects.

Sometimes we need a "blueprint" for creating many objects (instances) of the same type.

The way to create a "blueprint", is to use an object constructor function.

An object constructor function makes it easy to create multiple objects (instances) with the same properties and methods.

In the example below, function User() is an object constructor function:

Objects of the same type are created by calling the constructor function with the new keyword:

Run code

As you can see, we can quickly build a large number of different user objects by invoking the User constructor with different arguments. This is exactly the same pattern that JavaScript uses in its built-in constructors like Array() and Date().


The this Keyword

JavaScript has a special keyword, this, that you can use within a method to refer to the current object.

The value of this, when used in an object, is the object itself.

In a constructor function this does not have a value. It is a substitute for the new object. The value of this will become the new object when a new object is created.



Adding a Property to an Object

In order to add a new property to an object, you would assign a new value to a property with the assignment operator (=).

Run code

Note: The property will be added to vishal. Not to tarush. (Not to any other User objects).


Adding a Method to an Object

In order to add a new method to an object, you would assign a new function to a property with the assignment operator (=).

Run code

Note: The method will be added to vishal. Not to tarush. (Not to any other User objects).


Adding a Property to a Constructor

We cannot add a new property to a constructor function the same way we add a new property to an existing object:

Run code

To add a new property to a constructor, you must add it to the constructor function:

Run code

Sometimes we want to add new properties at later stage to a constructor function which will be shared across all the objects (instances). The answer is Object Prototype.


Adding a Method to a Constructor

A constructor function can also define methods.

We cannot add a new method to a constructor function the same way we add a new method to an existing object.

Adding methods to an object must be done inside the constructor function.

Run code

Sometimes we want to add new methods at later stage to a constructor function which will be shared across all the objects (instances). The answer is Object Prototype.


Built-in JavaScript Constructors

JavaScript has following built-in constructors for native objects:

Run code

Don't Declare Number, String, or Boolean as Objects

As you can see above, JavaScript has object versions of the primitive data types String, Number, and Boolean.

But there is no reason to create complex objects. Primitive values are much faster.

Always treat numbers, strings, or booleans as primitive values. Not as objects.

Declaring these types as objects, slows down execution speed, and produces unexpected results.

Run code

Objects cannot be compared:

Run code

ALSO:

  • Use {} instead of new Object()
  • Use "" instead of new String()
  • Use 0 instead of new Number()
  • Use false instead of new Boolean()
  • Use [] instead of new Array()
  • Use /()/ instead of new RegExp()
  • Use function (){} instead of new Function()
Run code

String Primitives and String Objects

Normally, JavaScript strings are primitive values, created from literals: var city = "New Delhi";.

But strings can also be defined as objects using the new keyword: var city = new String("New Delhi");.

Learn why strings should not be created as object in the chapter: JS Strings.


Number Primitives and Number Objects

Normally, JavaScript numbers are primitive values, created from literals: var num = 50;.

But numbers can also be defined as objects using the new keyword: var num = new Number(50);.

Learn why numbers should not be created as object in the chapter: JS Numbers.


Boolean Primitives and Boolean Objects

Normally, JavaScript booleans are primitive values, created from literals: var x = false;.

But booleans can also be defined as objects using the new keyword: var x = new Boolean(false);.

Learn why booleans should not be created as object in the chapter: JS Booleans.