Objects in JavaScript
| In this article |
|---|
| Create object by using JavaScript object literal |
| Using constructor to create Objects in JavaScript |
| Create object by using object.create() |
| Using ECMAScript 6 Classes to create javescript Objects |
You can create javascript Object literal like this.
//object literal
var employee = {
firstName: 'Ahmed',
lastName: 'Saad'
};
// you can call it like this
document.write(employee.firstName); //output : Ahmed
Add property to your Object .
//object literal
var employee = {
firstName: 'Ahmed',
lastName: 'Saad'
};
// add object property
employee.salary = 5000;a
document.write(employee.salary);
//output
: 5000
Add a Function to your Object .
//object literal
var employee = {
firstName: 'Ahmed',
lastName: 'Saad'
};
//Add Function
employee.fullName = function
() {
document.write(this.firstName + ' ' + this.lastName)
// Note : this keyword refers to object
itself
}
// call function like this
employee.fullName();
//Output
: Ahmed Saad
Another way to add a Function to your Object , Add a Function inside your Object .
//object literal
var employee = {
firstName: 'Ahmed',
lastName: 'Saad',
fullName: function () {
document.write(this.firstName + ' ' + this.lastName)
// Note : this keyword refers
to object itself
}
};
// call function like this
employee.fullName();
//Output
: Ahmed Saad
2 - Using constructor to create Objects in JavaScript
If you want to create multi instance of an object you can use constructor to create Objects.
After createing constructor Object use new Keyword to create new instance of your objets.
Here is how to create constructor Object
//constructor object
function
employee() {
this.firstName
= 'Ahmed',
this.lastName = 'Saad'
};
//Create new instance
var emp = new employee();
// use it like this
document.write(emp.firstName)
//Output
: Ahmed
You can pass values of properties to function instead of hardcoded it.
your constructor function will look like this .
//constructor object with parameters
function
employee(fName, lName) {
this.firstName = fName,
this.lastName = lName
};
//Create new instance and pass values
var emp = new employee('Ahmed', 'Saad');
// use it like this
document.write(emp.firstName)
//Output
: Ahmed
Add Function to your Object .
//constructor object with parameters and function
function
employee(fName, lName) {
this.firstName = fName,
this.lastName = lName,
this.fullName = function () {
document.write(this.firstName + ' ' + this.lastName)
}
};
//Create new instance and pass values
var emp = new employee('Ahmed', 'Saad');
// use it like this
emp.fullName() //Output : Ahmed
Saad
3 - Create object by using object.create()
The Object.create() method creates a new object with the specified prototype object and properties.
Here is how to create Object by using Object.create() method .
//use objact.create()
var employee =
Object.create(Object.prototype,
{
firstName: {
value: 'Ahmed'
},
lastName: {
//go to JavaScript Object
Properties Article for more details
writable: true,
configurable: true,
value: 'Saad'
}
}
);
document.write(employee.firstName)//Output : Ahmed
4 - Using ECMAScript 6 Classes to create javescript Objects
ECMAScript 6 provide functionality to use Class structure to Create object.
Note: Browser must support ECMAScript 6 , I used Microsoft Edge for this example.
Here is how to create Object by using class .
//Ecma Script 6 Classes
class
Employee {
constructor(fName, lName) {
this.firstName = fName
this.lastName = lName
}
fullName() {
//new liine
document.write('<br\>');
document.write(this.firstName, ' ' + this.lastName)
}
}
var emp = new Employee('Ahmed', 'Saad');
//use it
document.write(emp.firstName) //Output : Ahmed
//call function
emp.fullName(); //Ourput
: Ahmed Saad
