Question

Can you call a function as an object? For example:

function Tip(txt){      
    this.content = txt;  
    this.shown = false;  
}

And:

var tip = new Tip(elem.attr('title'));

My questions:

1. Can you call new for a function, as for an object?
2. The use of “this” is made possible, because we use that function as an object?

Answer 1

You are looking for the constructor concept.

All functions in JavaScript are objects and can be used to create objects:

function make_person(firstname, lastname, age) {
    person = {};
    person.firstname = firstname;
    person.lastname = lastname;
    person.age = age;
    return person;
}
make_person("Joe", "Smith", 23);
// {firstname: "Joe", lastname: "Smith", age: 23}

However, in order to create new objects of a particular type (that is to say, that inherit a prototype, have a constructor, etc), a function can reference this and if it is called with the new operator then it will return an object with all of the attributes that are defined on this in the function – this in such cases references the new object we are creating.

function make_person_object(firstname, lastname, age) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
    // Note, we did not include a return statement
}

The key difference to note between make_person and make_person_object is that calling new make_person() (as opposed to simply make_person()) will not do anything different … both will produce the same object. Calling make_person_object() without the new operator however, will define your this attributes on the current this object (generally window if you are operating in the browser.)

Thus:

var Joe = make_person_object("Joe", "Smith", 23);
console.log(Joe); // undefined
console.log(window.firstname) // "Joe" (oops)

var John = new make_person_object("John", "Smith", 45);
console.log(John); // {firstname: "John", lastname: "Smith", age: 45}

Also, as @RobG points out, this way of doing things creates a reference to the prototype property of make_person_object on each “Person” we create. This enables us to add methods and attributes to persons after the fact:

 // Assuming all that came before
make_person_object.prototype.full_name = "N/A";
make_person_object.prototype.greet = function(){ 
    console.log("Hello! I'm", this.full_name, "Call me", this.firstname); 
};
John.full_name // "N/A"
John.full_name = "John Smith"; 
make_person_object.full_name // Still "N/A"
John.greet(); // "Hello! I'm John Smith Call me John"

Convention has it that constructor functions like make_person_object are capitalized, singularized and “nouned” (for lack of a better term) — thus we would have a Person constructor, rather than a make_person_object which might be mistaken for an ordinary function.

See also:

• The new operator
• bobince’s great introduction to subclassing in JavaScript (both with and without prototype inheritance.)