This free HTML JavaScript tutorial guides you how to setup, define a JavaScript class through 3 simple ways. Please try them in the detailed post, or read more HTML JavaScript tutorial about OOP JavaScript on jsB@nk:
- JavaScript OOP Tutorial for Dummies
- OOP in JavaScript: Some Basics
- Simple Concepts about Types and Objects in JavaScript OOP
- JavaScript OOP - Scopes and Contexts
- OOP JavaScript: Public and Private Methods
- Basic OOP Concepts in Javascript
- Demo
- Enlarge
- Reload
- New window
Free iPage Web Hosting for First Year NOW
If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?
Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Introduction
JavaScript is a very flexible object-oriented language when 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 way of doing it, it helps to know some alternatives in order to read other people's code.
It's important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but 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 is 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 class created using function(),
you use the this keyword, as seen in the following example.
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = getAppleInfo;
}
function getAppleInfo() {
return this.color + ' ' + this.type + ' apple';
}
To instantiate an object of the Apple class, set some properties and call methods you can do the following:
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());
1.1. Methods defined internally
In the example above you see that the method getInfo() of the Apple
class was defined in a separate function getAppleInfo(). While this
works fine, it has one drawback - you may end up defining a lot of
these functions and they are all in the "global namespece". This means
you may have naming conflicts if you (or another library you are using)
decide to create another function with the same name. The way to
prevent pollution of the global namespace, you can define your methods
within the same class, like this:
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
}
Using this syntax changes nothing in the way you instantiate the object and use its properties and methods.
2. Using JSON
JSON stands for JavaScript Object Notation; it simply uses the short
way of defining objects and arrays in JavaScript. To create an empty
object using JSON you can do:
var o = {};
instead of the "normal" way:
var o = new Object();
For arrays you can do:
var a = [];
instead of:
var a = new Array();
So using the JSON you can define a class, while at the same time
creating an instance (object) of that class. Such a class/object is
also called "singleton" which means that you can have only one single
instance of this class at any time, you cannot create more objects of
the same class. Here's the same class described in the previous
examples, but using JSON syntax this time:
var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
In this case you don't need to (and cannot) create an instance of the
class, it already exists. So you simply start using this instance.
apple.color = "reddish";
alert(apple.getInfo());
3. Singleton using a function
The third way presented in this article is a combination of the other
two you already saw. You can use a function to define a singleton
class. Here's the syntax:
var apple = new function() {
this.type = "macintosh";
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
};
}
So you see that this is very similar to 1.1. discussed above, but the way to use the object is exactly like in 2.
apple.color = "reddish";
alert(apple.getInfo());
- Sent (0)
- New
Save up to 630$ when buy new iPhone 15
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language
Dall-E-OpenAI.com
Generate creative images automatically with AI
AIVideo-App.com
Render creative video automatically with AI