JavaScript Object Constructor

Instance

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;

Try It Yourself

It is a good habit to name constructor functions with uppercase initial letters.

object type (blueprint) (class)

The examples in the previous chapter are limited. They only create a single object.

Sometimes we need to create many objects of the same 'type' of theblueprint”

One way to create a 'type' of 'object' is to usethe object constructor function.

In the above example,function Person(first, last, age, eye) { which is the object constructor function.

Through new The keyword calls the constructor function to create objects of the same type:

var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");

Try It Yourself

this keyword

In JavaScript, it is called this is the 'owner' of the code.

this is the object itself when used in an object.

In a constructor function,this It has no value. It is a substitute for a new object. When a new object is created, the value of this becomes the new object.

Please note this It is not a variable. It is a keyword. You cannot change the value of this.

Adding Properties to Objects

Adding a new property to an existing object is simple:

Instance

myFather.nationality = "English";

Try It Yourself

The new property is added to myFather. Not myMother, nor any other person object.

Adding Methods to Objects

Adding a new method to an existing object is simple:

Instance

myFather.name = function () {
    return this.firstName + " " + this.lastName;

Try It Yourself

The new method is added to myFather. Not myMother, nor any other person object.

Adding Properties to Constructors

Unlike adding a new property to an existing object, you cannot add a new property to an object constructor:

Instance

Person.nationality = "English";

Try It Yourself

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

Instance

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";

Try It Yourself

This way, object properties can have default values.

Adding Methods to Constructors

Your constructor function can also define methods:

Instance

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.name = function() {return this.firstName + " " + this.lastName;};

Try It Yourself

Unlike adding a new method to an existing object, you cannot add a new method to an object constructor.

You must add a method to an object inside the constructor function:

Instance

function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;

The changeName() function assigns the value of name to the lastName property of person.

Now you can try it out:

myMother.changeName("Jobs");

Try It Yourself

by using myMother instead of this，JavaScript can know which person it is currently dealing with.

Built-in JavaScript constructors

JavaScript provides constructors for primitive objects:

Instance

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object

Try It Yourself

Math() Objects are not included in this list. Math is a global object.new Keywords cannot be used with Math.

Did you know?

As seen above, JavaScript provides object versions of primitive data types string, number, and boolean. However, there is no reason to create complex objects. Primitive values are much faster!

Please use object literals {} instead of new Object().

Please use string literals "" instead of new String().

Please use number literals instead Number().

Please use boolean literals instead new Boolean().

Please use array literals [] instead of new Array().

Please use pattern literals instead new RegExp().

Please use function expressions () {} instead of new Function().

Instance

var x1 = {};            // A new object
var x2 = "";            // The new original string
var x3 = 0;             // The new original number
var x4 = false;         // The new original logical value
var x5 = [];            // New array object
var x6 = /()/           // New regular expression object
var x7 = function(){};  // New function object

Try It Yourself

String Object

Generally, strings are created as primitive values: var firstName = "Bill"

But you can also use new Create string objects with keywords: var firstName = new String("Bill")

Please JS StringsLearn why it is not recommended to create string values as objects in this chapter.

Numeric Object

Generally, numeric values are created as primitive values: var x = 456

But you can also use new Create numeric objects with keywords: var x = new Number(456)

Please JS NumbersLearn why it is not recommended to create numeric values as objects in this chapter.

Boolean Object

Generally, logical values are created as primitive values: var x = false

But you can also use new Create logical objects with keywords: var x = new Boolean(false)

Please JS LogicLearn why it is not recommended to create logical values as objects in this chapter.