3 ways to define a JavaScript class

3 ways to define a JavaScript classseptember 29th, 2006. Tagged:javascriptintroduction

JavaScript is a very flexible object-oriented language if it comes to syntax. In this article you can find three ways of defining and instantiating an Object. Even if you have already picked your favorite the doing it, it helps to know some alternatives on order to read other P Eople ' s Code.

It's important to note that there is no classes in JavaScript. Functions can used to somewhat simulate classes, and in general JavaScript is a class-less language. Everything is an object. And when it comes to inheritance, objects inherit from objects, not classes from classes as in the "class"-ical Languages.

1. Using a function

This was probably one of the most common ways. You define a normal JavaScript function and then create an object by using the new Keyword. To define properties and methods for a object created using function() , the this keyword, as seen in the following ex Ample.

function Apple (Type) { This.Type=Type;This.Color="Red";This.GetInfo=Getappleinfo;} //anti-pattern! Keep reading ...function getappleinfo ( { return this. Color +  '    + this. Type +  '  Apple Span class= "hl-code" >;               /span>               

To instantiate a object using the apple  constructor function , set some properties and call methods C An following:

 var apple  = new Apple< Span class= "hl-brackets" > ( "macintosh" Span class= "hl-brackets" > ; Apple. Color =  "reddish" Span class= "hl-code" >; alert (apple getinfo ())      

1.1. Methods defined internally

In the example above you see that the method GetInfo () of the Apple "class" is defined in a separate function getappleinf o (). While this works fine, it had one drawback–you may end up defining a lot of these functions and they is all in the "glo Bal namespece ". This means your may has naming conflicts if you (or another library is Using) decide to create another function with The same name. The Prevent pollution of the global namespace, you can define your methods within the constructor function, like th Is:

function Apple (Type) { This.Type=Type;This.Color="Red";Thisgetinfo = function  ()  { return this.color +  '    + this.type +  '  Apple};}        

Using This syntax changes nothing in the The-the-instantiate the object and use its properties and METHODS.

1.2. Methods added to the prototype

A drawback of 1.1. is, The method GetInfo () is recreated every time you create a new Object. Sometimes that may is what you want, but it's rare. A more Inexpensive-is-to-add GetInfo () to the prototype of the constructor Function.

function Apple (Type) { This.Type=Type;This.Color="Red";} Apple.Prototypegetinfo = function  ()  { return thiscolor +  '   ' this.type +  '  apple ' ;}               

Again, You can use the new objects exactly the Same-as in 1. and 1.1.

2. Using Object Literals

Literals is Shorter-define objects and arrays in JavaScript. To create a empty object using the can Do:
var o = {};
Instead of the "normal":
var o = new Object();
For arrays your can do:
var a = [];
instead of:
var a = new Array();
So you can skip the class-like stuff and create a instance (object) immediately. Here's the same functionality as described in the previous examples, but using object literal syntax this time:

Var Apple={ Type:"Macintosh",Color:"Red",getinfo: function   ()  { return this color +  '   ' this.type +  '  apple }}       /span>                

In this case you don't need to (and Cannot) create an instance of the class, it already exists. So you simply start using the This instance.

Apple.  Color"reddish";  Alert(Apple.  GetInfo());            

Such An object is also sometimes called Singleton. In "classical" languages such as Java, singleton means so can has only one single instance of this Class A T any time, you cannot create more objects of the same class. In JavaScript (no classes, remember?) This concept makes no sense anymore since all objects is singletons to begin With.

3. Singleton using a function

Again with the singleton, eh?

The third-on-the-presented in this article are a combination of the other and you already saw. You can use a function to define a singleton object. Here ' s the syntax:

varApplenewfunction(){    

3 ways to define a JavaScript class