Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript : function and object...?

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?
like image 756
Paul Avatar asked May 11 '11 01:05

Paul


People also ask

What is the difference between object and function?

An object is a collection of functions and data. A function is a collection of commands and data. When a bunch of functions work together to perform a certain task we may call this community of functionality an object.

How do you associate function with object using JavaScript?

In JavaScript you can associate functions with objects. Here we will demonstrate how the constructor creates the object and assigns properties. Object is a standalone entity, with properties and type in JavaScript. JavaScript objects can have properties, that define their characteristics.

Can objects contain functions JavaScript?

Object properties can be both primitive values, other objects, and functions. An object method is an object property containing a function definition. JavaScript objects are containers for named values, called properties and methods.

How do you access a function inside an object?

You can call a function inside an object by declaring the function as a property on the object and invoking it, e.g. obj. sum(2, 2) . An object's property can point to a function, just like it can point to a string, number or other values. Copied!


2 Answers

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.)
like image 125
Sean Vieira Avatar answered Sep 22 '22 22:09

Sean Vieira


Every function has a reference to this. if you call Tip(), this will refer to the global object. If you call new Tip(), a new object with a reference to Tip.prototype is created and this will refer to that new object.

You can't use new on objects, for instance new {} throws TypeError: object is not a function. If you are refering to new Object() then that works since Object is a function.

like image 44
Adam Bergmark Avatar answered Sep 25 '22 22:09

Adam Bergmark